forked from ginseng666's block: Slope Chart: Election Results, Lower Austria, 1995 vs. 2015
Last active
September 18, 2017 13:26
-
-
Save heillygalvez/5fea97c506cb8b9dea7a34a9391e6d51 to your computer and use it in GitHub Desktop.
Slope Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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