D3 Examples - Line Graph Super Basic

xxxxxxxxxx
 
<!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 svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
      
    var data = [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }];
    
    var yearArr = ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'];
    
    var xScale = d3.scaleBand()
        .domain(yearArr)
        .range([0, 960])
    
    var yScale = d3.scaleLinear()
        .domain([0, 137133]) // 137133 hard code max value from data
        .range([500, 0])
     
    var line = d3.line()
        .x(function(d, i) {
        return xScale(yearArr[i]) 
      })
        .y(function(d){ 
        return yScale(d) 
      })
    
    svg.append('path')
        .attr('d', line(data[0].data)) 
        .attr('fill', 'none') 
        .attr('stroke', 'red') 
   
  </script>
</body>
​
    