A web-based, animated, bird's-eye voxel map of Doha that visualizes real-time traffic congestion.
Transform traffic data into a mesmerizing voxel visualization. Watch anonymous cars flow through Doha's streets, their density and speed reflecting real-time congestion levels.
No tracking. No routing. Just live visual traffic energy.
- Real-time traffic visualization - Color-coded roads showing congestion levels
- Animated cars - Hundreds of cars moving along roads at speeds based on traffic
- Interactive camera - Pan, zoom, and rotate with smooth controls
- Auto-rotate mode - Sit back and watch the city rotate
- OpenStreetMap data - Accurate road network from OSM
- TomTom traffic integration - Live traffic data (or simulated fallback)
This project is committed to privacy:
- No real vehicles are tracked - Cars are procedurally generated based on aggregate traffic data
- No unique identifiers - Cars are regenerated on each refresh
- No historical data - Only live, aggregate traffic flow is displayed
- No export or replay - The visualization is ephemeral
| Category | Choice |
|---|---|
| Build Tool | Vite |
| Language | TypeScript |
| Rendering | Three.js (InstancedMesh) |
| Styling | Tailwind CSS |
| Road Data | OpenStreetMap Overpass API |
| Traffic Data | TomTom Traffic Flow API |
| Hosting | Cloudflare Pages |
| API Proxy | Cloudflare Workers |
- Node.js 18+
- npm or pnpm
# Clone the repository
git clone https://github.com/yourusername/voxel-traffic-doha.git
cd voxel-traffic-doha
# Install dependencies
npm install
# Copy environment file
cp .env.example .env
# Start development server
npm run devThe app will open at http://localhost:5173
For live traffic data, get a free TomTom API key:
- Sign up at developer.tomtom.com
- Create an API key (free tier: 2,500 calls/day)
- Add to
.env:VITE_TOMTOM_API_KEY=your_key_here
Without an API key, the app uses simulated traffic data.
| Control | Action |
|---|---|
WASD / Arrow Keys |
Pan camera |
Mouse Drag |
Rotate view |
Scroll |
Zoom in/out |
R |
Reset view |
| Auto-rotate button | Toggle automatic rotation |
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
npm run format |
Format code with Prettier |
npm run deploy |
Deploy to Cloudflare Pages |
npm run worker:dev |
Run API worker locally |
npm run worker:deploy |
Deploy API worker |
-
Deploy the API Worker (keeps TomTom API key secure):
cd worker npx wrangler login npx wrangler secret put TOMTOM_API_KEY # Enter your TomTom API key when prompted npx wrangler deploy
Note the worker URL (e.g.,
https://voxel-traffic-api.your-subdomain.workers.dev) -
Deploy the Frontend:
# Set the worker URL as environment variable # In Cloudflare Pages dashboard or: echo "VITE_WORKER_URL=https://your-worker-url.workers.dev" >> .env npm run deploy
-
Configure Cloudflare Pages (alternative via dashboard):
- Connect your GitHub repository
- Build command:
npm run build - Build output directory:
dist - Environment variable:
VITE_WORKER_URL= your worker URL
├── src/
│ ├── core/ # Three.js setup, voxel engine, car manager
│ ├── services/ # OSM, traffic API, matching logic
│ ├── types/ # TypeScript interfaces
│ ├── utils/ # Coordinate conversions
│ ├── styles/ # CSS styles
│ ├── config.ts # Configuration constants
│ └── main.ts # Application entry point
├── worker/ # Cloudflare Worker for API proxy
└── index.html # HTML template
The visualization uses several optimization techniques:
- InstancedMesh - Single draw call for all voxels of each type
- Frustum culling - Built into Three.js
- Efficient updates - Only updates instance matrices when needed
- Delta-time animation - Frame-rate independent car movement
Contributions are welcome! Feel free to open issues or submit pull requests.
MIT - see LICENSE for details.