Every Tuesday in April: Free Intro to Python Training Series for Business Professionals Register Now

Exploring Data Viz Possibilities with D3.js

By Emily Wilson • August 01, 2016

This post was written by Corinne Brenner (former Data Visualization with D3.js student). To learn more about the course, attend a Demo/Info Session on Tuesday, August 9th in NYC. RSVP here.

I arrived at the Metis 
Data Visualization with D3.js course with a few goals in mind: to get a practical introduction to the library everyone seemed to be using, to learn more about data visualization for the web, and to solve a data visualization problem for Harmony Institute, a nonprofit that studies the impact of media. I wanted to see if D3 would open up new possibilities, particularly by letting people interact with visualizations.


At the time of the course, I was working on a project at Harmony Institute focused on how bipolar disorder was being depicted in the media. Were there any unusual patterns in the way movies and TV shows represent characters with bipolar disorder?

To answer this question, I and my team watched hours of content, coding things like characters’ gender, specific behaviors, and how central bipolar disorder was to the plot. Documentaries like Boy Interrupted or Flight from Madness received the highest possible score of 7, but other works like Urban Legend or Prison Break were primarily about other things (with bipolar disorder incidental to the story), so received just a 1, the lowest rating. We also used information about films’ box office earnings, TV programs’ Nielsen ratings, major awards won, and release date to develop an ‘Attention’ rating, also on a scale of 1 (least attention) to 7 (most attention).

The transition from being knee-deep in data analysis, to filtering the relationships and patterns in 
a dataset meant for a broader audience can be a challenge. During the Data Viz course, the opportunity to think through example datasets with others, and picking apart the choices other designers and data scientists made, was enormously helpful.

Here’s how I worked on my Harmony Institute project throughout my time at Metis: 

Using R for statistical analyses, I knew that two 
variables, in particular, were negatively related – media that focused on bipolar disorder tended to have lower attention ratings. I could quickly graph this relationship in Google Sheets, which offered a bare-bones way to start talking about this project with colleagues:

But it didn’t tell the whole story.

We knew different genres clustered together. For example, documentaries tended to be very specialized about bipolar disorder, but did not receive many points on our Attention scale. Using the ggplot package in R, I could use color to point that out: 

But we still weren’t satisfied.

Even though the graph described the trend, people would want to go deeper, to know which films and TV shows were featured and who the characters were. Especially interesting were the few movies or TV shows that defied the overall trend by receiving both high attention scores and strong bipolar content ratings. However, labeling all of that information on a static image quickly becomes overwhelming, as this other Google Sheets prototype shows. It’s totally unreadable! 

I wanted to let individuals explore the sample, revealing a high level of detail when a person was interested in it. D3.js offered me a number of ways to address that problem, and I went with a simple tooltip that pops up with more information about each piece of media when someone hovers over each dot. 

To check out this function in action, click here

Getting a handle on this functionality, and being able to use what I knew about D3 to address the audience’s desire for more information, was an inspiring way to implement new skills with D3! Even though it was a simple adjustment, the tooltip satisfied users’ curiosity in a way that would be impossible with a static image.

As Kevin Quealy and Paul Buffa (course instructors) pointed out during the course, the real power of D3 is often its ability to handle hierarchies, scale to different levels of analysis, and painlessly adjust to repeat small multiples of visualizations. I’m excited to bring this powerful tool to future data projects!


Similar Posts

alumni
Via Non-Traditional Path, Grad Alexandra Fox Sets & Meets Data Science Goals

By Emily Wilson • November 08, 2019

If such a thing as a “traditional path” to data science exists, bootcamp graduate Alexandra Fox didn’t take it.  Instead, she forged her own route, complete with the goal of getting a job as a data scientist immediately after graduation. Find out how she did it and what she's up to now here.

alumni
Infographic: Metis Bootcamp Alumni By The Numbers

By Metis • March 26, 2020

In this infographic, we break down a data set that’s near and dear to our hearts: one that represents our Data Science Bootcamp alumni. Find out where our grads are working and within what industries, where many of them call home across the United States and the world, what they studied pre-bootcamp, and much more.

alumni
The Trifecta: From Bootcamp Prep Course to Bootcamp to New Career

By Emily Wilson • March 05, 2020

For Kari Davis, there’s before the bootcamp, and there’s after. A clear demarcation between two paces of professional life – one slower and more bureaucratic, the other fast-paced and constantly changing. Learn how a Metis Bootcamp Prep Course helped her prepare for the bootcamp and then land a new data science job.