Nested Stacked Barchart : Indonesian Civil Cervants (2007-2012)

Why nested stacked barchart?

Long ago, after i learned how to use d3 stacked barchart, i attempted to use it to describe real life data of my country’s civil servants hierarchical structure.

And immediatelly realized the limitation of the standard d3 stacked barchart : it can only ‘divided’ itself once. In other words : it only capable of a single depth level structure.

While in real life  : data can be structured deeper than a single level.

I then googled the keyword ‘d3js nested stacked barchart’, and came to no satisfying result whatsoever, seems like everybody in the d3 community is using d3 stack layout or d3 hierarchical barchart to solve problems.

So, i decided to do the calculations myself, and after a lot of time and efforts, here is the result : a stacked barchart which have 2 levels of depth! Just play arround with the controls, and mouseover/touch the bar(s).

Choose Data :

Graph by :

Note : experimental, still not perfect.
The fullwidth version of this graph is here :

And the Indonesian version of fullwidth view here :

Normalized Stacked Barchart : Browser Usage Statistic

Normalized stacked barchart is similiar to ordinary stacked barchart, only that it displays data in percentage, instead of the usual bar-height-by-value.

This example shows browser usage statistic from 2002 – 2016 (sorry, no 2017 data just yet). The data is from w3schools.

Hover on bar segment(s) to display data, use the slider below to choose year data.

I found it easier to hover on the smaller bar segments if the view is wider/larger, as you can see at my original fullwidth sample, by clicking on the button below.

Stacked Barchart : Age Ranges of Indonesian Provinces

The application of stacked-to-grouped barchart technique example from here, applied to display age-ranges data of population of some provinces in Indonesia.

Hint : at first glance, this my looks like an ordinary bar chart, however, this is actually a stacked bar chart in a sneaky disguise! Just choose the ‘Gender’ option to see how it means….

Hover on bars to display data. Use the controls to choose province to view, to choose bars view by total (the ‘All’ option), or by gender (the ‘Gender’ option). While the ‘Gender’ option is active, you can use click on the ‘Male’ or ‘Female’ legend rectangle on the right to plot/choose a single gender. Use the ‘Sort’ checkbox to sort bars.

Note : please notice that this view may not display the correct, most recent data. This is only a demo of how the visualization using d3.js stacked-to-grouped barchart technique works, it is not meant to be a complete reference of Indonesian population data. (Aside from the fact that i've forgotten the link to the original source of the data.. 😀 )

My original, full-size graph can be found by clicking the button below :