The web has changed so many things that we can be forgiven for developing callouses on whatever part of our brain controls amazement. But reminisce for a moment, back to a time when you had to buy maps, pay for directions, and if you wanted to create new views of the world, you needed access to some combination of patience, mathematical expertise, and expensive technology. Unlike writing – which has been open source since Gutenberg – making awesome maps has long been a game for the mathematical elite. Google changed many of those rules, and D3 has broken all the rest.

Five years ago, all the best interactive maps were mashups – informative but clunky overlays made with Google or OpenStreetMap, with limited potential for customization and interactivity. Flash forward and today’s best maps are being made with D3, a JavaScript library that uses the full potential of the web to animate, transform, and decorate. Maybe you don’t know anything about D3. But if you love maps, you should.

D3, which stands for Data Driven Documents (in programming jargon, a web page is also known as a document), wasn’t made specifically for mapping. Mike Bostock, now of The New York Times, had all types of data visualizations in mind when he built the library (it’s written in JavaScript) as a PhD student at Stanford.

Bostock thought every other tool missed the point. Each was a proprietary suite of tools for creating visualizations, but they were all disconnected from their ultimate destination: the web. Bostock’s big idea was that the web browser could be used as a completely inclusive mapping and data visualization tool.

Everything on a map is controlled by data, from the equations that make the projection, to the location of cities, to populations of countries, to continental drift. Because D3 can manipulate every piece of data, it can manipulate every part of the map. That makes it an incredibly flexible and powerful tool. It can bend the map into projections you’ve never imagined, make maps that move on their own, or react to all sorts of poking and prodding.

The only barrier to all this potential is your own pain threshold for learning to write code. That’s right: With D3, there’s no user interface other than your text editor and the API reference (It’s like a dictionary that describes each piece of code’s job). Nobody ever promised that making awesome maps would be easy. But even if you are satisfied just enjoying D3’s creations from the outside, you’ll be interested in these six reasons that explain why they are so cool.

Data joins

The most powerful part of D3 is the data join. This is a weird concept, so don’t worry if it’s not immediately clear. It even took Bostock some time to get his head around it.

“It came out of my subconsciousness, and I had to build on it and use it myself to understand it completely,” he said.

D3 binds data to web elements. To make sense of this, it helps to have a rudimentary understanding of how browsers work. Generally speaking, web elements are the objects on a web page, and different types of objects are created and controlled using different languages, most commonly HTML, SVG, and CSS.

HTML makes elements like paragraphs, spans, divisions, and images. SVG (Scaled Vector Graphics) elements are lines and shapes drawn directly onto the browser (as opposed to embedded images like jpegs or gifs). CSS (Cascading Style Sheets) doesn’t make its own web elements, but it’s a very powerful and versatile way to control other elements’ attributes, like size, shape, color, and font (to name a few).

Web elements give a map its form, and data determines how it behaves. What D3 does is manage the relationship between data and document, so your map animates smoothly. Start by pointing D3 to a dataset, and then tell it how to use the available tools (again, web elements from HTML, SVG, and CSS) to represent that data on screen.

For example, this map by Brenden Heberton uses data from NOAA to visualize one of history’s nastiest tornado outbreaks. For the tracks, he told D3 to draw a straight line between the touchdown and liftoff latitudes and longitudes and use wind speed to determine each circle’s radius. Finally, check out the boxes that appear whenever you mouse over a storm. This is a straightforward CSS trick that Heberton improved by using D3 to link up each storm’s icon with the data to display its vital information.

A lighter world

D3 draws its maps using SVG, the web’s native graphics tool. It’s lightweight and quick to load, which makes it great for animations, panning, and zooming. But even SVG can get bogged down with the sheer number of coordinates it takes to draw the shapes on a map. The thing is, most of these coordinates are redundant, because many of the shapes share borders.

Again, Bostock came to the rescue. After he saw how these big datasets were slowing down his maps, he wrote a program to trim them down. It’s called TopoJSON, and it ignores any redundant coordinates. It’s based on the previous system, called GeoJSON, which uses 80 percent more memory.

If D3 wasn’t light on web browsers, it wouldn’t be nearly as useful. Check out this fun animorphic gallery of map projections, and imagine how tedious it would be to watch if there were a bunch of redundant borders bogging down the action.

A faster world

Bostock’s spartan code isn’t the only reason D3’s maps are fast. Jason Davies is Bostock’s first mate, and is responsible for many of D3’s geographic abilities. One of the problems he tackled early on was how maps handle change. Every time a map zooms, pans, or animates, D3 has to redraw – or resample – every coordinate into its new position. On some animations, like scrolling a flat map, sampling is easy. But on others, like this world tour globe, complex geometries have to be calculated on the fly as they rotate around the central perspective.

