Learning Data Vis

I created this graphic for the annual census challenge by the Data Visualisation Society. Should you want to know more about this competition or see the entries for previous years, visit this page.

Date
January 4, 2021
Tools used
D3.js, Affinity Designer
Scroll Down

The Process

The design process for this visualisation presented multiple challenges. The very first challenge was the data itself. The DVS census is based on survey responses. Hence, the results for most of the questions with multiple choice answers came back in separate columns. For instance, the answer to the question "what technologies do you use to visualise data?", resulted in over thirty columns, one for each type of tool (e.g. Excel, ggplot, D3, etc.). It took me quite a while to coalesce these columns into an easy-to-use format (thanks Python!).

While I was cleaning the data, the editorial angle came together pretty naturally. I quickly decided to focus on data visualisation practitioners who learned the craft completely or at least partly on their own. As a self-taught designer myself, I'm always curious to hear what my peers have to say! I explored several data points for this group of respondents: favourite learning methods, number of hours of practice per week, the biggest frustrations and more. I eventually decided to focus on only their preferred learning methods and add an encoding on the number of years of experience each practitioner had.

Here came the design challenge: I wanted to create a packed-circle chart, inspired by this and this, but I just couldn't get it to look right. I tried using both RawGraphs and Flourish, but the outcome from each of these tools included strangely positioned bubbles that looked like they were trying to hypnotise the reader. At this stage, I nearly abandoned the project at least three times. Determined to give it one last shot, I turned to D3.js to create the bubbles. That took a bit of time as I'm still a beginner to D3, and especially to its force-driven algorithm. But I did manage to put the graphic together and it looked good! I exported the SVG file of what I had created into Affinity Designer for some polishing—defining the layout, adding annotations and some pop-out features. I usually do this in Figma Design, but had been wanting to learn another design tool for months, and the end of the year was the perfect time to do so!

Hover over the image