Building your team's data science & analytics capabilities? Metis can help.

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
Made at Metis: Predicting and Mapping Using Geographic Data

By Emily Wilson • February 14, 2019

Bootcamp graduates Joyce Lee and Matt Maresca covered a lot of ground using geography as a framework to design their final projects. Lee did on a county-by-county analysis to predict mortality rates from overdoses, while Maresca used satellite imagery to map farmland, urban development, and natural resources in Shanghai. Read the post for more!

alumni
Made at Metis: Restaurant Recommendations & a What-to-Watch Guide

By Emily Wilson • December 21, 2018

To go out or to stay in, that is the question. If you're in need of an answer to this common conundrum, here are two bootcamp final projects that can help. Iris Borkovsky's restaurant recommender helps you choose a delicious and well-reviewed dining spot nearby while Benjamin Sturm's movie recommender helps you make the next tough decision of what to stream.

alumni
Bootcamp Grad Discusses Strong Chicago Market + Current Role at United Airlines

By Emily Wilson • February 14, 2019

Bootcamp grad Chris Gillespie is a Chicagoan through and through. He got a B.A. in Economics from Northwestern, attended our bootcamp in the city, and now works there as a Sr. Analyst for United Airlines. Read his story, including why he thinks Chicago has a strong market for data science careers.