Skip to content

Instantly share code, notes, and snippets.

@Garfeild

Garfeild/README.md

Forked from mbostock/.block
Last active December 18, 2015 11:29
Show Gist options
  • Save Garfeild/5775622 to your computer and use it in GitHub Desktop.
Save Garfeild/5775622 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

This variation of a stacked bar chart shows percentages rather than absolute numbers.

Raw
data.csv
State Category 1 Category 2 Category 3 Category 4 Category 5 Category 6 Category 7
01 310504 552339 259034 450818 1231572 1215966 641667
02 52083 85640 42153 74257 198724 183159 50277
03 515910 828669 362642 601943 1804762 1523681 862573
04 202070 343207 157204 264160 754420 727124 407205
05 2704659 4499890 2159981 3853788 10604510 8819342 4114496
06 358280 587154 261701 466194 1464939 1290094 511094
07 211637 403658 196918 325110 916955 968967 478007
08 59319 99496 47414 84464 230183 230528 121688
09 36352 50439 25225 75569 193557 140043 70648
10 1140516 1938695 925060 1607297 4782119 4746856 3187797
11 740521 1250460 557860 919876 2846985 2389018 981024
12 87207 134025 64011 124834 356237 331817 190067
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
.legend line {
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 100, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal().range(["#d83939", "#dc6823", "#e8be29", "#b1b103", "#778e36", "#219f79", "#0b89c8", "#0060a3", "#3f435f", "#6a60a3"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".0%"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
console.log("Total: " + d.ages[d.ages.length - 1].y1 + " | "+y0);
d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
});
// data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; });
x.domain(data.map(function(d) { return d.State; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "state")
.attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
state.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
var legend = svg.select(".state:last-child").selectAll(".legend")
.data(function(d) { return d.ages; })
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d) { return "translate(" + x.rangeBand() / 2 + "," + y((d.y0 + d.y1) / 2) + ")"; });
legend.append("line")
.attr("x2", 10);
legend.append("text")
.attr("x", 13)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment