Starts Tonight! Intro to Data Science Course Enroll 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
Bootcamp Grad Finds a Home at the Intersection of Data & Journalism

By Emily Wilson • July 03, 2019

Bootcamp graduate Jeff Kao knows that we’re living in a time of heightened media distrust – and that’s precisely why he relishes his job in the media. “It's heartening to work at an organization that cares so much about producing excellent work,” he said of the nonprofit news organization ProPublica, where he works as a Computational Journalist. Read Kao's full story here.

alumni
Curiosity, Asking Good Questions, & One Grad’s Inevitable Path to Data Science

By Emily Wilson • December 10, 2019

Bootcamp graduate Nathan Maton was a curious child, casually asking unsuspecting science teachers big questions like “what is time?” on the way to field trips. That curiosity led to what he considers his strongest skill: the ability to ask good questions - and he’s not surprised it eventually led to a career in data science.  Read his story.

alumni
How a Former Software Engineer’s Dream of Working in Machine Learning Became a Reality

By Emily Wilson • March 18, 2019

After 20+ years of working as a senior-level software engineer for companies like Goldman Sachs and Bank of America, Emy Parparita was looking for a change. Read how the bootcamp helped him transition to his current role of Machine Learning Engineer at Quora.