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.
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.
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.