From CSV to Spinning Sphere: How to Build a Scrollytelling Globe with D3.js
Let’s be real: tools like Mapbox and Leaflet are great. You click a few buttons, and boom—you have a map. But if you want something fully custom—a 3D globe that moves with your story, “flying” from a close-up flight path to a global view just by scrolling—D3.js is still the GOAT.
No fluff today. I’m going to show you exactly how to build the interactive 3D globe I used in my recent project using D3.js + TopoJSON. (You can check out the live project here).
Full disclosure: I’m still pretty new to HTML, CSS, and JS. I definitely fumbled around a lot to get this working. (I have to admit that AI tools were a huge help for inspiration and guidance when I was trying to build things I didn’t fully understand yet. While classmates recommended Claude, I personally leaned on Gemini—it understood my confusion better and explained the logic clearly when I got stuck. Highly recommend finding the AI co-pilot that “speaks your language”!)
The best part is that this code is reusable. You can take this template and plug in your own data—whether you’re mapping global coffee trade routes, international student travel paths, or any other story that needs a global perspective.
Related Knowledge Center: Inside the newsroom
As newsrooms struggle with rickety business models and precarious finances — as well as new technologies — they are deploying an array of editorial responses.
The Times and its critics | Washington Post mortem