Is D3 a New Web Mapping Tool?

D3.js, or Data-Driven Documents, is a JavaScript framework for manipulating documents based on data, using pure HTML, SVG, and CSS, with full emphasis on the web standards.

D3.js can take input data from an array of numbers, bind them to a document object model (DOM), and then create an HTML table from it. Moreover, it can apply data-driven transformations to create an interactive SVG bar chart with smooth transitions and interaction.

Its biggest strength is in its data visualization ability. D3.js bridge the gap between the static display of data and interactive and animated data visualizations.

Additionally, it can also be used for cartographic visualizations and creation of interactive maps based on the GeoJSON formatted input data.

Let’s Make a D3 Map

If you want to learn more about the D3.js, you can start with the many tutorials or by examining the examples.

If you want to learn how to make a map, Let’s Make a Map is a tutorial where Mike Bostock (a D3.js developer) shows how to make a map from scratch using D3.js and TopoJSON.

D3.js’s out of the box support different geographic projections. It models projections as full geometry transformations, which means that when straight lines are projected to curves, D3.js apply configurable adaptive resampling to subdivide lines and eliminate projection artifacts. It is even possible to add custom projections or to use existing ones from the Extended Geographic Projections D3.js plugin.

D3.js Maps Examples

As a big beer lover, I love the interactive map Mapping the Rise of Craft Beer, which offers a detailed overview of the American craft beer industry, based on the data gathered by the Brewers Association and created with D3.js.

Secondly, Mike Bostock, creator of D3.js, shared a transcript of his talk at Eyeo from 2013, which includes more than 600 examples.

This talk does have a point, though. Examples are lightweight and informal; they can often be made in a few minutes; they lack the ceremony of polished graphics or official tools. Yet examples are a powerful medium of communication that is capable of expressing big ideas with immediate impact. And Eyeo is a unique opportunity for me to talk directly to all of you that are doing amazing things with code, data and visualization. So, if I can accomplish one thing here, it should be to get you to share more examples. In short, to share my love of examples with you.

D3.js can also be used in many combinations with existing mapping libraries, like the Leaflet or Google Maps, or you can build your own custom slippy map solution.

However, the most fascinating example is the earth - Global Wind Map.