mforando/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>
	<!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>