Data-Driven Documents, Defined

D3, or d3.js, is a magical chunk of JavaScript code that helps you express data visually on the web. D3’s full name is Data-Driven Documents, and it’s so named because it connects data values to document elements, thereby “driving” the document from data. For example, consider a typical scatterplot, with little circles placed in 2D space along the x and y axes. Think of these dots as being “driven” by some underlying data: they are “pushed” into place, based on their corresponding values.

D3 is exploding in popularity right now, partly because it works with any modern browser, including mobile Android and iOS devices, but also because it is extremely powerful. That said, it does take some time to learn and master; if you’re a journalist on deadline, D3 may not be the best tool for that chart that’s due today. For common visual forms, you may prefer Datawrapper, which is designed to generate visuals quickly. D3, on the other hand, is best for more complex visuals, or more complex interactive designs.

The world’s most valuable resource is no longer oil, but data