path from numbers in d3

Playing with lines

Type two integers per line in the text area, and a line will be drawn on the right.

<!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>

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

textarea { 
  height: 20em;  
}

</style>

</head>
<body>

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js