Watch our on-demand lecture on SVMs featuring Alice Zhao:  Get Recording 

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
Following His Own Beat: Bootcamp Grad Takes Indirect Path from Music to Data Science

By Emily Wilson • August 11, 2020

Years before attending the bootcamp and switching to a career in data science, Metis graduate Sami Ahmed was focused on music. He studied film scoring and music business in college and worked as a musician, mostly composing for commercial media. Read how (and why) he made the transition to data science.

alumni
Bootcamp Grad Returns to Online Security Field, Making Impact with New Skills

By Emily Wilson • July 20, 2020

For much of his career, Leon Rosenstein’s primary working goal has been to stay one step ahead of those seeking to do digital harm. Read how his time in the bootcamp helped him expand and evolve his career trajectory, fuzing his interests in data science and online security.

alumni
Made at Metis: Street Art to Fine Art; Building a Recommendation System

By Metis • May 26, 2020

This post features two projects from recent graduates of our data science bootcamp. Take a look at what's possible to create in just 12 weeks, including a project to leverage a user’s existing street art preferences to recommend visually-similar fine art and a project to develop a collaborative filtering recommendation system using sales transaction data.