FLOW — Global Trading Visualization Dashboard

A visually stunning trading dashboard that transforms market data into art. Built with Python, DuckDB, FastAPI, and Svelte.

✨ Features

• Animated 3D Globe — Watch capital flow between global exchanges in real-time with animated arcs
• Candlestick Charts — Professional-grade OHLCV visualization with volume overlay
• Order Flow Pulse — Particle-based visualization showing buy/sell pressure
• Live Market Ticker — Scrolling price updates across all tracked symbols

🏗️ Architecture

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│  Python Script  │────▶│     DuckDB      │◀────│    FastAPI      │
│  (simulation)   │     │   (storage)     │     │   (REST API)    │
└─────────────────┘     └─────────────────┘     └────────┬────────┘
                                                         │
                                                         ▼
                                                ┌─────────────────┐
                                                │  Svelte Frontend │
                                                │  (visualization) │
                                                └─────────────────┘

🚀 Quick Start

Prerequisites

• Python 3.9+
• Node.js 18+
• pnpm / npm / yarn

1. Set Up Python Environment

# Create virtual environment and install dependencies
uv venv
uv pip install -r requirements.txt

2. Generate Trading Data

uv run python simulate_data.py

This creates trading.duckdb with:

• 8 stock symbols (AAPL, GOOGL, MSFT, AMZN, TSLA, NVDA, META, JPM)
• ~16,000 OHLCV candlestick records
• ~10,000 order flow events across 8 global exchanges
• ~1,000 exchange-to-exchange capital flow records

3. Start the API Server

uvicorn api:app --reload --port 8000

API available at http://localhost:8000

Available Endpoints: | Endpoint | Description | |----------|-------------| | GET /symbols | List all trading symbols | | GET /exchanges | Get exchange geospatial data | | GET /ohlcv/{symbol} | Candlestick data for a symbol | | GET /order-flow | Order flow with optional filters | | GET /order-flow/aggregated | Volume aggregated by exchange | | GET /exchange-flow | Capital flow between exchanges | | GET /market-summary | Overall market statistics |

4. Start the Frontend

cd frontend
npm install
npm run dev

Dashboard available at http://localhost:5173

🎨 Design Philosophy

This dashboard embraces "data as art":

• Dark, cinematic aesthetic with subtle gradients and noise textures
• Continuous motion — the globe rotates, particles flow, arcs animate
• Typography-forward — Space Mono for data, Syne for display
• Generous negative space — visualizations breathe
• Accent colors with purpose — teal (#00d4aa) for bullish, coral (#ff4976) for bearish

📁 Project Structure

trading-dashboard/
├── simulate_data.py      # Data generation with GBM price model
├── api.py                # FastAPI server
├── trading.duckdb        # DuckDB database (generated)
├── requirements.txt      # Python dependencies
└── frontend/
    ├── package.json
    ├── vite.config.js
    ├── index.html
    └── src/
        ├── main.js
        ├── App.svelte
        └── components/
            ├── CandlestickChart.svelte
            ├── GlobeFlow.svelte
            ├── OrderPulse.svelte
            └── MarketTicker.svelte

🔧 Customization

Add New Symbols

Edit SYMBOLS in simulate_data.py:

SYMBOLS = ["AAPL", "GOOGL", "MSFT", "AMZN", "TSLA", "NVDA", "META", "JPM", "YOUR_SYMBOL"]

Add New Exchanges

Edit EXCHANGES in simulate_data.py:

EXCHANGES = [
    # ... existing exchanges
    {"id": "BSE", "name": "Bombay Stock Exchange", "lat": 18.9311, "lon": 72.8334, "timezone": "Asia/Kolkata", "color": "#FF9933"},
]

Modify Color Theme

CSS variables are defined in App.svelte. Key colors:

• Bullish/Buy: #00d4aa
• Bearish/Sell: #ff4976
• Background: #0a0a0f

🚢 Production Deployment

Backend

uvicorn api:app --host 0.0.0.0 --port 8000 --workers 4

Or with Docker:

FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
CMD ["uvicorn", "api:app", "--host", "0.0.0.0", "--port", "8000"]

Frontend

cd frontend
npm run build
# Serve the dist/ folder with any static file server

📜 License

MIT

---

Built with 🖤 for data artists