Master D3.js for Data Visualization/

...

/

The Stack Function

The Stack Function

The ‘stack()’ function will help us with formatting our data so that we can draw a stacked bar chart.

We'll cover the following...

We are going to look at another D3 function for formatting our data. At the moment, our data is not ready to be drawn. That may sound weird because, at first glance, it looks properly formatted. Let’s check out the data file for a moment.

C++
name,<10,10-19,20-29,30-39,40-49,50-59,60-69,70-79,≥80
AL,598478,638789,661666,603013,625599,673864,548376,316598,174781
AK,106741,99926,120674,102008,91539,104569,70473,28422,12503
AZ,892083,912735,939804,857054,833290,834858,737884,466153,254716
AR,392177,397185,399698,372998,370157,395070,329734,197985,113468
CA,5038433,5170341,5809455,5354112,5179258,5042094,3737461,2011678,1311374
CO,690830,697447,780508,766382,705450,725661,563376,274466,155175
CT,399369,481065,462323,424890,496265,546361,400995,217827,159475
DE,112177,117854,127554,114063,117588,133331,110822,65369,35937
DC,74377,62783,136976,121520,80570,74779,56984,31362,19658
FL,2211012,2331102,2597830,2416176,2575576,2762983,2404659,1615547,1019566
GA,1363631,1421557,1418696,1357210,1404698,1337985,998253,528108,269182
HI,176484,163559,204336,187590,176904,188438,164957,85345,66060
ID,236658,239509,218684,209500,194678,205170,179429,97621,54234
IL,1619682,1715984,1789739,1721954,1697069,1773366,1326121,728821,478948
IN,863029,905594,905590,827086,844059,911778,704523,384788,243131
IA,401712,418667,419456,383638,370719,427554,344037,197223,143583
KS,401751,402092,406956,368732,344427,389834,300759,166104,117637
KY,555615,575866,593819,558201,580553,623164,495736,273961,155074
LA,622061,613633,683606,615411,571991,631936,488846,266123,152063
ME,137954,155774,156359,147695,176908,215787,179540,97899,62007
MD,741952,764730,815346,784097,815875,862778,636309,330736,208079
MA,737748,862371,971340,847306,916106,979128,737805,401931,288408
MI,1181424,1324071,1338179,1162186,1283122,1454462,1148131,619722,398303
MN,711604,714399,728222,715583,692201,782655,577313,312906,215985
MS,400288,421329,414195,374724,377165,400164,319443,181195,100689
MO,763948,792935,831725,763002,750989,857534,668878,388086,242554
MT,126020,126294,136346,125004,116502,149800,130977,70528,41920
NE,263518,257610,260646,244236,222479,250911,195705,107650,78504
NV,369362,360263,392834,390261,387272,373757,309651,173499,82273
NH,138762,167495,167554,151409,182703,217950,164287,84791,52552
NJ,1079136,1153625,1139927,1143452,1254602,1307263,946399,523620,367432
NM,276468,282662,289801,260579,244346,280363,239044,135013,74393
NY,2319945,2445591,2894266,2605355,2617327,2755620,2095207,1160055,804091
NC,1250298,1310398,1350242,1268976,1357746,1356117,1095320,609234,342497
ND,99477,91069,124509,94713,80327,98688,73825,41348,32206
OH,1422838,1530264,1535538,1398724,1490959,1677794,1320776,728158,481890
OK,534481,522282,552528,501392,469410,512850,404704,239887,138055
OR,474456,485345,538596,537767,507826,534421,490894,255809,157153
PA,1458931,1608018,1712448,1520409,1645291,1881378,1491536,850897,615069
RI,111377,136885,153674,126503,137892,156127,117653,63359,51021
SC,599591,619144,667523,596491,619792,663408,579856,322073,166727
SD,120366,113383,116748,105499,96288,117012,92824,50398,38540
TN,818404,842873,895337,837313,866343,904272,741045,414939,227483
TX,3983091,3910528,3946447,3770534,3545746,3344930,2431494,1291486,732179
UT,513515,479126,465219,436010,328569,301596,230007,123674,70711
VT,63768,79351,81765,70092,79982,99521,82136,42978,26656
VA,1033629,1065461,1170634,1112111,1134928,1162028,881763,475141,274606
WA,895790,882812,1004428,970613,921205,970407,784208,401094,242589
WV,207017,218547,232027,220494,238218,269346,243108,138134,79201
WI,705648,755224,760961,714479,732280,848672,645015,350772,241747
WY,78217,75535,82898,76912,68464,81018,67484,32819,19682
PR,389428,479749,480184,441842,456009,452503,411924,268783,148963

There are a total of 53 rows in this file. The first row contains the column names. The other 52 rows are states in the US, including Washington DC and Puerto Rico. In addition, there are nine age groups.

Our goal is to draw a stacked bar chart. We should have a total of 468 bars drawn on the chart because 52 multiplied by 9 is 468. Keep in mind; we need to draw each age group for each state because the bars in a bar chart represent one value. However, there is a problem with this file.

There are only 52 rows. This will mean when we join the data with an empty selection, the data will only be looped through 52 times. That will not be enough to draw the bars. Therefore, we will need to format our data differently if we want to draw every piece of data.

D3 comes with a function for formatting your data in a situation like this. Before proceeding, be sure to remove the console statement for the dataset variable. We do not need it anymore.

Stack generator

Under the scales section in the draw() function, ...