To slim down D3’s processing load, Davies introduced a method called adaptive resampling, which ensures that D3 doesn’t do any more resampling than it has to in a given situation. Without it, it would be impossible to complete the (improbable) challenge of syncing the animation with the Animaniacs’ geography song.

Projections

There are hundreds of map projections, each one a correct answer to the question of how to turn a globe flat. However, most of them had been pushed into obscurity, partly because Google made the Mercator ubiquitous online, and partly because it took some serious mathematic chops if you wanted to calculate projections yourself. But these other projections are more than just curiosities. The projection is your map’s frame, and can minimize distortions, emphasize regional quirks, and give a map a unique character.

But cool as projections are, they were becoming relics because the math was just too difficult for most lay people.

Again, D3 is lucky to have Jason Davies. He’s a complete mathochist whose brain itches for complex geometric puzzles. With his help, Bostock added D3.geo, an expansion with a dozen standard geographic projections. Some of these might look goofy and unfamiliar at the global scale, especially to people used to seeing the world inside a rectangle, but are priceless after a little zooming and clipping (another Davies feature). By drawing these projections directly with the browser, D3 has not only rescued them from becoming obscure curiosities, but makes them available as tools, a service to all of geography (and a strong push against Mercator’s hegemony.)

Choosing a projection in D3 usually takes up a single line of code. Once you’ve done that, whatever data you’ve decided to put over the map will automatically contort itself into the new configuration. The legwork on your part will be recentering, zooming, and clipping the map to your taste. There is a little bit of a learning curve, but remember that compared to the queasiness you feel towards programming, calculating map projections yourself would be like an acute case of amoebic dysentery.

Davies is always chasing the dragon, looking for new and difficult projections to code. In addition the standard D3.geo projections, he’s added two more plugins. One is for geometric projections, like Buckminster-Fuller’s Dymaxion map, another for exotics, like the Mollweide interrupted sinusoidal. Browsing through Davies’ gallery, you’ll find plenty of projections to inspire projects.

Integration

Bostock deliberately made D3’s code simple, so it runs fast and unfettered. But, D3 is no lone cowboy, and one of the coolest members in its posse is Leaflet, a JavaScript library that recreates (and modifies) the look of map services like OpenStreetMap, MapBox, or ESRI. Leaflet’s layers – themed sets of polygons, lines, and dots – are bound to third-party datasets, which means they reflect data changes on the fly without being bound to restrictions from those third-party platforms. For example, you can combine a layer from OpenWeatherMap with MapQuest’s traffic API to create a lovely exhibition of how people in LA freak out every time a cloud darkens the glare on the freeway.

Useful as D3 is, it can get bogged down with too many variables. Crossfilter is another library that manages big datasets. It also has lots of options for menus you can put on your website, so visitors can play with different ranges and subsets. Crossfilter has a lot of potential, especially with its different options for interactivity, but too much choice can also bog down the user experience. Compare this example to the one above to see how interactivity can be both illuminating and confusing.

The language

People who insist that learning to program is easy are usually annoying and wrong. But if you are interested in making maps, you should learn D3. For one, the language is clean and its logic is self-explanatory, even for technophobic liberal arts majors. Its syntax is consistent, and there aren’t any weird mystery functions to monkey things up. If something doesn’t work, it can usually be traced back to a typo or some mathematic flub.

That’s right, there’s math. Don’t panic, though. Most of the heavy lifting is done behind the scenes. For the stuff you’ll be doing, like controlling variables and assigning roles to different data columns, you’re looking at a 9th-grade, pre-algebra level of difficulty.

There are a ton of great tutorials out there. Sebastian Gutierrez’ DashingD3 is probably the best for absolute beginners, because it’s based on the copious notes he took while learning it himself. For deeper understanding and some literary flair, Scott Murray’s free ebook is hilarious, well-written, and has tons of great web history. Mike Bostock’s tutorials aren’t always clear for people new to programming, but are essential reads if you want a deeper understanding of things like selections, transitions, and data binding. Plus, his map making walk through is a must-read for all levels.

D3 is a bad-ass tool for mapping. After a few short months learning the basics, you’ll start looking for data everywhere, and daydreaming of great new maps. Also, if you’ve always wanted to code, D3 is a vibrant antidote to other non-graphical languages. When you start getting things right (which doesn’t take all that long), D3 rewards you with awesome, interactive, animated maps. Doesn’t that sound a lot more satisfying than learning to print the words “Hello World”?

Of course, D3 isn’t for every job. It can’t compete with other services for practical, day-to-day map services (Seriously, the route finding algorithms on Google Maps deserve their own holiday). Conversely, if you’re doing complex analysis, use a Geographic Information System, for Pete’s sake. ESRI, for instance, has a really slick JavaScript API for its ArcGIS product.

But if your goal is to make beautiful, interactive, lively maps, then you should be using D3.