A Closer look at Occupations

small multiple bar charts in a circle pack layout

Scroll down for information

Details
Link:

A Closer look at Occupations – SVG version

A Closer look at Occupations – Canvas version

Created:

September 2015

Reason:

Wanted to test circle packing with a loosely small multipl idea

Tools:

R (data prep), D3.js (visual)

Data:

Bureau of Labor Statistics

Description

In “A Closer look at Occupations” you can investigate how the 146 million employed persons in 2014 were divided up between ~550 different occupations. The occupations are grouped and even subgrouped. Each grey colored circle encloses all occupations that fall under its umbrella name. Each white circle is finally an actual profession and further shows the age distribution within that occupation. You can click on any of the circles to zoom in or search for an occupation with the search box.

Creation

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” in a way.

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, there is Version 2.0 – Slow and completely in D3.js and Version 3.0 – Fast and almost entirely in Canvas.

For a blog about my canvas learnings while recreating this project please look here: Learnings from a D3.js addict on starting with Canvas.