Multi Line Graph

<!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>

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