Slope Chart

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

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Election Results, Lower Austria, 1995 vs. 2015</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

line
{
stroke:black;
}

.heading
{
font-size:14pt;
fill:steelblue;
}

label
{
color:steelblue;
font-size:14pt;
padding:0.2em;
}

label.checked
{
background-color:#efefef;
}
</style>

</head>

d3.csv("data.csv", function(data)
{
for (i=0;i<data.length;i++)
{
data[i].co2_05=+data[i].mtpc_05; 
data[i].co2_13=+data[i].mtpc_13;
data[i].idname=data[i].name.replace(/[\.,\s+]/g, ''); //to avoid spaces and dots in the class of the element for proper selection
}

svg
  .append("text")
  .attr("x", 200)
  .attr("y",20)
  .attr("text-anchor", "end")
  .attr("class","heading")
  .text("2005");
  
svg
  .append("text")
  .attr("x", 500)
  .attr("y",20)
  .attr("text-anchor", "start")
  .attr("class","heading")
  .text("2015");

datastore=data; //somehow the data-variable is undefined in the draw-function below, not sure why
pos=(height-30)/datastore.length; //fixed multiplier for the y-positions (might be easier done with d3.axis)

datastore.sort(function(a,b){return d3.descending(a.co2_05,b.co2_13);}) //make the left side
res95=svg.selectAll(".res95").data(datastore).enter().append("text");
res95
  .attr("x",200)
  .attr("y",function(d,i){d.pos95=45+i*pos; return 50+i*pos;})
  .attr("text-anchor","end")
  .text(function(d){return d.name+": "+d.co2_05;})
  .attr("class",function(d){return d.idname;})
  .on("mouseover",function(){d3.selectAll("text."+this.className.baseVal)
  .style("font-weight","bold")
  .style("fill","red"); 
  d3.selectAll("line."+this.className.baseVal).style("stroke","red");})
  .on("mouseout",function(){d3.selectAll("text."+this.className.baseVal)
  .style("font-weight","normal")
  .style("fill","black");
  d3.selectAll("line."+this.className.baseVal).style("stroke","black");}); //different selection for text and line, because changing the stroke-value would also affect the text

datastore.sort(function(a,b){return d3.descending(a.co2_05,b.co2_13);}) //make the right side
res15=svg.selectAll(".res15").data(datastore).enter().append("text");
res15
  .attr("x",500)
  .attr("y",function(d,i){d.pos15=45+i*pos; return 50+i*pos;})
  .attr("text-anchor","start")
  .text(function(d){return d.name+": "+d.co2_13;})
  .attr("class",function(d){return d.idname;})
  .on("mouseover",function(){d3.selectAll("text."+this.className.baseVal)
  .style("font-weight","bold")
  .style("fill","red"); 
  d3.selectAll("line."+this.className.baseVal).style("stroke","red");})
  .on("mouseout",function(){d3.selectAll("text."+this.className.baseVal)
  .style("font-weight","normal")
  .style("fill","black");
  d3.selectAll("line."+this.className.baseVal).style("stroke","black");});

line=svg.selectAll("line").data(datastore).enter().append("line");  //draw a line between left and right
line
  .attr("x1",210)
  .attr("x2",490)
  .attr("y1",function(d,i){return d.pos95;})
  .attr("y2",function(d){return d.pos15;})
  .attr("class",function(d){return d.idname;});
});
</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js