https://stackoverflow.com/questions/62180090

by Bryan Waddington

HTML

<textarea id='test'>
1	332
2	432
3	212
4	543
5	125
6	343
7	445
</textarea>
<button id="update">update</button>
<svg class='graph' style='height:50%'/>

CSS

.line {fill: none;stroke: #ffab00;stroke-width: 3}

JavaScript

document.getElementById('update').addEventListener('click', function (e) {
	console.log('click')
  drawChart(getData());
})

function getData() {
	var text = document.getElementById('test').value;
	var data = text.trim().split('\n').map(line => {
    let tokens = line.trim().split(/\s+/).map(str => parseInt(str, 10));
    return { a: tokens[0], b: tokens[1] };
  });
  
  return data;
}

function drawChart(data) {
  var xExtent = d3.extent(data, function(d) { return d.a; }),
    xRange = xExtent[1] - xExtent[0],
    yExtent = d3.extent(data, function(d) { return d.b; }).reverse(),
    yRange = yExtent[1] - yExtent[0];

  var margin = {top: 10, right: 30, bottom: 50, left: 30}
    , width = window.innerWidth - margin.left - margin.right
    , height = window.innerHeight - margin.top - margin.bottom;

  var xScale = d3.scaleLinear().range([0, width]).domain([xExtent[0] - (xRange * .05), xExtent[1] + (xRange * .05)]);;
  var yScale = d3.scaleLinear().range([0, height]).domain([yExtent[0] - (yRange * .05), yExtent[1] + (yRange * .05)]);;

  var line = d3.line()
      .x(function(d, a) { return xScale(d.a); })
      .y(function(d, b) { return yScale(d.b); })
      .curve(d3.curveMonotoneX)

  var svg = d3.select(".graph")
      .attr("width", width + margin.left + margin.right - 10)
      .attr("height", height + margin.top + margin.bottom - 20)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(xScale));

  svg.append("g")
      .attr("class", "y axis")
      .call(d3.axisLeft(yScale));

  svg.append("path")
      .datum(data)
      .attr("class", "line")
    .attr("d", line);
}

drawChart(getData());