Projections

Let’s talk about projections!
We need projections to create an actual map.
Geospatial data is usally in the form of latitude and longitude but in the browser we don’t have these concepts.
We only have x and y coordinates.

Goal: Our goal is to transform geo-coordinates to screen-coordinates.

Projections are just math. And what they do is transform latitude and longitude coordinates to x and y coordinates on a flat surface (e.g. your screen).
Learn more about projections here.

And if you want to dive into the math, go over here.

Let’s define our first projection:

var projection = d3.geoNaturalEarth1();
Easy, right? In d3 these are functions we can call with an array of coordinates.
projection([3.4, 52.3] One important thing to remember is that in d3 we call projections with **[longitude,latitude]**. Read more about the way different libraries handle it here.
The result of this call is an array of x,y coordinates. E.g.:
[300,400] or [x,y]

We got some X, Y coordinates as output, but theres something missing: the projection has no knowledge of the size or extent of our SVG element. If we don‘t provide more information to the projection function you won‘t see a thing on the screen. Because the defaults for projections are:

center = \[0,0\]
transform = \[480,250\]

The center of the map would be somewhere in the ocean near Africa (the 0,0 coordinate) and would only work if your element is 960x500 pixels.

We can change these defaults with the methods scale center and translate

The most important for us right now are center and translate. With center we set the center of the projection. So the point we want to be the center of our SVG.
„The translation offset determines the pixel coordinates of the projection’s center“ (D3 Documentation).
Or in other words we set the translation offset to half of the width and height of our svg. So that the center of our SVG element (half of width and half of height = center of the svg) corresponds to the center of the projection.

var projection = d3.geoNaturalEarth1();
projection.center(\[3.4, 52.3\])
.translate(\[200,200\]);

With these parameters we change the “position” of the map.

D3 comes with a long list of projections, you will find them here.

See Also

How to create a simple tooltip in d3.js

Learn how to create tooltips in d3. This post shows you actual d3 code and adds explanations to the most important aspects of tooltips in d3 and has a demo as well.

SVG Basics for d3

Three basic elements of SVG you should know if you want to create maps with d3.