D3 Examples - line graph

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
  <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 svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
        
    let data = {
        //line1: Array.from({ lenght: 6 }, () => Math.floor(Math.random() * 99))
        dataset0: [
            { x: 0, val_0: 0, val_1: 0, val_2: 0, val_3: 0 },
            { x: 1, val_0: 0.993, val_1: 3.894, val_2: 8.47, val_3: 14.347 },
            { x: 2, val_0: 1.947, val_1: 7.174, val_2: 13.981, val_3: 19.991 },
            { x: 3, val_0: 2.823, val_1: 9.32, val_2: 14.608, val_3: 13.509 },
            { x: 4, val_0: 3.587, val_1: 9.996, val_2: 10.132, val_3: -1.167 },
            { x: 5, val_0: 4.207, val_1: 9.093, val_2: 2.117, val_3: -15.136 },
            { x: 6, val_0: 4.66, val_1: 6.755, val_2: -6.638, val_3: -19.923 },
            { x: 7, val_0: 4.927, val_1: 3.35, val_2: -13.074, val_3: -12.625 },
        ],
    };
    
    let dataset = _.get(data, 'dataset0');
    
    console.log('dataset', dataset)
    
    let xScaleLinear = d3.scaleLinear().domain([0, _.size(dataset)]).range([0, 960 - 20]);
    let yScaleLinear = d3.scaleLinear().domain([0, _.max(_.map(dataset, 'val_0'))]).range([500 - 20, 0]);
    
    let d3line = d3.line()
        .y((d, i) => yScaleLinear(d.val_0))
      .x((d, i) => xScaleLinear(d.x));
    
    let line = svg.selectAll('.line')
        .data([dataset]);
    
    line.enter()
      .append('path')
        .merge(line)
      .attr('d', d3line)
      .style('fill', 'none')
      .style('stroke', '#000');
​
  </script>
</body>
​
    