“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.”
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.
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.
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.”
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.”