The spark

Interactive weather maps
Interactive weather maps showing patterns across regions

It started with a simple question: what's the weather like right now in cities I've never been to? Not just a number on a screen, but the feeling of it. The humidity in Jakarta, the wind in Tokyo, the dry heat of a desert town. I wanted to see weather the way a map tells a story — spatially, visually, all at once.

Most weather apps give you a search bar and a five-day forecast. That felt incomplete. I wanted something I could look at and immediately understand the weather patterns across entire regions. So I decided to build it myself.

Choosing the tools

The backend was straightforward. I'd been learning Go through Gooking, so I built a REST API with the same layered architecture: handlers, services, repositories, wired to PostgreSQL. OpenWeatherMap became my data source, with a cron scheduler scraping weather data for cities across multiple countries.

The frontend was where it got interesting. I chose React for the UI shell, but the real magic would come from D3.js for interactive 2D maps and Three.js for 3D terrain visualization. The learning curve was steep, but that was the point.

Making maps come alive

D3.js map visualization
D3.js and Three.js bring geographic data to life

D3.js is powerful but unforgiving. You don't get a map component. You get primitives for binding data to SVG paths. I spent days understanding GeoJSON projections, figuring out how to render Indonesia's 17,000 islands or Japan's detailed prefectures with proper scaling and interaction.

The breakthrough moment was when I got hover interactions working. Moving your mouse over a region and seeing its weather data appear in a side panel — temperature, humidity, wind speed, all updating smoothly. It felt like the map was breathing.

Three.js added another dimension, literally. I created a 3D terrain view where you could rotate the globe, zoom into regions, and see weather data overlaid on topographic surfaces. Technically challenging but worth every late night debugging WebGL shaders.

Lessons along the way

The hardest part wasn't the code. It was knowing when to stop adding features and start polishing what existed. I kept wanting to add more countries, more data points, more visualizations. Eventually I learned that a focused, well-executed product beats a sprawling half-finished one.

I also learned that data visualization is fundamentally about empathy. Every design choice — color scales for temperature, icon sizes for wind speed, animation speed for transitions — is about helping someone else understand information quickly and intuitively.

Where it stands

GeoWeather now covers weather data for Indonesia and Japan, with interactive D3.js maps, a data panel with regional statistics, and a 3D globe visualization. The backend handles automatic data collection via cron jobs, running on the same Go infrastructure as my other services.

It's not perfect, and there's always more to build. But it taught me something important: the best projects are the ones where you're genuinely curious about the outcome. When you build something because you actually want to use it, the motivation never runs dry.