Rabscuttler/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    forked from ginseng666's block: Slope Chart: Election Results, Lower Austria, 1995 vs. 2015
forked from heillygalvez's block: Slope Chart
forked from dldx's block: Slope Chart

  
## data.csv

          
            Model
            %_cheaper_2018
            %_cheaper_2030
            alpha-3

            
              Australia
              0.3719769673704415
              0.7189746289610911
              AUS

            
              China
              0.3201123473906991
              0.9995584988962471
              CHN

            
              EU
              0.20371732254924674
              1.0

            
              India
              0.6154842206969567
              0.9997475632844822
              IND

            
              Indonesia
              0.0
              0.7304239323665715
              IDN

            
              Japan
              0.0
              1.0
              JPN

            
              Philippines
              0.0
              0.46
              PHL

            
              Russia
              0.0
              0.10105423768592994
              RUS

            
              South Africa
              0.1273793728017523
              0.85
              ZAF

            
              South Korea
              0.0
              0.9937535250193924
              KOR

            
              Turkey
              0.0
              1.0
              TUR

            
              Ukraine
              0.0
              1.0
              UKR

            
              United States
              0.70438108128131
              1.0
              USA

            
              Vietnam
              0.0
              0.40
              VNM

## index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Election Results, Lower Austria, 1995 vs. 2015</title>
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>

<style>

text {
font-size:10pt;
  font-family: "Futura Md BT", sans;
}


</style>

</head>

<body>
<div id="switch"></div>
<div id="chart"></div>

<script type="text/javascript">
var margin = {top: 50, right: 20, bottom: 50, left: 40},
    width = 960 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;


var svg=d3.select("#chart").append("svg").attr("width",width).attr("height",height);


