Recently, I saw this cartoon strip on my Facebook feed from an account called “Homes”. It was sort of funny and true. But beyond that, I couldn’t help but think how much effort would it take to make this into a completely data-driven visualization?
Don’t get me wrong, I’m a hobby artist (which you probably already know from visiting my site) and I can easily draw this and more merely by my bare hand, but I wasn’t interested in that this time…I’m more curious about the geeky challenge. So, I extracted the characters’ graphics so I can use them as image elements on my chart. Then I got to arranging the underlying data. I ended up creating two versions of the visualization.
The first one is quickest way, but the second one is more like the layout of the cartoon and required more tweaking but I was resolved to see it through. So, enjoy the visualizations below and I will describe the steps briefly as well as demonstrate the final chart’s interactivity with a clip.
The dataset should minimally consist three columns: YOUNG, ADULT, OLD; and three rows: TIME, MONEY, ENERGY. I assigned them values for each column. We see that Time is a full bar for YOUNG, and OLD, whereas smaller values are: Money for YOUNG, Time for ADULT, and Energy for OLD. For larger values I assign them 90 to 100. And for smaller values, I assigned 10.
The first, quickest version is a stacked bar chart in Excel and it looks like this:
However, this looks more like a technical chart than the cartoon image, and I want to create a chart that resembles that much more. In order to do that, I still used a stacked bar with with some preparation of data and tweaking of the chart. For example, it requires another column to bring the bars length to a fixed length (let’s call in max) and to show a filled amount inside that outside bar, we need to have two series: one for the assigned values and another for the max column. Then we need to chart them in different axes: one on primary, another on secondary and overlap them completely so they’re not stacked end-to-end, rather place one bar one inside the other. For each of the personas, we will need that bar chart with two series. If we can do this for one persona, we can do this for the rest and group the charts to make the final chart. And below is the final chart depicting just that.
This is much better! It has the cartoony, non-techy feel and yet is completely data-driven and interactive. We can now edit the underlying data values to anything and for any purpose we like and the visualization will update accordingly. This is demonstrated in the clip below.
They key is to understand the primary versus secondary axis, setting the series colors correctly to simulate the fill within the bars; limiting the max range to a fixed amount across personas, and overlapping the series. Rest involves image placement with transparency, adding thick borders to bars to match the cartoon’s theme and so on.
I hope you found this post helpful and interesting. Explore this site for more tips and articles. Be sure to also check out my Patreon site where you can find free downloads and optional fee-based code and documentation. Thanks for visiting!
