Creating an Interactive Pixel Map of Japan’s Train Stations and Convenience Stores Using Next.js, Pixi.js, and D3.js
In the realm of data visualization, presenting complex geographical information in an engaging and accessible way can be a formidable challenge. Recently, I embarked on a project to map over 8,500 train stations and 55,000 convenience stores (konbini) across Japan, culminating in an interactive pixel map that offers users a detailed yet smooth experience. This post shares insights into the development process, the technologies employed, and the challenges overcome to bring this digital map to life.
Introducing Hikarie: Japan’s Interactive Data Visualization Platform
The project, named Hikarie, is an interactive web-based visualization of Japan’s vital train and convenience store infrastructure. Its core feature is a pixel-based map where each pixel is rendered individually and colored dynamically based on real-world data, allowing users to explore the density and distribution of stations and stores across the nation seamlessly.
Check out the live site here: Hikarie.app
The Core Challenge: Rendering Large-Scale Interactive Data Efficiently
One of the primary technical hurdles was rendering a vast number of interactive objects—thousands of pixels—while maintaining smooth performance and responsiveness. Achieving a fluid user experience with such a high volume of elements required careful selection of rendering techniques and optimization strategies.
Technical Stack and Architecture
To realize this vision, I leveraged a combination of powerful JavaScript libraries and frameworks:
- Next.js: Provides a robust framework for server-side rendering, performance optimization, and scalable deployment.
- Pixi.js: Enables efficient WebGL rendering of thousands of sprites and interactive elements, ensuring high performance even with complex visuals.
- D3.js & AmCharts: Used for sophisticated map logic, data binding, and visualizations that adapt seamlessly to user interactions.
- MongoDB: Serves as the backend database for storing extensive location data, facilitating efficient data retrieval and updates.
Harmonizing D3.js and Pixi.js
Integrating D3.js’s data-driven document capabilities with Pixi.js’s rendering power was an intriguing challenge. D3 excels at manipulating DOM elements and generating complex data visualizations, while Pixi.js offers performance-optimized rendering suitable for large numbers of sprites. Combining these tools involved synchronizing data bindings with Pixi’s rendering pipeline, creating a fluid and interactive experience where users can zoom, pan, and explore data
