D3 Examples - Multi Line Graph

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; width: 2000px}
    .installation {
      stroke: #7CB5EC
    }
    .manufacturing {
      stroke: #434348
    }
    .salesdistribution {
      stroke: #90ED7D
    }
    .projectdevelopment {
      stroke: #F7A35C
    }
    .other {
      stroke: #8085E9
    }
    
    .installation-circle {
      fill: #7CB5EC
    }
    .manufacturing-circle {
      fill: #434348
    }
    .salesdistribution-circle {
      fill: #90ED7D
    }
    .projectdevelopment-circle {
      fill: #F7A35C
    }
    .other-circle {
      fill: #8085E9
    }
    
    .axis text{
      font-family: Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #666666;
      fill: #666666;
    }
    
    .top-label {
       font-family: Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, sans-serif;
       fill: #666666;
       font-size: 18px;
    }
    
    .left-label {
       font-family: Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, sans-serif;
       fill: #666666;
       font-size: 14px;
    }
    
    .label {
      font-family: Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, sans-serif;
      color: #333333;
      font-size: 12px;
      font-weight: bold;
      cursor: pointer;
      fill: #666666;
    }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var margin = {top: 30, right: 30, bottom: 30, left: 30}
    var width = 900,
        height = 650;
    var svg = d3.select("body").append("svg")
        .attr('transform', 'translate(' + margin.top + ', ' + margin.left + ')')
      .attr("width", width)
      .attr("height", height)
      
    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: [2139, 2139, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }];
​
    var t = d3.transition()
        .duration(1000)  
        .ease(d3.easeLinear);
    
    var yearArr = ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'];
    
    var xScale = d3.scaleBand()
        .domain(yearArr)
        .range([0, width - 250])
    
    var xaxis = d3.axisBottom(xScale)
            
    var yScale = d3.scaleLinear()
        .domain([0, 200000]) // 160000 hard code max value (can be computed based on max value from data)
        .range([height - 250, 60])
     
    var yaxis = d3.axisLeft(yScale)
        .tickSize(width - 250)
        .ticks(5)
        .tickFormat(d3.format('.0s'))
    
    var line = d3.line()  
        .x(function(d, i) {
        return xScale(yearArr[i]) + 100
      })
        .y(function(d){  
        return yScale(d)
      })
​
    svg.append('g')
        .attr('transform', 'translate(710, 20)') 
        .classed('y axis', true)
        .call(yaxis)
     
    var path = svg.append('g')
        .selectAll('path') 
        .data(data)
        .enter().append('path')
        .attr('d', function(d) {
        return line(d.data)
        })
        .attr('class', d => d.name.replace(' ', '').toLowerCase())
        .attr('fill', 'none')
        .attr('stroke-width', 3)   
    
    var totalLength = path.node().getTotalLength() 
   
    path    
        .attr('stroke-dasharray', totalLength + ' ' + totalLength)
        .attr("stroke-dashoffset", totalLength)  
      .transition(t)
            .attr("stroke-dashoffset", 0) 
      
    svg.append('g')
        .attr('transform', 'translate(60, ' + (height - 230) + ')')
        .classed('x axis', true) 
        .call(xaxis)
    
    svg.select('.y').selectAll(".tick line").attr("stroke", "#E6E6E6")
    svg.select('.y').select('.domain').remove()
    
    var labelGroup = svg.append('g')
        .attr('transform', 'translate(760, 100)')
        .selectAll('text')
        .data(data)
        .enter().append('g')
    
    labelGroup.append('circle')
      .attr("r", 4.5)
        .attr('cx', function(d, i) {
        return -15
      })
        .attr('cy', function(d, i) {
        return i * 25
      })
        .attr('transform', 'translate(0, -5)')
        .attr('class', d => d.name.replace(' ', '').toLowerCase() + '-circle')
        
    labelGroup.append('text')
      .text(d => d.name)
      .attr('y', function(d, i) {
        return i * 25
      })
      .attr('class', 'label')
    
    svg.append('text')
        .text('Solar Employment Growth by Sector, 2010-2016')
        .attr('transform', 'translate(200, 20)')
        .attr('class', 'top-label')
    
    svg.append('text')
        .text('scrumbledoreteamrocks')
        .attr('transform', 'translate(740, 500)')
        .attr('fill', '#999999')
    
    svg.append('text')
        .text('Number of Employees')
        .attr("transform", "rotate(-90)")
      .attr("y", 15)
      .attr("x", -300)
        .attr('class', 'left-label')
    
    labelGroup.on('click', function(d) {
        data =  data.filter(function(d2) {
            return d2.name !== d.name;
        })
       
        console.log(t)
        
        var t = d3.transition()  
          .duration(800) 
          .ease(d3.easeLinear);
       
        yScale
          .domain([0, 50000])
        yaxis.ticks(5)  
        
        path.data(data, d => d)
       
            path.exit().remove() 
        var enter = path.enter().append('path')   
        
        svg.select('.y').transition(t).call(yaxis)
        
        line.y(function(d){   
            return yScale(d)
        })
       
        enter.merge(path).transition(t).attr('d', function(d) {
            return line(d.data)
            }) 
         
        svg.select('.y').selectAll(".tick line").attr("stroke", "#E6E6E6")
          console.log(getMax())
    }); 
    
    console.log(getMax())
    
    function getMax() {
      var max = d3.max(data, function(d) {
                return d.data
      })  
      
      return d3.max(max, d => d)
    }
   
  </script>
</body>
​
    