Slope Chart

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

forked from heillygalvez's block: Slope Chart

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

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>

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