Skip to content

Instantly share code, notes, and snippets.

@heillygalvez
Last active September 18, 2017 13:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save heillygalvez/5fea97c506cb8b9dea7a34a9391e6d51 to your computer and use it in GitHub Desktop.
Save heillygalvez/5fea97c506cb8b9dea7a34a9391e6d51 to your computer and use it in GitHub Desktop.
Slope Chart
license: mit
name 2005 MMT 2013 MMT 2005 POP 2013 POP mtpc_05 mtpc_13 PC
WY 43.3 46.2 z509,294 582,658 85.02 79.29 -6.737097952
ND 31.6 28.7 636,677 723,393 49.63 39.67 -20.06450413
WV 85.1 68.7 1,816,856 1,854,304 46.84 37.05 -20.90177292
KY 92 86 4,173,405 4,395,295 22.04 19.57 -11.24085157
MT 19.2 16.4 935,670 1,015,165 20.52 16.16 -21.27209616
IN 122 98 6,271,973 6,570,902 19.45 14.91 -23.32647411
NE 21.3 26 1,758,787 1,868,516 12.11 13.91 14.89739185
NM 32.1 28.2 1,928,384 2,085,287 16.65 13.52 -18.7596549
AL 81.3 64.2 4,557,808 4,833,722 17.84 13.28 -25.54071879
MO 78.1 75.8 5,800,310 6,044,171 13.46 12.54 -6.860771931
UT 35.8 34.9 2,469,585 2,900,872 14.50 12.03 -17.00769765
AR 25.3 35.5 2,779,154 2,959,373 9.10 12.00 31.77127178
OK 49.3 44.2 3,547,884 3,850,568 13.90 11.48 -17.39240763
KS 37 32 2,744,687 2,893,957 13.48 11.06 -17.97447746
<!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>
<style>
text
{
font-size:10pt;
}
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>
<body>
<div id="switch"></div>
<div id="chart"></div>
<script type="text/javascript">
var width=800;
var height=700;
var data, datastore, res95, res15, pos, line;
var svg=d3.select("#chart").append("svg").attr("width",width).attr("height",height);
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment