D3 Examples - Slope Chart

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