Skip to content

Instantly share code, notes, and snippets.

@anbnyc

anbnyc/2012pres.csv

Last active September 14, 2015 01:44
Show Gist options
  • Save anbnyc/b52a946ec26341cb3fb3 to your computer and use it in GitHub Desktop.
Save anbnyc/b52a946ec26341cb3fb3 to your computer and use it in GitHub Desktop.
Download ZIP
module 4 - cleaner and improved bar graph!
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 4 Bar Graph</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 {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
rect:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<h1>2012 Electoral Vote</h1>
<p>Electoral votes won by Obama and Romney in 2012 general election by state. Source: <a href="http://www.fec.gov/pubrec/fe2012/federalelections2012.shtml">FEC</a>, 2015</p>
<script type="text/javascript">
var w = 800;
var h = 600;
var padding = [ 30, 20, 30, 40 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ padding[3], (55/93)*w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("top");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
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);
});
widthScale.domain([ d3.min(data, function(d) {
return Math.abs(+d.netEv);
}),
d3.max(data, function(d) {
return +d.netEv;
})
]);
heightScale.domain(data.map(function(d) { return d.state; } ));
//calculates "midpoint" for scales to start at
var minw = d3.min(data, function(d) {
return +d.netEv;
});
var maxw = d3.max(data, function(d) {
return +d.netEv;
});
var fracw = Math.abs(minw)/(maxw - minw);
//console.log(fracw);
var rect = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rect.attr("x", function(d){
if(+d.netEv > 0){
return fracw*w;
} else {
return fracw*w - widthScale(Math.abs(+d.netEv)) - (padding[3]-5);
}
})
.attr("y", function(d) {
return heightScale(d.state);
})
.attr("width", function(d) {
return widthScale(Math.abs(+d.netEv));
})
.attr("height", 8)
.style("fill", function(d){
if(+d.netEv > 0){
return "blue";
} else {
return "red";
}
})
.append("title")
.text(function(d) {
if(+d.netEv > 0){
return d.state + " gave Obama " + d.obamaEv + " electoral votes in 2012";
} else {
return d.state + " gave Romney " + d.romneyEv + " electoral votes in 2012";
}
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + fracw*w + "," + (padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + fracw*w + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment