Creating an Interactive Pixel Map of Japan with Over 63,500 Data Points

I’m excited to share a project I recently developed: an immersive, interactive map of Japan that visualizes over 8,500 train stations and 55,000 convenience stores, all rendered as a dynamic pixel grid.

Introducing Hikarie — Japan’s Data Visualization Showcase

Hikarie is a web-based interactive map designed to bring regional data to life through a pixel-perfect visualization. Each pixel on the map represents real-world locations, providing users with an engaging way to explore Japan’s transportation hubs and retail points.

Experience the Map Live: Hikarie.app

The Development Journey

One of the most challenging aspects was achieving smooth performance while rendering and interacting with thousands of individual map elements. To accomplish this, I leveraged a robust technology stack:

• Framework: Next.js, enabling server-side rendering and optimized performance
• Rendering Engine: Pixi.js, for high-performance, GPU-accelerated visualization
• Map Logic & Data Handling: D3.js paired with AmCharts to manage geographic data and interactions
• Data Storage: MongoDB, storing detailed location datasets

Technical Insights

Integrating D3.js with Pixi.js presented an exciting technical challenge. D3’s powerful data-binding capabilities combined with Pixi’s rendering speed allowed for a responsive, visually appealing experience. This combination enabled me to handle vast amounts of data smoothly, ensuring users can explore the map without lag.

Explore and Discover

Whether you’re interested in Japan’s transportation network or retail distribution, Hikarie offers an innovative way to visualize and interact with geographic data at an unprecedented scale. I invite you to explore the map and see the intricate patterns and connections come to life.

Enjoy navigating Japan’s vibrant data landscape!