path from numbers in d3 by amundo

index.html


<!doctype html>
<html>
<head>
<title>
learning d3 lines
</title>
<meta charset=utf-8>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<style>
svg {
  background: #333;
  float:right;
}

path { 
  stroke: #eee;
  stroke-width: 2px ;
  fill: red;
}

textarea { 
  height: 20em;  
}

</style>

</head>
<body>


<svg></svg>
<textarea placeholder="Type two integers per line here to see a path drawn to the right"></textarea>
<p id=pathData></p>

<script>

var 
  width = '500px',
  height = '300px';

var readLineData = () => {
  var 
    text = document.body.querySelector('textarea').value.trim(),
    lines = text.split(/\n/g).filter(line => line);
  
  var pairs  = lines.map(line => line.trim().split(/[ ]+/g));

  return pairs.map(pair => {
    return { x: parseInt(pair[0]), y: parseInt(pair[1]) }
  })
}

var svg = d3.select('svg'),
  lineFunction, 
  lineGraph;

  svg.attr({ width : width, height : height });

var pathData = document.body.querySelector('#pathData');

function renderD(){ 
  pathData.textContent = document.body.querySelector('path').getAttribute('d');
}

function draw(){ 

   d3.selectAll('path').remove();

   lineFunction = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("linear");
  
   lineGraph = svg.append("path")
    .attr("d", lineFunction(readLineData()))
}

document.addEventListener('DOMContentLoaded', draw);


var ta = document.querySelector('textarea')
ta.addEventListener('input', draw);
ta.addEventListener('input', renderD);



</script>
</body>
</html>
path from numbers in d3

Playing with lines

index.html
