A custom chart attempts to visualize how people react on a facebook topic question. The question asked is : wether or not a web developer should has a very strong understanding about CSS.
The ‘barchart’ part on the left are people who answered, categorized by their ‘stances’, i.e : some really agree, some agree, one disagree, etc. The bubble section on the right visualize people reaction. You can click rightmost legend circle on the right to figure out how many ‘likes’, etc.
Barchart has tooltip when touched/hovered with mouse. ‘Search Participants’ is self-explainatory.
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).
Note : experimental, still not perfect.
The fullwidth version of this graph is here :
And the Indonesian version of fullwidth view here :
Pyramid bar chart displaying side-by-side comparison of age-ranges within genders of population of some provinces in Indonesia. This is an alternate view of my previous work here.
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. Use the checkbox to sort bars.
Note : please notice that this view may not display the correct, up-to-date data. This is only a demo of how the visualization using d3.js pyramid chart works, it is not meant to be a complete reference of Indonesian population data. (Aside from the fact that i've forgotten the source of the data.. 😀 )
My original, fullwidth view of this graph can be found by clicking the button below.