nagix/mini-tokyo-3d

Mini Tokyo 3D

A real-time 3D digital map of Tokyo's public transport system.

See a Live Demo.

Demo Videos

• Demo Video (2025, English)
• Demo Video (2025, Japanese)
• Demo Video (2021, English)
• Demo Video (2021, Japanese)
• Demo Video (2019, English)
• Demo Video (2019, Japanese)

User Guides

• User Guide (English)
• User Guide (Japanese)
• User Guide (French)

Developer Guides

• Developer Guide (English)
• Developer Guide (Japanese)
• Developer Guide (French)

Cheat Sheet

Language Support

Currently, the following languages are supported. Any help or contribution with translations and additional language support is always greatly appreciated.

If you want to contribute, please start with translating the UI messages in the dictionary-<ISO 639-1 code>.json file in the data directory. Then, if you have extra energy, add the title of each item in your language to airports.json, flight-statuses.json, operators.json, poi.json, rail-directions.json, railways.json, stations.json, train-types.json in the data directory.

About Data

The data for this visualization are sourced from the Public Transportation Open Data Center, which includes station information and train timetables as well as real-time data such as train location information and status information of multiple railway lines in the Greater Tokyo area.

How to Build

First, get access tokens for the public transportation data and map tiles by signing up at the Public Transportation Open Data Center and Mapbox. At the Public Transportation Open Data Center, you need to get both tokens for ODPT Center and Challenge 2026.

The latest version of Node.js is required. Move to the root directory of the application, run the following commands, then the script, dataset and static web page will be generated in the build directory.

npm install
npm run build-all

Finally, pass your Mapbox access token as accessToken and tokens for ODPT Center and Challenge 2026 as secrets property to a Map constructor in index.html.

map = new mt3d.Map({
    /* ... */
    accessToken: 'pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxx',
    secrets: {
        odpt: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        challenge: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    }
});

See the Developer Guides for more details.

License

Mini Tokyo 3D is available under the MIT license.

Supporting Mini Tokyo 3D

Your support, large or small, helps keep this project strong!

• Monthly donation through GitHub Sponsors
• One-time donation through PayPal