Building News Applications
COMM 177T/277T (2019)

D3 Coding Workshop

Day 14 ~ May 16, 2019

Coding Workshop

Today we'll work through a basic example from the D3.js Quick Start Guide that introduces some critical concepts. Along the way, we'll learn how to use the Chrome Developer Toolbar to debug and gain insight into how D3 works.

D3 Resources

D3 is a popular Javascript library that provides incredible flexibility for creating interactive visualizations.

With this flexibility comes a learning curve. Below are a few resources intended to help level up on core features, work through coding challenges, and inspire visualization ideas.

Data joins and updates

A key concept at the heart of D3 is the enter-update-exit pattern, which provides the mechanism for binding data to graphical representations and manipulating the connections between the two domains. As D3 creator Mike Bostock puts it in Thinking with Joins:

Here’s the deal. Instead of telling D3 how to do something, tell D3 what you want. You want the circle elements to correspond to data. You want one circle per datum. Instead of instructing D3 to create circles, then, tell D3 that the selection "circle" should correspond to data. This concept is called the data join...

This concept (and the related syntax) can be hard to grasp because it's quite different from other programming paradigms. To simplify things, the D3 creator recently added selection.join. But it's important to familiarize ourselves with the pattern to gain a foundational grasp of D3, and because so much example code and documentation relies on it. Here are a few resources that may help illuminate the topic:

Final Project: Interactive Graphic with D3

This project is the last of the two major projects for this quarter. It is due on Tuesday June 4th (the final day of class), during which we'll present our work.

The final project will involve creating an interactive data visualization, publishing the work to your portfolio site, and presenting the project during class. This project is focused on building a custom interactive with D3, in addition to leveraging the tools and skills we've covered over the quarter (e.g. designing on paper, styling with CSS, JS-based interactivity, and deployment using Python).

The goal of the assignment is to focus on the planning and execution of an interactive visualization, so it's important to minimize the amount of time you spend acquiring and preparing data. For example, I would discourage you from writing a complex scraper or a sophisticated data transformation pipeline. Some degree of data preparation may be required to massage data into a form suitable for D3, but you should choose a story and data set(s) that minimize the amount of work on this front. Any code that you write to acquire and/or prepare data for the visualization should be included in your repo and be mentioned in your final presentation.

Coding requirements

For this project, everyone must use vanilla Javascript and D3 in addition to HTML and CSS -- other third-party Javascript libraries such as JQuery and React cannot be used.

Additionally, the data for your application should be loaded from an external file (e.g. JSON or CSV), rather than written into the page (e.g. using a Jinja template).

The code should be built out in an appropriately named directory of your class portfolio site. For example, if it's a project on campaign finance, then your directory tree might look something like this:

_site/campaign-finance/
├── app.css
├── app.js
└── index.html

Story planning

Due Tuesday May 21st by start of class

Coding

Use HTML, CSS, plain Javascript, D3 and an external data file to implement the interactive visualization.

The visualization must include a headline and prominent (but short) section of narrative to provide background on the story.

Inspiration

Data

The search for data in the news process most often begins after you've decided on a story idea. Ask yourself if there's a topic or question you'd like to explore -- e.g. something you've seen in the news lately -- and what questions you have about the story. Let those questions guide your data sleuthing.

If you're still hard-pressed for story/data ideas, try visiting government websites and data clearinghouses to generate some ideas.

Below are a few sites to get you started:

Lastly, it's fine to use data sets we've touched on during the quarter, such as the Death Penalty Information Center's Executions Database.

Interactives

Below are some interactive graphics and clearinghouses to serve as models and inspiration as you work on the final project.

Some great D3 examples from NYT are mentioned in the D3.js Quick Start Guide. Here are a few:

And some additional examples:

Submitting your work

To submit the project, you must:

Final presentation

A 5-10 minute presentation where you:

Grading

Grading will reflect several elements:

It's okay to be ambitious in your designs, and points will not be deducted if you fail to implement every feature you envisioned. However, you should plan your project in a way that allows you to at least build the primary visual, narrative and interactive features. Just as in a newsroom or software shop, have a clear plan for executing a minimum viable product that can be executed by the deadline.