Skip to content

Instantly share code, notes, and snippets.

@SpaceActuary

SpaceActuary/.block

Last active August 15, 2022 15:01
Show Gist options
  • Save SpaceActuary/6233700e7f443b719855a227f4749ee5 to your computer and use it in GitHub Desktop.
Save SpaceActuary/6233700e7f443b719855a227f4749ee5 to your computer and use it in GitHub Desktop.
Download ZIP
Grouped Stacked Bar Chart
Raw
.block
license: gpl-3.0
Raw
README.md

This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

forked from mbostock's block: Grouped Bar Chart

Raw
data.csv
State AgeGroup Year Value
CA Under 5 Years 1990 2704659
CA Under 5 Years 2000 2677612
CA Under 5 Years 2010 2623519
CA 5 to 13 Years 1990 4499890
CA 5 to 13 Years 2000 5489866
CA 5 to 13 Years 2010 7469817
CA 14 to 17 Years 1990 2159981
CA 14 to 17 Years 2000 2635177
CA 14 to 17 Years 2010 3585568
CA 18 to 24 Years 1990 3853788
CA 18 to 24 Years 2000 4624546
CA 18 to 24 Years 2010 6166061
CA 25 to 44 Years 1990 10604510
CA 25 to 44 Years 2000 12513322
CA 25 to 44 Years 2010 16330945
CA 45 to 64 Years 1990 8819342
CA 45 to 64 Years 2000 7937408
CA 45 to 64 Years 2010 6173539
CA 65 Years and Over 1990 4114496
CA 65 Years and Over 2000 4443656
CA 65 Years and Over 2010 5101975
TX Under 5 Years 1990 2027307
TX Under 5 Years 2000 2290857
TX Under 5 Years 2010 2817957
TX 5 to 13 Years 1990 3277946
TX 5 to 13 Years 2000 2884592
TX 5 to 13 Years 2010 2097885
TX 14 to 17 Years 1990 1420518
TX 14 to 17 Years 2000 1434723
TX 14 to 17 Years 2010 1463134
TX 18 to 24 Years 1990 2454721
TX 18 to 24 Years 2000 2111060
TX 18 to 24 Years 2010 1423738
TX 25 to 44 Years 1990 7017731
TX 25 to 44 Years 2000 6666844
TX 25 to 44 Years 2010 5965071
TX 45 to 64 Years 1990 5656528
TX 45 to 64 Years 2000 7070660
TX 45 to 64 Years 2010 9898924
TX 65 Years and Over 1990 2472223
TX 65 Years and Over 2000 2472223
TX 65 Years and Over 2010 2472223
NY Under 5 Years 1990 1208495
NY Under 5 Years 2000 1087646
NY Under 5 Years 2010 845947
NY 5 to 13 Years 1990 2141490
NY 5 to 13 Years 2000 2655448
NY 5 to 13 Years 2010 3683363
NY 14 to 17 Years 1990 1058031
NY 14 to 17 Years 2000 1227316
NY 14 to 17 Years 2010 1565886
NY 18 to 24 Years 1990 1999120
NY 18 to 24 Years 2000 2159050
NY 18 to 24 Years 2010 2478909
NY 25 to 44 Years 1990 5355235
NY 25 to 44 Years 2000 5622997
NY 25 to 44 Years 2010 6158520
NY 45 to 64 Years 1990 5120254
NY 45 to 64 Years 2000 6349115
NY 45 to 64 Years 2010 8806837
NY 65 Years and Over 1990 2607672
NY 65 Years and Over 2000 2946669
NY 65 Years and Over 2010 3624664
FL Under 5 Years 1990 1140516
FL Under 5 Years 2000 1231757
FL Under 5 Years 2010 1414240
FL 5 to 13 Years 1990 1938695
FL 5 to 13 Years 2000 2287660
FL 5 to 13 Years 2010 2985590
FL 14 to 17 Years 1990 925060
FL 14 to 17 Years 2000 1063819
FL 14 to 17 Years 2010 1341337
FL 18 to 24 Years 1990 1607297
FL 18 to 24 Years 2000 1446567
FL 18 to 24 Years 2010 1125108
FL 25 to 44 Years 1990 4782119
FL 25 to 44 Years 2000 5977649
FL 25 to 44 Years 2010 8368708
FL 45 to 64 Years 1990 4746856
FL 45 to 64 Years 2000 4556982
FL 45 to 64 Years 2010 4177233
FL 65 Years and Over 1990 3187797
FL 65 Years and Over 2000 3857234
FL 65 Years and Over 2010 5196109
IL Under 5 Years 1990 894368
IL Under 5 Years 2000 912255
IL Under 5 Years 2010 948030
IL 5 to 13 Years 1990 1558919
IL 5 to 13 Years 2000 1808346
IL 5 to 13 Years 2010 2307200
IL 14 to 17 Years 1990 725973
IL 14 to 17 Years 2000 813090
IL 14 to 17 Years 2010 987323
IL 18 to 24 Years 1990 1311479
IL 18 to 24 Years 2000 1613119
IL 18 to 24 Years 2010 2216400
IL 25 to 44 Years 1990 3596343
IL 25 to 44 Years 2000 4351575
IL 25 to 44 Years 2010 5862039
IL 45 to 64 Years 1990 3239173
IL 45 to 64 Years 2000 2623730
IL 45 to 64 Years 2010 1392844
IL 65 Years and Over 1990 1575308
IL 65 Years and Over 2000 1811604
IL 65 Years and Over 2010 2284197
PA Under 5 Years 1990 737462
PA Under 5 Years 2000 781710
PA Under 5 Years 2010 870205
PA 5 to 13 Years 1990 1345341
PA 5 to 13 Years 2000 1641316
PA 5 to 13 Years 2010 2233266
PA 14 to 17 Years 1990 679201
PA 14 to 17 Years 2000 624865
PA 14 to 17 Years 2010 516193
PA 18 to 24 Years 1990 1203944
PA 18 to 24 Years 2000 1396575
PA 18 to 24 Years 2010 1781837
PA 25 to 44 Years 1990 3157759
PA 25 to 44 Years 2000 3220914
PA 25 to 44 Years 2010 3347225
PA 45 to 64 Years 1990 3414001
PA 45 to 64 Years 2000 3755401
PA 45 to 64 Years 2010 4438201
PA 65 Years and Over 1990 1910571
PA 65 Years and Over 2000 1872360
PA 65 Years and Over 2010 1795937
Raw
index.html
<!DOCTYPE html>
<style>
.axis .domain {
display: none;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
console.clear()
var svg = d3.select("svg"),
margin = {top: 40, right: 100, bottom: 60, left: 60},
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 x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1);
var x1 = d3.scaleBand()
.padding(0.05);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var y1 = d3.scaleBand()
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var stack = d3.stack()
.offset(d3.stackOffsetExpand);
d3.csv("data.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d){
d.Value = +d.Value;
})
console.log("data", data);
x0.domain(data.map(function(d) { return d.State; }));
x1.domain(data.map(function(d) { return d.Year; }))
.rangeRound([0, x0.bandwidth()])
.padding(0.2);
z.domain(data.map(function(d) { return d.AgeGroup; }))
var keys = z.domain()
var groupData = d3.nest()
.key(function(d) { return d.Year + d.State; })
.rollup(function(d, i){
var d2 = {Year: d[0].Year, State: d[0].State}
d.forEach(function(d){
d2[d.AgeGroup] = d.Value
})
console.log("rollup d", d, d2);
return d2;
})
.entries(data)
.map(function(d){ return d.value; });
console.log("groupData", groupData)
var stackData = stack
.keys(keys)(groupData)
console.log("stackData", stackData)
//y.domain([0, d3.max(data, function(d) { return d.Value; })]).nice();
console.log("keys", keys)
var serie = g.selectAll(".serie")
.data(stackData)
.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("class", "serie-rect")
.attr("transform", function(d) { return "translate(" + x0(d.data.State) + ",0)"; })
.attr("x", function(d) { return x1(d.data.Year); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", x1.bandwidth())
.on("click", function(d, i){ console.log("serie-rect click d", i, d); });
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
/*
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) { return d; });
*/
var legend = serie.append("g")
.attr("class", "legend")
.attr("transform", function(d) { var d = d[d.length - 1]; return "translate(" + (x0(d.data.State) + x1(d.data.Year) + x1.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; });
});
</script>
@derreck503
Copy link

This graph has mis-aligned x- axis tick labels when you don't have an even set if data.

Ex: If some states have 3 years of data and some have 4 years of data, the x axis labels are not centered.

@SpaceActuary
Copy link
Author

SpaceActuary commented Aug 16, 2019 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment