Create a 3D globe with D3.js

D3 is an excellent tool to visalize geo data. See how to implement a simple example.

If you ever need to visualize some geo data, D3.js is an excellent tool for this.

There are libraries and examples out there to do all (or at least most) things you can imagine.

I used it to create a 3D draggable globe including interaction with countries.

My code is built on this great example for implementing smooth dragging.

The only tricky part was figuring out how to interact with a clicked or hovered country. My first attempt was using SVG for rendering and do the event handling like you would do with other DOM elements. However there are clear performance differences between SVG and canvas rendering - especially with auto-rotation.

The working solution uses an algorithm borrowed from d3-polygon to check if the current cursor position is inside the polygons of a country.

See the Pen D3 canvas globe with country hover by jorin (@jorin) on CodePen.