How I Created an Interactive, Scrolling Visualisation with D3.js, and how you can too
By: Cuthbert Chow
Tags: Design, Data Visualization, Data Science, Web Design, D3js

How I Created an Interactive, Scrolling Visualisation with D3.js, and how you can too

Bring your stories to life with interactive and scrollable visualisations, made possible with the brilliant D3.js library

College Majors separated by category

Animated Version

Motivation

The web is littered with stunning examples of scrolling and interactive visualisations, often built using D3. If you’ve ever read such feature pieces from Bloomberg or the New York Times, I’m sure you know what I’m talking about. Some of my favourite examples of this form are:

There’s something satisfying about the way in which the visual elements comport themselves after each scroll event, bending to your control. Often times, I have a huge smile on my face as I scroll up and down the page, watching all the shapes and colours fly around. It’s a sensation reminiscent of discovering the secrets held by the data on your own, which is what I believe makes these presentations so convincing. It also provides a much more commanding narrative flow, which would otherwise be lacking in more static pieces. Browsing through these articles, it may appear that such visualisations would be extremely complicated to produce on your own, and you may assume they are best left to the editors and writers of top-shelf publications. But I’m here to help dispel this notion: Anyone can make one, including you!

After reading through a bunch of online resources (I will leave a list of these at the end of the article), I decided to take a stab at creating one myself. As I’ve mentioned before, the best way of learning a new tool, technique, skill or ability is to put it to use, before you even know if you’re capable of doing that thing. And so that is exactly what I did over the course of a week.

(This article will assume you have some basic familiarity with D3.js and how it works)

Project Description

After browsing through a series of datasets, I settled on one which I found hosted on Kaggle, which originally came from the analytics blog Fivethirtyeight (if you’re looking for cool datasets, check out google’s dataset search tool). It was a (slightly outdated) dataset about college majors around the United States. It had information on the number enrolled in each college major, as well as the median, 75th percentile and 25th percentile salaries from those students. Interestingly, it also provided information on the male/female representation for each major, which I thought would be a good point of focus for the piece.

With the dataset decided, I started exploring the data using Python and Pandas in Jupyter notebooks, looking for any interesting trends or points I would want to emphasise in a visualisation. I also made rough, crude approximations of the graphs I would want to show in the final product.

A couple of the sketches I hastily threw together, just to roughly diagram the narrative flow I hoped to achieve

My general conception of the visualisation was that the college majors would each be represented by a bubble. The bubbles would then change form and colour based on the type of data I was trying to highlight (ie gender discrepancies, median salary, category grouping etc.). When the bubbles would be grouped in by specific attributes, I wanted to achieve this through a D3 force simulation, so that the bubbles would appear to be gravitating towards an unseen force.

A preview of the gender distribution vs median salary graph I made using matplotlib. I was exploring the data to see whether there were interesting trends to highlight, and this was one of the

After some exploration, I knew that I wanted to focus on the impact that gender distribution within a major has on the median salary of its graduates. I would strongly suggest that you take a deep dive into your data before starting any of the visualisation process, because you want to have some semblance of the interactions you have in mind before actually sitting down to code the final product.

If you want a really quick way of observing relationships between variables, the python visualisation package seaborn has a ‘pairplot()’ method to help you do just this, which creates a matrix of scatterplots between all of the variables in the dataframe passed to it.

#Plotting a scatter matrix import seaborn as sns factors = df[['Total', 'Major_category', 'ShareWomen', 'Sample_size', 'Employed', 'Unemployed', 'Median']] sns.pairplot(factors)

An example pairplot created from a subset of the data

Now we have a solid idea of the things we want to include, we are ready to start creating.