Old school D3 from simpler times

All examples By author By category About

razvantomegea

Full window Github gist

Line

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    var points = [];
    
    var lineGenerator = d3.line()
	.x(d => d.x)
	.y(d => d.y);

var graph = d3.select('body').append("svg").attr("width", "100%").attr("height", "100%");
	
let lineGroup = graph.append('g');
    
    setInterval(() => {
      points = [{
        x: Math.random() * 500,
        y: Math.random() * 500
      }, {
        x: Math.random() * 500,
        y: Math.random() * 500
      }]
      lineGroup.selectAll('path').remove()
     lineGroup.selectAll('path.line')
    .data([points])
    .enter()
    .append('svg:path')
    .attr('d', lineGenerator)
    .style('stroke', 'black')
    .style('fill', 'none') 
      
      
      
      
      
    }, 3000);

</script>
</body>

https://d3js.org/d3.v4.min.js