Drawing geographically

d3.geoPath() is going to be the workhorse of our geographic drawings.

It's similar to the SVG path generators we learned about earlier, except it draws geographic data and is smart enough to decide whether to draw a line or an area.

To flatten spherical objects such as planets into a 2D image, d3.geoPath() uses projections. Different kinds of projections are designed to showcase different things about the data, but the end result is you can completely change what the map looks like just by changing the projection or moving its focal point.

Let's draw a map of the world, centered on and zoomed into Europe. We'll make our map navigable in Chapter 5, Defining the User Experience – Animation and Interaction.

First though, ...

Get D3.js 4.x Data Visualization - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.