Created
November 7, 2016 02:45
-
-
Save leodomingo/88346d2662b2f7c75bcf19ef49cb8534 to your computer and use it in GitHub Desktop.
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
candidate | Hillary Clinton | Donald Trump | Gary Johnson | Jill Stein | Other | Don't know | Won't vote. | |
---|---|---|---|---|---|---|---|---|
Jane Dittmar | .9061 | .021 | .0101 | .0204 | 0 | .0325 | 0 | |
Tom Garrett | .2137 | .1739 | .264 | .0245 | .1185 | .2053 | 0 | |
Unsure | .5761 | .026 | .1658 | 0 | 0 | .182 | .0501 |
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> | |
<meta charset="utf-8"> | |
<style> | |
.bar { | |
fill: steelblue; | |
} | |
.axis path { | |
display: none; | |
} | |
</style> | |
<svg width="800" height="700"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var svg = d3.select("svg"), | |
margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = +svg.attr("width") - margin.left - margin.right, | |
height = +svg.attr("height") - margin.top - margin.bottom, | |
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var x = d3.scaleBand() | |
.rangeRound([0, width]) | |
.padding(0.1) | |
.align(0.1); | |
var y = d3.scaleLinear() | |
.rangeRound([height, 0]); | |
var z = d3.scaleOrdinal() | |
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
var stack = d3.stack(); | |
d3.csv("downballot.csv", type, function(error, data) { | |
if (error) throw error; | |
data.sort(function(a, b) { return b.total - a.total; }); | |
x.domain(data.map(function(d) { return d.candidate; })); | |
y.domain([0, d3.max(data, function(d) { return d.total; })]).nice(); | |
z.domain(data.columns.slice(1)); | |
g.selectAll(".serie") | |
.data(stack.keys(data.columns.slice(1))(data)) | |
.enter().append("g") | |
.attr("class", "serie") | |
.attr("fill", function(d) { return z(d.key); }) | |
.selectAll("rect") | |
.data(function(d) { return d; }) | |
.enter().append("rect") | |
.attr("x", function(d) { return x(d.data.candidate); }) | |
.attr("y", function(d) { return y(d[1]); }) | |
.attr("height", function(d) { return y(d[0]) - y(d[1]); }) | |
.attr("width", x.bandwidth()*0.75); | |
g.append("g") | |
.attr("class", "axis axis--x") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(x)); | |
g.append("g") | |
.attr("class", "axis axis--y") | |
.call(d3.axisLeft(y).ticks(10, "s")) | |
.append("text") | |
.attr("x", 2) | |
.attr("y", y(y.ticks(10).pop())) | |
.attr("dy", "0.35em") | |
.attr("text-anchor", "start") | |
.attr("fill", "#000") | |
var legend = g.selectAll(".legend") | |
.data(data.columns.slice(1).reverse()) | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }) | |
.style("font", "10px sans-serif"); | |
legend.append("rect") | |
.attr("x", width - 18) | |
.attr("width", 18) | |
.attr("height", 18) | |
.attr("fill", z); | |
legend.append("text") | |
.attr("x", width - 24) | |
.attr("y", 9) | |
.attr("dy", ".35em") | |
.attr("text-anchor", "end") | |
.text(function(d) { return d; }); | |
}); | |
function type(d, i, columns) { | |
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]]; | |
d.total = t; | |
return d; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment