Interactive globe with d3-geo and <canvas>

Click a country or drag-and-drop to rotate the globe.

Another mini-project of mine. This time using d3.js and the <canvas> element to create an interactive globe.

See this visualisation on my Observable page.

There are some performance benefits when using <canvas> instead of <svg> for visualising detailed graphics such as maps and projections. I wanted to learn more about d3’s powers in this domain.

Clicking a country will animate the globe to its centroid.

For this visualisation I’m using geodata from World Atlas. The TopoJSON file can be found here.

TopoJSON has a great advantage over GeoJSON in terms of file size (sometimes up to 80% reduction), but in order to use it along with d3, you’d need to parse it with a TopoJSON package.

The full code can be found in my Observable Notebook linked above.