3D Data Dashboard

A real-time analytics dashboard featuring a Three.js interactive globe, D3.js live charts, and a WebSocket server that streams live data every 2 seconds.

---

✨ Features

• 🌍 Interactive 3D Globe — Three.js sphere with drag rotation, spike markers per region, atmosphere glow, starfield, animated rings
• 📈 Live D3 Line Chart — 30-point rolling window with area fill, animated draw, catmull-rom smoothing
• ⚡ WebSocket Data Stream — Node.js WS server pushes updates every 2 seconds (auto-fallback to demo mode if unavailable)
• 🔢 Animated Metric Cards — Request count, active users, revenue, uptime with trend indicators
• 🗺 Regional Breakdown Table — Sorted by traffic volume with share % and animated bars
• 🔌 Connection Status Bar — Real-time latency, active connections, WS status indicator
• 📱 Responsive — Works on all screen sizes

---

🗂 Project Structure

3d-data-dashboard/
├── app/
│   ├── globals.css             # CSS variables, scanlines, glow effects
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── Dashboard.tsx           # Main layout container
│   ├── GlobeCanvas.tsx         # Three.js 3D globe with region markers
│   ├── LiveChart.tsx           # D3.js animated line/area chart
│   ├── MetricCard.tsx          # Animated KPI cards
│   ├── RegionTable.tsx         # Regional data table with progress bars
│   └── StatusBar.tsx           # WS connection status + latency
├── lib/
│   ├── types.ts                # TypeScript interfaces
│   ├── useWebSocket.ts         # WS hook with reconnect + mock fallback
│   └── utils.ts                # Helpers (fmt, latLonToXYZ, lerp)
├── server/
│   └── ws-server.js            # Node.js WebSocket server (port 4000)
├── .env.local.example
└── README.md

---

🚀 Getting Started

1. Install dependencies

npm install

2. Set up environment variables

cp .env.local.example .env.local

.env.local content:

NEXT_PUBLIC_WS_URL=ws://localhost:4000

3. Run everything (Next.js + WS server together)

npm run dev

This uses concurrently to start both:

• Next.js at http://localhost:3000
• WebSocket server at ws://localhost:4000

4. Run separately (optional)

# Terminal 1 — Next.js
npm run dev:next

# Terminal 2 — WebSocket server
npm run dev:ws

No WebSocket? The app automatically falls back to demo mode with simulated data if the WS server is unreachable. Everything still works.

---

🏗 Build for Production

npm run build
npm start

For the WebSocket server in production, use a process manager:

npm install -g pm2
pm2 start server/ws-server.js --name ws-server

---

☁ Deploy to Vercel

1. Push to GitHub and import to vercel.com
2. Add environment variable: NEXT_PUBLIC_WS_URL=wss://your-ws-server.com
3. Deploy the WebSocket server separately (Railway, Render, Fly.io, etc.)

The Next.js frontend and WebSocket server are separate processes — deploy them independently.

---

🎮 Globe Controls

Action	Control
Rotate	Click + drag
Touch rotate	Touch + swipe
Auto-spin	Always active when not dragging

---

🛠 Tech Stack

Technology	Purpose
Next.js 14	React framework
Three.js	3D globe rendering
D3.js v7	SVG charts
ws	WebSocket server
Tailwind CSS	Utility styling
TypeScript	Type safety
Lucide React	Icons

---

📄 License

MIT