DEV Community

Cover image for How I built a real-time, 3D interactive Data Globe with visualization platform
Heat Globe
Heat Globe

Posted on

How I built a real-time, 3D interactive Data Globe with visualization platform

I love data, but I hate spreadsheets. Staring at rows of ISO codes and GDP numbers never really conveys the true scale of global shifts in climate, economy, or population.

So, I decided to build something better.

Meet Heat Globe: an entirely free, interactive, 3D WebGL data visualization platform. It renders thousands of data points, complex choropleth maps, and live data sockets directly onto a 3D Earth, running at a smooth 60fps in the browser.

In this post, I want to break down how I built it, the tech stack I chose to handle complex rendering, and how I integrated an AI Analyst directly into the globe's UI.

screen shot of the website

*The Tech Stack *

Building a high-performance 3D web app requires a carefully curated stack. Here are the tools that made Heat Globe possible:

  • Next.js 15 (React 19): For the core framework, routing, and fast SSR/CSR hybrid rendering.
  • Three.js & React Three Fiber (R3F): The backbone of the 3D globe. R3F is brilliant because it allows you to compose complex 3D scenes declaratively using React components.
  • D3.js & TopoJSON: For handling complex geographic data, projecting lat/lng coordinates onto a 3D sphere, and computing choropleth color scales dynamically.
  • Zustand: For global state management (vital when you need the React UI to talk to the WebGL canvas instantly).

The Hardest Part: Rendering the Globe at 60fps

When you are drawing 190+ country borders, thousands of population spikes, and an atmospheric glow, performance becomes your primary constraint.

1. Generating the Spherical Geometry
Instead of loading a massive .gltf 3D model, the Earth itself is generated procedurally using a inside R3F. This is crucial for keeping the initial bundle size incredibly small.

2. Math for Data Points (The latLngToVector3 Function)
How do you place a 3D bar chart (a "Spike") representing the population of Brazil, in the exact right spot on a 3D sphere?

You have to convert spherical geographic coordinates (Latitude and Longitude) into 3D Cartesian coordinates (X, Y, Z). Here is the core math function that powers almost every visual on the globe:

export function latLngToVector3(lat: number, lng: number, radius: number): [number, number, number] {
const phi = (90 - lat) * (Math.PI / 180);
const theta = (lng + 180) * (Math.PI / 180);
const x = -(radius * Math.sin(phi) * Math.cos(theta));
const z = radius * Math.sin(phi) * Math.sin(theta);
const y = radius * Math.cos(phi);
return [x, y, z];
}

This is called thousands of times on initial render, turning JSON data into a beautiful global heatmap.

**

Adding the "Wow" Factor

**
A data visualization tool shouldn't just be functional; it should feel cinematic. To elevate the experience, I added a few key features:

  • Post-Processing: Using @react-three/postprocessing I added a subtle Vignette to draw the eye to the center of the globe and increase contrast.
  • The "Share this View" Viral Loop: One of my favorite features. When you find an interesting data correlation (e.g. zooming in on European trade routes), you can click "Copy Link". The app actually serializes the WebGL Camera's x,y,z coordinates into the URL parameters. If someone clicks that link, their camera instantly snaps to your exact rotation and zoom!
  • Live Data Sockets: It's not just historical CSV data. The globe can connect to real-time WebSockets to plot live events (like earthquakes or the ISS location) directly onto the surface as glowing, pulsing rings.

**

Integrating AI: The Claude UI Analyst

**
The final piece of the puzzle was making the data readable, not just viewable.

I built an "AI Analyst Panel" integrated directly into the dashboard. Using the Anthropic SDK, it bundles the current activeDataset, selectedCountry metrics, and historical context into a prompt, and allows Claude (or other BYOK providers) to analyze the specific view the user is looking at.

It feels like you have a data scientist sitting next to you explaining the globe.

What's Next?
Heat Globe is completely free and live right now. You can check it out at heatglobe.com.

I would love to hear feedback from the dev community! What performance optimizations do you use for React Three Fiber? Are there specific datasets or APIs you think would look amazing visualized on a 3D globe? Let me know below

Top comments (0)