Instantly share code, notes, and snippets.

@mbostock

mbostock /.block

Forked from mbostock/.block

Last active October 12, 2024 05:42

Star (13) You must be signed in to star a gist
Fork (36) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/mbostock/3886208.js"></script>
Save mbostock/3886208 to your computer and use it in GitHub Desktop.

Clone this repository at <script src="https://gist.github.com/mbostock/3886208.js"></script>

Download ZIP

Stacked Bar Chart

Raw

.block

license: gpl-3.0

redirect: https://beta.observablehq.com/@mbostock/d3-stacked-bar-chart

Raw

README.md

This stacked 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:

d3-dsv - load and parse data
d3-scale - x- and y-position, and color encoding
d3-format - SI prefix formatting (e.g., "10M" for 10,000,000)
d3-array - compute simple statistics (e.g., max)
d3-axis - display axes
d3-shape - computed stacked positions

Raw

data.csv

State	Under 5 Years	5 to 13 Years	14 to 17 Years	18 to 24 Years	25 to 44 Years	45 to 64 Years	65 Years and Over
AL	310504	552339	259034	450818	1231572	1215966	641667
AK	52083	85640	42153	74257	198724	183159	50277
AZ	515910	828669	362642	601943	1804762	1523681	862573
AR	202070	343207	157204	264160	754420	727124	407205
CA	2704659	4499890	2159981	3853788	10604510	8819342	4114496
CO	358280	587154	261701	466194	1464939	1290094	511094
CT	211637	403658	196918	325110	916955	968967	478007
DE	59319	99496	47414	84464	230183	230528	121688
DC	36352	50439	25225	75569	193557	140043	70648
FL	1140516	1938695	925060	1607297	4782119	4746856	3187797
GA	740521	1250460	557860	919876	2846985	2389018	981024
HI	87207	134025	64011	124834	356237	331817	190067
ID	121746	201192	89702	147606	406247	375173	182150
IL	894368	1558919	725973	1311479	3596343	3239173	1575308
IN	443089	780199	361393	605863	1724528	1647881	813839
IA	201321	345409	165883	306398	750505	788485	444554
KS	202529	342134	155822	293114	728166	713663	366706
KY	284601	493536	229927	381394	1179637	1134283	565867
LA	310716	542341	254916	471275	1162463	1128771	540314
ME	71459	133656	69752	112682	331809	397911	199187
MD	371787	651923	316873	543470	1556225	1513754	679565
MA	383568	701752	341713	665879	1782449	1751508	871098
MI	625526	1179503	585169	974480	2628322	2706100	1304322
MN	358471	606802	289371	507289	1416063	1391878	650519
MS	220813	371502	174405	305964	764203	730133	371598
MO	399450	690476	331543	560463	1569626	1554812	805235
MT	61114	106088	53156	95232	236297	278241	137312
NE	132092	215265	99638	186657	457177	451756	240847
NV	199175	325650	142976	212379	769913	653357	296717
NH	75297	144235	73826	119114	345109	388250	169978
NJ	557421	1011656	478505	769321	2379649	2335168	1150941
NM	148323	241326	112801	203097	517154	501604	260051
NY	1208495	2141490	1058031	1999120	5355235	5120254	2607672
NC	652823	1097890	492964	883397	2575603	2380685	1139052
ND	41896	67358	33794	82629	154913	166615	94276
OH	743750	1340492	646135	1081734	3019147	3083815	1570837
OK	266547	438926	200562	369916	957085	918688	490637
OR	243483	424167	199925	338162	1044056	1036269	503998
PA	737462	1345341	679201	1203944	3157759	3414001	1910571
RI	60934	111408	56198	114502	277779	282321	147646
SC	303024	517803	245400	438147	1193112	1186019	596295
SD	58566	94438	45305	82869	196738	210178	116100
TN	416334	725948	336312	550612	1719433	1646623	819626
TX	2027307	3277946	1420518	2454721	7017731	5656528	2472223
UT	268916	413034	167685	329585	772024	538978	246202
VT	32635	62538	33757	61679	155419	188593	86649
VA	522672	887525	413004	768475	2203286	2033550	940577
WA	433119	750274	357782	610378	1850983	1762811	783877
WV	105435	189649	91074	157989	470749	514505	285067
WI	362277	640286	311849	553914	1487457	1522038	750146
WY	38253	60890	29314	53980	137338	147279	65614

Raw

index.html

<!DOCTYPE html>

<style>

.axis .domain {

display: none;

}

</style>

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])

.paddingInner(0.05)

.align(0.1);

var y = d3.scaleLinear()

.rangeRound([height, 0]);

var z = d3.scaleOrdinal()

.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

d3.csv("data.csv", function(d, i, columns) {

for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];

d.total = t;

return d;

}, function(error, data) {

if (error) throw error;

var keys = data.columns.slice(1);

data.sort(function(a, b) { return b.total - a.total; });

x.domain(data.map(function(d) { return d.State; }));

y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();

z.domain(keys);

g.append("g")

.selectAll("g")

.data(d3.stack().keys(keys)(data))

.enter().append("g")

.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.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")

.attr("transform", "translate(0," + height + ")")

.call(d3.axisBottom(x));

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; });

});

</script>

Raw

thumbnail.png

thumbnail.png

@jason69

jason69 commented Jul 30, 2013

Copy link

Copy Markdown

Hi,
how would you add a ZoomBehaviour on that graph? https://github.com/mbostock/d3/wiki/Zoom-Behavior
I can't achieve it yet...

@goodchild999

goodchild999 commented Feb 18, 2015

Copy link

Copy Markdown

Hello,

Chart looks amazing, could you possibly give a hint as to how to add data labels to each sub bar ?

Thank you so much !!

@rmat3

rmat3 commented Feb 18, 2016

Copy link

Copy Markdown

great work Mike!
I have a question. Consider there is one more dimension say region(north, south,east,west) in the data. How can I add a dropdown on the page and update chart on change in value of region?

@NeckbreakerPascal

NeckbreakerPascal commented Feb 22, 2016

Copy link

Copy Markdown

Hey Mike,
looks amazing and I really like the code.

Just one question because I like to use it for a project. Is there a chance for drawing a "vertical stroke" to the bars. For example if there would be some average value or something for that state.

Thank you in advance for your answer

@NatasaPeic

NatasaPeic commented Dec 16, 2016

Copy link

Copy Markdown

Thank you for this chart! I have been using it, and I have been struggling with colors.

I can't seem to find a way to change colors based on data values. I know how to do that for bar chart, but not for stacked bar chart. Any advice would be appreciated!

Thanks!

mbostock /.block

Select an option

No results found

Select an option

No results found

jason69 commented Jul 30, 2013

Uh oh!

goodchild999 commented Feb 18, 2015

Uh oh!

rmat3 commented Feb 18, 2016

Uh oh!

NeckbreakerPascal commented Feb 22, 2016

Uh oh!

NatasaPeic commented Dec 16, 2016

Uh oh!