Shortage 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; 
    	background:rgb(0,20,40)
    }
    .domain{
      stroke:white;
    }
    .tick text{
      fill:white;
      font-family:Franklin Gothic Book;
      font-size:14px;
      
    }
    
    .tick line{
      stroke:white;
    }
    
    
  </style>
</head>
<svg>
 	<defs>
    <linearGradient id="grad1" x1="0%" y1="10%" x2="0%" y2="80%">
      <stop offset="0%" style="stop-color:rgba(255,255,0,.65);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgba(255,0,0, .35);stop-opacity:1" />
    </linearGradient>
  </defs>
</svg>

<body>
  <script>
    
    var width = 500;
    var height = 600;
    var pad = 80;
    
    var scaleX = d3.scaleLinear()
    	.range([pad, width-pad])
    	.domain([2017,2032])

// Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").select("svg")
      .attr("width", width)
      .attr("height", height)

var data = [{"Year":2017,"pcnt25":20400,"pcnt75":20400}
              ,{"Year":2018,"pcnt25":24200,"pcnt75":28300}
              ,{"Year":2019,"pcnt25":26100,"pcnt75":35400}
              ,{"Year":2020,"pcnt25":29000,"pcnt75":42900}
              ,{"Year":2021,"pcnt25":30900,"pcnt75":50100}
              ,{"Year":2022,"pcnt25":33000,"pcnt75":58800}
              ,{"Year":2023,"pcnt25":35700,"pcnt75":67400}
              ,{"Year":2024,"pcnt25":37500,"pcnt75":75500}
              ,{"Year":2025,"pcnt25":39700,"pcnt75":84500}
              ,{"Year":2026,"pcnt25":42000,"pcnt75":92600}
              ,{"Year":2027,"pcnt25":44200,"pcnt75":99800}
              ,{"Year":2028,"pcnt25":46700,"pcnt75":106100}
              ,{"Year":2029,"pcnt25":49700,"pcnt75":112400}
              ,{"Year":2030,"pcnt25":49800,"pcnt75":116500}
              ,{"Year":2031,"pcnt25":48100,"pcnt75":118900}
              ,{"Year":2032,"pcnt25":46900,"pcnt75":121900}
              ]
    
   	var scaleY = d3.scaleLinear()
    	.range([pad, height-pad])
    	.domain([0,130000])
    
    
    var lineGen = d3.line()
    	.x((d)=>{return scaleX(d.Year)})
    	.y((d)=>{return scaleY(d.pcnt25)})
    
    var lineGen75 = d3.line()
    	.x((d)=>{return scaleX(d.Year)})
    	.y((d)=>{return scaleY(d.pcnt75)})
    
    
    var areaGen = d3.area()
    	.x((d)=>{return scaleX(d.Year)})
    	.y0((d)=>{return scaleY(d.pcnt25)})
    	.y1((d)=>{return scaleY(d.pcnt75)})
    
    
    var chart = svg.append('g')
    
    var rect = chart.append('rect')
    	.attr('x', pad)
    	.attr('y', pad)
    	.attr('width', width - pad*2)
    	.attr('height', height-pad*2)
    .style('opacity',.4)
    .style('opacity',.05)
    	.style('fill','white')
    
		var Xaxis_g = svg.append('g')
    	.attr('transform', 'translate(' + 0 + ',' + (pad)+')')
    	.call(d3.axisTop(scaleX))
    
		var Yaxis_g = svg.append('g')
    	.attr('transform', 'translate(' + pad + ',' + (0)+')')
    	.call(d3.axisLeft(scaleY))
    
    var path25 = chart.append('path')
    	.datum(data)
    	.attr('d', areaGen)
    	.style('fill','rgba(210,10,10,.5)')
	    .style('fill', 'url(#grad1)')
  
    var curShortage = chart.append('line')
    	.attr('x1', scaleX(2017))
    	.attr('x2', scaleX(2032))
    	.attr('y1', scaleY(data[0].pcnt25))
    	.attr('y2', scaleY(data[0].pcnt25))
    	.style('stroke','orange')
    	.style('stroke-dasharray', 4)
   		.style('stroke-width', '2px') 
    
    var ticklines = chart.selectAll('.ticklines')
    	.data(data)
    	
    ticklines.enter()
      .append('line')
      .attr('x1', (d)=>{return scaleX(d.Year)})
    	.attr('x2', (d)=>{return scaleX(d.Year)})
    	.attr('y1', (d)=>{return scaleY(d.pcnt25)})
    	.attr('y2', (d)=>{return scaleY(d.pcnt75)})
    	.style('stroke','rgb(240,240,230)')
    	.style('stroke-width','1px')
	    .style('opacity',.25)
    	.style('fill','none')
    
    var path25 = chart.append('path')
    	.datum(data)
    	.attr('d', lineGen)
    	.style('stroke','rgba(250,250,50,.5)')
    	.style('stroke-width','3px')
    	.style('fill','none')
    
    var path75 = chart.append('path')
    	.datum(data)
    	.attr('d', lineGen75)
    	.style('stroke','darkred')
    	.style('stroke-width','3px')
    	.style('fill','none')
    
    var shortageEnd = chart.append('line')
    	.datum(data.filter((d)=>{return d.Year == 2032;})[0])
    	.attr('x1', (d)=>{
        console.log(d);
        return scaleX(d.Year)})
    	.attr('x2', (d)=>{return scaleX(d.Year)})
    	.attr('y1', (d)=>{return scaleY(d.pcnt25)})
    	.attr('y2', (d)=>{return scaleY(d.pcnt75)})
    	.style('stroke','rgb(240,240,230)')
    	.style('stroke-width','2px')
    	.style('fill','none')
    
    	
    	
    
    	
    
  </script>
</body>

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