Get a Taste of the Bootcamp Curriculum with Intro to Data Science. Class Starts Jan 24!

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 Hoyh8rrkswiynzavxujv
For Former Academic Dan Taber, Data Science Bootcamp Bridged Skills Gap to Industry

By Emily Wilson • October 23, 2018

Bootcamp grad Dan Taber is certainly no stranger to data. Prior to landing his current role, he’d already been working with data for more than 15 years in various academic roles spanning science, technology, and policy. But his hard skills had fallen out of date. Enter the bootcamp as a way to bridge the gap between his academic background and industry ambitions.

alumni Apj17jeyqegryes1xfkr
Q&A with Metis Bootcamp Grad Vicky Szuflita, Deputy Data Director with the NC Democratic Party

By Metis • November 09, 2018

Recent Metis bootcamp graduate Vicky Szuflita won SwitchUp's quarterly gift card giveaway. As a followup, they featured her in a great Q&A about her background, her time at Metis, and her current role on the data team with the Democratic Party of North Carolina. She previously worked in account planning for an international advertising agency, and while she loved the creative aspects of an agency career, she wanted the skills to strengthen her ideas in a more quantitative way.

alumni Uswv77uqzw0nvpc2ofww
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.