Skip to content

Instantly share code, notes, and snippets.

@anbnyc

anbnyc/2012pres.csv

Created September 20, 2015 13:46
Show Gist options
  • Save anbnyc/b481bc1c4c93d20f13e2 to your computer and use it in GitHub Desktop.
Save anbnyc/b481bc1c4c93d20f13e2 to your computer and use it in GitHub Desktop.
Download ZIP
module 5 - scatterplot!
Raw
2012pres.csv
state obamaEv romneyEv netEv obamaPv romneyPv otherPv totalVote
AL 0 9 -9 795696 1255925 22717 2074338
AK 0 3 -3 122640 164676 13179 300495
AZ 0 11 -11 1025232 1233654 40368 2299254
AR 0 6 -6 394409 647744 27315 1069468
CA 55 0 55 7854285 4839958 344304 13038547
CO 9 0 9 1323102 1185243 61177 2569522
CT 7 0 7 905083 634892 18985 1558960
DE 3 0 3 242584 165484 5853 413921
DC 3 0 3 267070 21381 5313 293764
FL 29 0 29 4237756 4163447 72976 8474179
GA 0 16 -16 1773827 2078688 47535 3900050
HI 4 0 4 306658 121015 7024 434697
ID 0 4 -4 212787 420911 18576 652274
IL 20 0 20 3019512 2135216 87286 5242014
IN 0 11 -11 1152887 1420543 51104 2624534
IA 6 0 6 822544 730617 29019 1582180
KS 0 6 -6 440726 692634 26611 1159971
KY 0 8 -8 679370 1087190 30652 1797212
LA 0 8 -8 809141 1152262 32662 1994065
ME 4 0 4 401306 292276 19598 713180
MD 10 0 10 1677844 971869 57614 2707327
MA 11 0 11 1921290 1188314 58163 3167767
MI 16 0 16 2564569 2115256 51136 4730961
MN 10 0 10 1546167 1320225 70169 2936561
MS 0 6 -6 562949 710746 11889 1285584
MO 0 10 -10 1223796 1482440 51087 2757323
MT 0 3 -3 201839 267928 14281 484048
NE 0 5 -5 302081 475064 17234 794379
NV 6 0 6 531373 463567 19978 1014918
NH 4 0 4 369561 329918 11493 710972
NJ 14 0 14 2125101 1477568 37623 3640292
NM 5 0 5 415335 335788 32635 783758
NY 29 0 29 4485741 2490431 104987 7081159
NC 0 15 -15 2178391 2270395 56586 4505372
ND 0 3 -3 124827 188163 9637 322627
OH 18 0 18 2827709 2661437 91701 5580847
OK 0 7 -7 443547 891325 0 1334872
OR 7 0 7 970488 754175 64607 1789270
PA 20 0 20 2990274 2680434 82962 5753670
RI 4 0 4 279677 157204 9168 446049
SC 0 9 -9 865941 1071645 26532 1964118
SD 0 3 -3 145039 210610 8166 363815
TN 0 11 -11 960709 1462330 35538 2458577
TX 0 38 -38 3308124 4569843 115884 7993851
UT 0 6 -6 251813 740600 25027 1017440
VT 3 0 3 199239 92698 7353 299290
VA 13 0 13 1971820 1822522 60147 3854489
WA 12 0 12 1755396 1290670 79450 3125516
WV 0 5 -5 238269 417655 14514 670438
WI 10 0 10 1620985 1407966 39483 3068434
WY 0 3 -3 69286 170962 8813 249061
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 5 Scatterplot</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p,
form {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
circle:hover {
fill: orange;
}
text {
pointer-events: none;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>2012 Electoral Vote</h1>
<p>Net electoral votes vs. net popular vote for Obama (vs. Romney) in 2012 general election by state. Source: <a href="http://www.fec.gov/pubrec/fe2012/federalelections2012.shtml">FEC</a>, 2015</p>
<p>
<form name="xtoggle" action="">
<input type="radio" name="xcalc" value="pct">Percentage<br>
<input type="radio" name="xcalc" value="tot">Total
</form>
</p>
<script type="text/javascript">
var w = 800;
var h = 400;
var padding = [ 30, 20, 30, 40 ]; //Top, right, bottom, left
var yScale = d3.scale.linear()
.range([h - padding[2], padding[0]]);
var xScale = d3.scale.linear()
.range([padding[3], w - padding[1] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("top")
.ticks(15)
.tickFormat(function(d) {
return d*100 + "%";
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(15);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("2012pres.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.netEv, +b.netEv);
});
// TOGGLE w/o totalVote, use +/- 100,000
xScale.domain([ d3.min(data, function(d) {
return (d.obamaPv - d.romneyPv)/d.totalVote - .05;
}),
d3.max(data, function(d) {
return (d.obamaPv - d.romneyPv)/d.totalVote + .05;
})
]);
yScale.domain([ d3.min(data, function(d) {
return (d.obamaEv - d.romneyEv - 5);
}),
d3.max(data, function(d) {
return (d.obamaEv - d.romneyEv + 5);
})
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
// TOGGLE remote totalVote
circles.attr("cx", function(d){
return xScale((d.obamaPv - d.romneyPv)/d.totalVote);
})
.attr("cy", function(d) {
return yScale(d.obamaEv - d.romneyEv);
})
.attr("r", .5)
.attr("height", 8)
.attr("fill", function(d){
if(+d.netEv > 0){
return "blue";
} else {
return "red";
}
})
.append("title")
.text(function(d) {
return d.state;
});
circles.sort(function(a, b) {
return d3.ascending(+a.obamaPv, +b.obamaPv);
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1500)
.attr("r", 4);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment