Story

Slides

Spotfire Dashboard

Research Notes

Data-Driven Documents

Overview

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Examples

Welcome to the D3 gallery! Feel free to add links to your work! More examples are available on bl.ocks.org/mbostock. If you want to share an example and don't have your own hosting, consider using Gist and bl.ocks.org.

Let's Make a Map

In this tutorial, I’ll cover how to make a modest map from scratch using D3 and TopoJSON. I’ll show you a few places where you can find free geographic data online, and how to convert it into a format that is both efficient and convenient for display. I won’t cover thematic mapping, but the map we’ll make includes labels for populated places and you can extend this technique to geographic visualizations such as graduated symbol maps and choropleths.

Without further ado, here’s the map:

Shown are the four constituent countries of the United Kingdom: Scotland, Northern Ireland, Walesand England. As maps go, it’s not particularly interesting, but the simplicity should serve adequately to demonstrate the basics of map-making.

Finding Data

The first task for any map is finding geometry. The primary source for administrative boundaries and other official data is the respective government. The U.S. Census Bureau, for example, publishes geometry for a range of spatial subdivisions such as states, counties and census tracts. As government work, this data is typically in the public domain and thus free to use. The Ordnance Survey provides similar vector data for the UK.

Unfortunately, government data can sometimes be hard to find or use. Just ask anyone who’s wrangled with GRIB files or aimlessly traversed mysterious FTP servers! This should improve over time as demand for data grows, but there will always be cruft from past releases and confusing formats spawned by committee. Projects such as Data.gov and the Sunlight Foundation aim specifically to improve the quality of government data offerings, and sites such as Social Explorerpackage up government data in more accessible formats.

For a crowdsourced alternative, GeoCommons is a platform for sharing geographic datasets. Integrated search and preview make it easy to explore. But, while there’s lots of useful data, you should be wary of unverified sources, at least for journalism; it’s better to get data directly from an official agency or other citeable source.

Hands-down, the most convenient source of free geographic data is Natural Earth. An apparent labor of love by cartographer Nathaniel Vaughn Kelso (and others), Natural Earth provides a variety of cultural, physical and raster datasets. Shapefiles are beautifully simplified by hand for different resolutions, letting you choose the resolution appropriate to your application. We’ll use two 1:1e7 Natural Earth datasets for this map: