Background map | the D3 Graph Gallery

About input data

Difference between geoJson and topoJson. But not necessary thanks to leaflet.

From a geoJson file

Input data for maps is geoJson format. D3.js works very well to display this kind of information using path.

Most basic

The most basic background map you can do in d3.js. Keeping only the core code.

Input data format: geoJson

Change projection

Shows how to switch from one projection to another thanks to the geo-projection plugin.

Single country

How to plot the boundaries of any country in d3.js.

Actually explains how to filter a geoJson file.

Using the Leaflet.js open source library

Leaflet is an open-source JavaScript library for mobile-friendly interactive maps. Awesome for background maps. See the range of background tiles you can use here and here.

Most basic leaflet

A very basic example showing how to build a leaflet map.

Button to control tile

Add a button that allows to select different background tiles.

Using Canvas

Canvas is an alternative to SVG. Its main advantage is that it avoids to overload the dom and thus often leads to better browser performance. Here are examples showing how to build background maps using d3.js and canvas:

Most basic map with canvas

A very basic example showing how to build a map using d3.js and canvas.

Selection of blocks

A few blocks with more complicated codes to showcase the possibility of the d3-sankey plugin

Mike's tutorial

A tutorial built by Mike Bostock: a very good starting point to maps in d3.js.

Demo of all projections

A block showcasing all the different available projection, with smooth transitions.

Leaflet documentation

Link to the leaflet website: awesome doc for awesome maps.