Learning Data Visualisation
Data Visualisation Society
D3.js, Affinity Designer
What is your favourite method of learning data visualisation? In this graphic we created for the annual census challenge by the Data Visualisation Society, the community gives us their answers.
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 we were cleaning the data, the editorial angle came together pretty naturally. We quickly decided to focus on data visualisation practitioners who learned the craft completely or at least partly on their own. As self-taught designers ourselves, we're always curious to hear what our peers have to say! We explored several data points for this group of respondents: favourite learning methods, number of hours of practice per week, the biggest frustrations and more. We 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: we wanted to create a packed-circle chart, inspired by this and this, but we just couldn't get it to look right. We tried using both RawGraphs and Flourish, but the outcome from each of these tools was oddly positioned bubbles that looked like they were trying to hypnotise the reader. At this stage, we nearly abandoned the project at least three times. Determined to give it one last shot, we turned to D3.js to create the bubbles. That took a bit of time as we're not proficient in D3, and especially in its force-driven algorithm. But we did manage to put the graphic together and it looked good! We exported the SVG file into Affinity Designer for some polishing—defining the layout, adding annotations and some pop-out features.