2013-10-31

Co.Labs

The One Tech Buzzword Every Journalist Should Know

The future of storytelling is a combination of text, moving images and interactive elements--all powered by a JavaScript library called D3.



For newsrooms, creating interactive stories can be painful--but readers are coming to expect them more and more. As easily as they can wow readers, cool interactive graphics can be incredibly expensive to produce. A little JavaScript library called D3.js is starting to change that. And it just won a journalism award.

If you follow major news events, there's a good chance you've seen D3 in action. It's used routinely by outlets like the Guardian, Washington Post, Quartz, and the New York Times to visualize data about complex topics like the national budget (and its proposed cuts), U.S. gun deaths, NSA spying, and the world’s stock of chemical weapons. The list goes on. Indeed, usage of D3 has exploded in the last year and a half, winning it recognition by the Online News Association, which gave D3 the Gannett Foundation Award For Technical Innovation in the Service of Journalism at its annual conference last week. This is, as Nieman Lab's Joshua Benton noted, the first time a JavaScript library has won a journalism award. It's also a big win for the open-source community.

What Is D3? (And Why Is It Such a Big Deal?)

D3 (short for "Data-Driven Documents") was the brainchild of Mike Bostock, who along with Jeff Heer and Vadim Ogievetsky, created the framework in 2011. D3 allows developers to build interactive visualizations and animations in the browser using web standards like HTML, CSS, and SVG. In essence, it lets one modify an HTML document live in the browser using data and offloads all mathematical heavy lifting to a single JavaScript file.

"The original idea for D3 was to build the smallest meaningful tool in data visualization: the visualization kernel," says Bostock. "How does one create a dynamic visualization, where a 'visualization' is simply a web page--a hierarchy of HTML & SVG elements driven by data? The data-join, D3’s core concept, is my attempt at solving this problem by providing an effective method of manipulating a web page when data changes, without dictating how the page is represented."

Related Story: How Foursquare Made Those Insane Data Visualizations

Once upon a time, Flash or some other proprietary technology would have been required to build the type of fluid, animated, and scalable visualizations that D3 is capable of producing. Thankfully, web standards have come a long way. Using pre-built functions, D3 can target items on a page, style them with CSS, or create entirely new SVG graphics on the fly.

"The other parts of D3, such as geographic projections, axes, and brushes, are optional pieces that build on the kernel," says Bostock. "I believe this decoupling affords greater flexibility and thus a greater diversity of visualizations. And it aids learning because new users can pick up and study each piece independently, incrementally adding to their working knowledge."

Although Bostock now works at the New York Times, the old Gray Lady isn't hogging all the glory for herself. D3 is freely available for anyone to use, including many of the Times' biggest competitors.

How Quartz Uses D3 To Make Data Graphics

One such competitor is Quartz, the hyper-innovative business news site launched by Atlantic Media last year. Quartz leans on D3 to create things like this fascinating interactive map comparing Latin American exports (soccer players vs. meat) or this delightfully Flash-free bar chart breaking down recent U.S. employment figures.

But as cool as all of this stuff is, these types of visualizations are still out of reach for those who aren't comfortable working with a little bit of code. To remedy that, Quartz built a tool that makes creating data-driven graphics even easier. Chartbuilder is a browser-based, open-sourced chart creation tool that leverage D3 behind-the-scenes and spits out simple, embeddable static charts.

"It's funny that creating a chart tool is an innovative thing," says David Yanofsky, a reporter for Quartz who took the lead in creating Chartbuilder. "One of the reasons why we created Chartbuilder is to be able to leverage the power of D3 and give it to somebody who doesn't know how to code JavaScript. It's about creating a tool that empowers people in the newsrooms to create things faster."

And by that, he doesn't just mean people in Quartz's newsroom. After using it internally--and overcoming some initial discomfort about sharing its secret sauce with competitors--the Quartz team open-sourced Chartbuilder. The web app's source code is freely available on GitHub, where it can be downloaded and installed on one's own web server (or run locally in the browser, since there's no server side magic at play). Yanofsky says Chartbuilder has been used by the likes of CNBC, NPR, New Hampshire Public Radio, and WGBH, among many other news sites and blogs. There’s also a hosted version here for people who are pretty sure “FTP” was an alternative rock band from the mid-'90s.

"D3 is doing everything," Yanofsky says of Chartbuilder's functionality. "What you see on the front end is basic HTML markup with some jQuery to make it work. All of the heavy lifting of the rendering of the chart, the calculation of the axes, the formatting, and the types of charts is all done using D3."

Data Viz & Beyond: A New “Data-Driven jQuery”?

Like so many D3 proponents, Yanofsky can't speak highly enough of the framework, citing its efficiency and the robust community of developers supporting the project.

"One example of how D3 helps alleviate this complexity is it will understand something like a scale. And you'll be able to create a scale and then give it to another part of the software that will be able to create a line based on that scale. You say, here's a piece of code that creates a line, and here's the data I want to make a line with. You use this library that has this built-in, smart way to define these things."

As for D3 itself, the framework is being used for more things beyond just data visualization. It helps power iD, the web-based map editor for OpenStreetMap, for example. At the New York Times, Bostock says, they’re using D3 for other interactive elements and more generally “as a way of manipulating web pages based on data and separating content from logic, like ‘data-driven jQuery.’” He points to some of their recent longform multimedia stories, in which D3 is used to control things like audio and video components.

“We’re one of the most-starred projects on GitHub,” Bostock says. ““It’s definitely grown tremendously in the last year and a half.”

[Image: Flickr user See-ming Lee]






Add New Comment

1 Comments

  • Bret Mavrich

    This was great. It helped me get clarity on what direction to move in my codeducation.