This variation of a stacked bar chart shows percentages rather than absolute numbers.
forked from mbostock's block: Normalized Stacked Bar Chart
license: gpl-3.0 |
This variation of a stacked bar chart shows percentages rather than absolute numbers.
forked from mbostock's block: Normalized Stacked Bar Chart
State,Votos del NO,,Votos del SI | |
Anori,35,08%,64,92% | |
Dabeiba,35,31%,64,69% | |
Ituango,30,65%,69,35% | |
Remedios,65,27%,34,73% | |
Vigia del Fuerte,3,97%,96,03% | |
Cartagena del Chaira,26,24%,73,76% | |
La Montañita,25,78%,74,22% | |
San Vicente del Caguan,37,07%,62,93% | |
Buenos Aires,27,85%,72,15% | |
Caldono,20,16%,79,84% | |
Corinto,30,77%,69,23% | |
La Paz,42,27%,57,73% | |
Tierralta,30,24%,69,76% | |
Riosucio,9,06%,90,94% | |
Fonseca,27,78%,72,22% | |
Mesetas,37,93%,62,07% | |
La Macarena,26,33%,73,67% | |
Vista Hermosa,47,11%,52,89% | |
Policarpa,11,11%,88,89% | |
Tumaco,28,80%,71,20% | |
Tibu,33,97%,66,03% | |
Planadas,52,23%,47,77% | |
Villarrica,61,46%,38,54% | |
Arauquita,23,53%,76,47% | |
Puerto Asis,42,00%,58,00% | |
San Jose del Guaviare,52,64%,47,36% |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.bar { | |
fill: steelblue; | |
} | |
.axis path { | |
display: none; | |
} | |
</style> | |
<svg width="960" height="500"></svg> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script> | |
var svg = d3.select("svg"), | |
margin = {top: 20, right: 60, 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(["#ff2a00", "#0078ff", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
var stack = d3.stack() | |
.offset(d3.stackOffsetExpand); | |
d3.csv("data.csv", type, function(error, data) { | |
if (error) throw error; | |
data.sort(function(a, b) { return b[data.columns[1]] / b.total - a[data.columns[1]] / a.total; }); | |
x.domain(data.map(function(d) { return d.State; })); | |
z.domain(data.columns.slice(1)); | |
var serie = 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); }); | |
serie.selectAll("rect") | |
.data(function(d) { return d; }) | |
.enter().append("rect") | |
.attr("x", function(d) { return x(d.data.State); }) | |
.attr("y", function(d) { return y(d[1]); }) | |
.attr("height", function(d) { return y(d[0]) - y(d[1]); }) | |
.attr("width", x.bandwidth()); | |
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, "%")); | |
var legend = serie.append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d) { var d = d[d.length - 1]; return "translate(" + (x(d.data.State) + x.bandwidth()) + "," + ((y(d[0]) + y(d[1])) / 2) + ")"; }); | |
legend.append("line") | |
.attr("x1", -6) | |
.attr("x2", 6) | |
.attr("stroke", "#000"); | |
legend.append("text") | |
.attr("x", 9) | |
.attr("dy", "0.35em") | |
.attr("fill", "#000") | |
.style("font", "10px sans-serif") | |
.text(function(d) { return d.key; }); | |
}); | |
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; | |
} | |
</script> |