d3.csv("data.csv").then(data => {


  data = data.map(d => ({
  "Model":d.Model,
	"2018": +d["%_cheaper_2018"]*100,
	"2030": +d["%_cheaper_2030"]*100}))


  var yScale = d3.scaleLinear()
								.domain([0,100])
								.range([height-margin.bottom-margin.top, 0])

  var ordinalScale = d3.scaleOrdinal()
  .range(d3.schemeCategory10)

 yAxis = d3.axisRight(yScale)

svg.append("rect")
.attr("x", 200)
.attr("y", 50)
.attr("width", 500-200)
.attr("height", height-margin.bottom - margin.top + 25*2)
.style("fill", "#f9f9f9")

svg
  .append("text")
  .attr("x", 200)
  .attr("y",45)
  .attr("text-anchor", "start")
  .attr("class","heading")
  .text("2018")
.style("font-family", "Futura Md BT")
.style("font-weight", "bold");

svg
  .append("text")
  .attr("x", 500)
  .attr("y",45)
  .attr("text-anchor", "end")
  .attr("class","heading")
  .text("2030").style("font-family", "Futura Md BT")
.style("font-weight", "bold")


svg
  .append("text")
  .attr("x", (width - margin.left - margin.right)/2)
  .attr("y",0)
  .attr("text-anchor", "middle")
.style("alignment-baseline", "hanging")
  .attr("class","heading")
  .text("% of country's total coal capacity with lower running cost than new renewables").style("font-family", "Futura Md BT")
.style("font-weight", "bold");

group_countries = svg.append("g")
	.attr("transform", "translate(0, 70)")


group_country = group_countries
  .selectAll(".country")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "country")
.style("fill", d => ordinalScale(d.Model))


	group_country
    .append("circle")
    .attr("r", 5)
  	.attr("cx", 200)
  .attr("cy", d => yScale(d["2018"]))


  group_country
  .append("text")
   	.attr("x", 200)
  .attr("y", d => yScale(d["2018"]))
	.text(d => `${d["Model"]} ${d3.format(".0f")(d["2018"])}%`)
  .attr("dx", -10)
  .style("text-anchor", "end")
  .style("alignment-baseline", "middle")
  .style("font-family", "Futura Md BT");

	group_country
    .append("circle")
  .attr("cx", 500)
  .attr("cy", d => yScale(d["2030"]))
    .attr("r", 5)

  group_country
    .append("text")
  	.attr("x", 500)
  .attr("y", d => yScale(d["2030"]))
  .text(d => `${d3.format(".0f")(d["2030"])}% ${d["Model"]}`)
  .attr("dx", 10)
  .style("alignment-baseline", "middle")
  .style("font-family", "Futura Md BT");

  group_country
  	.append("line")
  	.attr("x1", 200)
  .attr("x2", 500)
  .attr("y1", d => yScale(d["2018"]))
  .attr("y2", d => yScale(d["2030"]))
  .style("stroke-width", 3)
  .style("stroke", d => ordinalScale(d.Model))

})
</script>
</body>
</html>
Model	%_cheaper_2018	%_cheaper_2030	alpha-3
Australia	0.3719769673704415	0.7189746289610911	AUS
China	0.3201123473906991	0.9995584988962471	CHN
EU	0.20371732254924674	1.0
India	0.6154842206969567	0.9997475632844822	IND
Indonesia	0.0	0.7304239323665715	IDN
Japan	0.0	1.0	JPN
Philippines	0.0	0.46	PHL
Russia	0.0	0.10105423768592994	RUS
South Africa	0.1273793728017523	0.85	ZAF
South Korea	0.0	0.9937535250193924	KOR
Turkey	0.0	1.0	TUR
Ukraine	0.0	1.0	UKR
United States	0.70438108128131	1.0	USA
Vietnam	0.0	0.40	VNM
	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<title>Election Results, Lower Austria, 1995 vs. 2015</title>
	<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>

	<style>

	text {
	font-size:10pt;
	font-family: "Futura Md BT", sans;
	}



	</style>

	</head>

	<body>
	<div id="switch"></div>
	<div id="chart"></div>

	<script type="text/javascript">
	var margin = {top: 50, right: 20, bottom: 50, left: 40},
	width = 960 - margin.left - margin.right,
	height = 600 - margin.top - margin.bottom;



	var svg=d3.select("#chart").append("svg").attr("width",width).attr("height",height);





	d3.csv("data.csv").then(data => {



	data = data.map(d => ({
	"Model":d.Model,
	"2018": +d["%_cheaper_2018"]*100,
	"2030": +d["%_cheaper_2030"]*100}))


	var yScale = d3.scaleLinear()
	.domain([0,100])
	.range([height-margin.bottom-margin.top, 0])

	var ordinalScale = d3.scaleOrdinal()
	.range(d3.schemeCategory10)

	yAxis = d3.axisRight(yScale)

	svg.append("rect")
	.attr("x", 200)
	.attr("y", 50)
	.attr("width", 500-200)
	.attr("height", height-margin.bottom - margin.top + 25*2)
	.style("fill", "#f9f9f9")

	svg
	.append("text")
	.attr("x", 200)
	.attr("y",45)
	.attr("text-anchor", "start")
	.attr("class","heading")
	.text("2018")
	.style("font-family", "Futura Md BT")
	.style("font-weight", "bold");

	svg
	.append("text")
	.attr("x", 500)
	.attr("y",45)
	.attr("text-anchor", "end")
	.attr("class","heading")
	.text("2030").style("font-family", "Futura Md BT")
	.style("font-weight", "bold")


	svg
	.append("text")
	.attr("x", (width - margin.left - margin.right)/2)
	.attr("y",0)
	.attr("text-anchor", "middle")
	.style("alignment-baseline", "hanging")
	.attr("class","heading")
	.text("% of country's total coal capacity with lower running cost than new renewables").style("font-family", "Futura Md BT")
	.style("font-weight", "bold");

	group_countries = svg.append("g")
	.attr("transform", "translate(0, 70)")


	group_country = group_countries
	.selectAll(".country")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "country")
	.style("fill", d => ordinalScale(d.Model))


	group_country
	.append("circle")
	.attr("r", 5)
	.attr("cx", 200)
	.attr("cy", d => yScale(d["2018"]))


	group_country
	.append("text")
	.attr("x", 200)
	.attr("y", d => yScale(d["2018"]))
	.text(d => `${d["Model"]} ${d3.format(".0f")(d["2018"])}%`)
	.attr("dx", -10)
	.style("text-anchor", "end")
	.style("alignment-baseline", "middle")
	.style("font-family", "Futura Md BT");

	group_country
	.append("circle")
	.attr("cx", 500)
	.attr("cy", d => yScale(d["2030"]))
	.attr("r", 5)

	group_country
	.append("text")
	.attr("x", 500)
	.attr("y", d => yScale(d["2030"]))
	.text(d => `${d3.format(".0f")(d["2030"])}% ${d["Model"]}`)
	.attr("dx", 10)
	.style("alignment-baseline", "middle")
	.style("font-family", "Futura Md BT");

	group_country
	.append("line")
	.attr("x1", 200)
	.attr("x2", 500)
	.attr("y1", d => yScale(d["2018"]))
	.attr("y2", d => yScale(d["2030"]))
	.style("stroke-width", 3)
	.style("stroke", d => ordinalScale(d.Model))

	})
	</script>
	</body>
	</html>