SMALL MULTIPLES IN A PACKING LAYOUT
Wanted to test circle packing with a loosely small multipl idea
R (data prep), D3.js (visual)
A small project where I wanted to try my hands on the circle packing layout and try to add an extra dimension by placing bar charts in each circle. Thus creating the idea of small multiple packing, I guess.
The data shows the ~550 different occupations as defined by the Bureau of Labor Statistics in their hierarchical groupings. Each white circle represents an occupation and these circles are scaled according to the total number of persons working in this sector. Within each circle there is a bar chart further detailing the division between age groups.
Although usually you explicitly do not color each bar of a bar chart with a different color, here I did this on purpose. When you are looking at a higher level of occupations, say the ‘Business & Financial Operations’ group you can see several bar charts. By making all of the bars a different color it becomes easier to compare widths of a certain age group over the entire view. In the ‘Food preparation & serving’ group, for example, the ‘Cooks’ show a more normal-like distribution, whereas the Waiters/Waitresses are focused towards the younger ages.
November 2015: After two months I was frustrated enough with the horrible performance in D3.js, due to their being almost 13000 DOM elements. Therefore, I started to learn canvas by using this project. About 25 hours later I can now present you with a version that is super fast, both on desktop and mobile. For comparison, here are the two versions (version 2.0 is still in D3, but I first tried to implement other things to get better performance, such as only scaling DOM elements in view. However, that wasn’t enough of an improvement)
For a blog about my canvas learnings while recreating this project please look here: Learnings from a D3.js addict on starting with Canvas
You can get two different prints based on the results of this project in my store