Let’s talk about projections!
We need projections to create an actual map.
Geospatial data is usally in the form of
longitude but in the browser we don’t have these concepts.
We only have
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();
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.:
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
The most important for us right now are
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.