# Order Flow Graph - Live Trading Visualizations

**Last updated:** 2026-05-15 21:45 UTC

**🌐 Live Site:** https://of.llm.astrona.me

**Status:** ✅ **FULLY OPERATIONAL - MULTIPLE 3D VISUALIZATIONS**

---

## 🎯 **Quick Start**

**Visit the live site:** `https://of.llm.astrona.me`

**Try these visualizations:**
1. **🚀 Space Battle Trading** - Ships attack planets at price levels!
2. **🌌 Trading Universe** - Multiple crypto pairs as planets
3. **🎯 Circular Price City** - Concentric rings around current price
4. **🏗️ Linear Price City** - Horizontal price level buildings

---

## 📊 **What This Project Does**

**Originally:** Build an order flow graph to model market dynamics

**Evolved Into:** A complete multi-visualization trading platform with:

✅ **Real-time Binance data** - WebSocket collection 24/7
✅ **Multiple 3D visualizations** - 4 unique viewing modes
✅ **Multi-asset support** - Gold, Bitcoin, Ethereum, and more
✅ **Interactive controls** - Rotate, zoom, pan around data
✅ **Sentiment-based spawning** - People/ships reflect market mood
✅ **HTTPS deployment** - Secure, professional presentation

---

## 🎨 **Visualization Modes**

### 1. 🚀 Space Battle Trading (Recommended!)

**Concept:** Order flow as space battle

**Features:**
- 🪐 Planets = Current price (under siege)
- ⭕ Rings = Price levels (defense lines)
- 🚀 Green Rockets = Buyers (bids)
- 🛸 Red UFOs = Sellers (asks)
- Ships spawn, attack, orbit at price rings
- Real-time battle log
- Collapsible UI panels

**Best For:** Entertainment, presentations, understanding order flow

**URL:** `https://of.llm.astrona.me/outputs/space_battle_trading.html`

---

### 2. 🌌 Trading Universe

**Concept:** Multiple crypto pairs as planets in space

**Features:**
- Each pair = One planet (up to 12)
- Planet color = Market sentiment
- Price rings = Order book depth
- Click planet to focus camera
- 3 view modes: Spread, Cluster, Orbital

**Best For:** Portfolio overview, multi-pair monitoring

**URL:** `https://of.llm.astrona.me/outputs/trading_universe.html`

---

### 3. 🎯 Circular Price City

**Concept:** Concentric rings around current price

**Features:**
- Center point = Current price (gold marker)
- Inner rings = Close prices
- Outer rings = Far prices
- People spiral toward center
- Compact, intuitive design

**Best For:** Quick market overview, support/resistance levels

**URL:** `https://of.llm.astrona.me/outputs/circular_price_city.html`

---

### 4. 🏗️ Linear Price City

**Concept:** Horizontal line of price level buildings

**Features:**
- Buildings positioned left-to-right by price
- Height = Volume at that price
- Color = Green (below), Red (above), Gold (at current)
- People climb to price floors

**Best For:** Seeing price distance visually

**URL:** `https://of.llm.astrona.me/outputs/dynamic_price_city.html`

---

## 📈 **Data Sources**

### Real-Time Binance Data

**Assets Tracked:**
- **XAUTUSDT** - Gold spot
- **BTCUSDT** - Bitcoin
- **ETHUSDT** - Ethereum
- **BNBUSDT** - BNB
- **SOLUSDT** - Solana
- **ADAUSDT** - Cardano
- And more...

**Update Frequency:**
- WebSocket collection: 100ms
- Database update: Every 5 seconds
- Browser refresh: Every 2-3 seconds

**Data Stored:**
- Order book depth (bids/asks)
- Price levels
- Volume
- Trading signals
- Market sentiment

---

## 🎮 **Common Controls**

All visualizations support:

**Camera:**
- **Left Click + Drag** - Rotate view
- **Right Click + Drag** - Pan view
- **Scroll Wheel** - Zoom in/out

**Controls:**
- **Asset Selector** - Switch between pairs
- **Refresh Rate** - 2-3 seconds
- **Minimize/Maximize** - Collapsible panels (Space Battle)

---

## 🛠️ **Technical Architecture**

### Backend

**WebSocket Collector** (`collect_multi_asset.py`)
- Runs 24/7
- Collects Binance order book via WebSocket
- Stores in SQLite database

**Order Book Extractor** (`extract_orderbook.py`)
- Runs every 5 seconds
- Converts database to JSON
- Output: `orderbook_*.json`

**Signal Generator** (`generate_3d_city_signals.py`)
- Runs every 2 seconds
- Generates trading signals
- Output: `realtime_summary_*.json`

### Frontend

**3D Engine:** Three.js r128
**Controls:** OrbitControls
**Data Fetch:** HTTP polling
**Animations:** RequestAnimationFrame loop
**Responsive:** Mobile-friendly

### Deployment

**Server:** Nginx reverse proxy
**Backend:** Python HTTP server (port 8080)
**SSL:** HTTPS enabled
**Domain:** of.llm.astrona.me

---

## 📚 **Documentation**

**Complete Feature Set:** `COMPLETE_FEATURE_SET.md`
**System Architecture:** `SYSTEM_ARCHITECTURE.md`
**3D City Guide:** `3D_CITY_GUIDE.md`
**Original Concept:** `ORDER_FLOW_GRAPH.md`

---

## 🚀 **Performance**

**Latency:** < 10 seconds (WebSocket → Browser)
**FPS:** 60 (smooth animations)
**Scalability:** 12 pairs, 100+ ships per visualization
**Uptime:** 24/7 (automated collection)

---

## 🎯 **Use Cases**

### For Trading
- Spot breakouts (heavy ship/planet concentration)
- Identify support/resistance (tall buildings/rings)
- Gauge sentiment (colors, ship types)
- Monitor multiple pairs (Universe view)

### For Learning
- Visualize order books concretely
- Understand price levels intuitively
- See market dynamics in action
- Compare different assets

### For Presentations
- Impressive visualizations
- Easy to understand
- Real-time data
- Professional appearance

---

## 📞 **Quick Links**

**Main Dashboard:** https://of.llm.astrona.me/outputs/main.html
**Space Battle:** https://of.llm.astrona.me/outputs/space_battle_trading.html
**Trading Universe:** https://of.llm.astrona.me/outputs/trading_universe.html
**Circular City:** https://of.llm.astrona.me/outputs/circular_price_city.html
**Linear City:** https://of.llm.astrona.me/outputs/dynamic_price_city.html

---

**This project has evolved from a simple order flow graph concept into a comprehensive trading visualization platform with multiple interactive 3D experiences.**

**Enjoy exploring live market data in space!** 🚀🌌✨