A production-quality, interactive operations command-center dashboard built with Plotly.js. This single-file HTML application simulates real-time streaming data with realistic operational patterns, perfect for demonstrating data visualization and analytics portfolio skills.

Live Demo: Open index.html in any modern browser.

• Real-time animated cards displaying critical metrics:
  • Orders per hour
  • Revenue today
  • Average response time
  • Error rate percentage
  • Active users
  • SLA compliance percentage
• Smooth number transitions with delta indicators (↑ ↓ →)
• Color-coded alerts when metrics breach thresholds

• Line/area chart showing orders per minute over the last 60 minutes
• Smooth spline interpolation
• Automatically extends as new data arrives
• Interactive hover tooltips with exact timestamps

• Choropleth map showing order volume by UK region and international locations
• Heat gradient scaling from low to high activity
• Includes: London, Manchester, Birmingham, Leeds, Glasgow, Edinburgh, plus European coverage
• Real-time color updates as regional data changes

• Multi-line chart tracking four critical metrics simultaneously:
  • API latency (primary axis)
  • CPU usage percentage (secondary axis)
  • Database query time
  • Memory usage
• Threshold line highlighting (500ms API latency threshold)
• Dual-axis visualization for better metric comparison
• Historical data window: last 60 data points

• Animated donut/pie chart showing revenue distribution:
  • Web (45%)
  • Mobile App (32%)
  • API (18%)
  • In-Store (15%)
• Percentage and currency values on hover
• Real-time updates as channel revenue streams in

• 5-stage funnel: Visitors → Cart → Checkout → Payment → Confirmation
• Drop-off percentages calculated at each stage
• Color-coded stages for visual hierarchy
• Realistic conversion rates (visitors to confirmation: ~8%)

• Live-updating scrolling alert log
• 20 most recent alerts displayed
• Severity color-coding:
  • 🔴 Critical (red): Error rate spikes, SLA breaches
  • 🟠 Warning (amber): High latency, approaching thresholds
  • 🔵 Info (blue): Deployments, positive metrics
• Slide-in animations for new alerts
• Timestamps for all incidents

• 7-day × 24-hour heatmap showing historical order patterns
• Color gradient from low (dark) to high (red) activity
• Identifies peak traffic hours and quiet periods
• Helps with capacity planning and resource allocation

• Sortable live table of top 10 products ranked by revenue
• Columns:
  • Rank (#1-10)
  • Product name
  • Orders (count)
  • Revenue (£)
  • Growth % (with color: green positive, red negative)
  • Trend sparkline (inline SVG)
• Updates in real-time as new sales flow in

The dashboard simulates a complete operational environment with realistic data patterns:

• Historical Initialization: 24 hours of synthetic data loaded on page load
• Streaming Updates: New data points generated every 2-3 seconds via setInterval()
• Realistic Patterns:
  • Sinusoidal traffic waves reflecting business hours (9am-6pm peak)
  • Random fluctuations to simulate natural variance
  • Occasional threshold breaches triggering alerts
  • Correlated metrics (e.g., high traffic → higher latency)

• KPI cards: Updated on every data refresh cycle
• Charts: Reactively re-rendered via Plotly.react() for smooth animations
• Alert feed: New alerts triggered probabilistically (~8% chance per update)
• Table: Live rank and metric updates

// Orders per minute: 80-200 with business-hour peaks
baseOrders = 120 + Math.sin(hour/12) * 40 + Math.random() * 30

// API Latency: 150-250ms normally, occasional spikes
latency = 150 + Math.random() * 100 + (spike ? 300 : 0)

// Alert triggers: 92% chance per cycle = ~1 alert per 30 seconds
if (Math.random() > 0.92) { /* generate alert */ }

• Single file deployment: No build tools, dependencies, or backend required
• Pure JavaScript: No frameworks to learn; demonstrates vanilla JS expertise
• Plotly.js: Industry-standard for interactive data visualization
• CDN-based: Works offline after first load; minimal dependencies

1. Clone or download this repository
2. Open index.html in any modern browser (Chrome, Firefox, Safari, Edge)
3. Watch the dashboard come alive with real-time data

# Using Python 3
python -m http.server 8000

# Using Node.js http-server
npx http-server

# Using PHP
php -S localhost:8000

Then navigate to http://localhost:8000

• Chrome/Chromium: ✅ Full support
• Firefox: ✅ Full support
• Safari: ✅ Full support (15+)
• Edge: ✅ Full support
• Mobile browsers: ✅ Responsive design (tested on iOS/Android)

• Dark theme (#0a0a1a, #0f172a): Reduces eye strain for extended monitoring
• Accent colors:
  • Amber (#f59e0b): Primary actions, highlights
  • Green (#10b981): Success, positive deltas
  • Red (#ef4444): Alerts, errors, negative metrics
  • Blue (#3b82f6): Info, secondary data

• Hover effects: Cards glow on hover, charts show tooltips
• Animations: Pulsing LIVE indicator, shimmer effect on KPI cards, alert slide-ins
• Responsive: Mobile-first grid layout, adapts to tablets and desktops

• Uses Plotly.react() for efficient chart updates (only re-renders changed elements)
• Limits historical data storage (60-point rolling windows for charts)
• Debounced alert feed (keeps last 20 alerts to prevent DOM bloat)
• No external dependencies beyond Plotly.js CDN

realtime-operations-dashboard/
├── index.html          # Single-file dashboard (self-contained)
└── README.md           # This documentation

• index.html: ~32 KB (minified, single file)
• Total delivery: <100 KB including Plotly.js CDN

// Line ~575: Change interval (in milliseconds)
setInterval(updateRealtimeData, 2500); // 2.5 seconds
setInterval(updateRealtimeData, 1000); // 1 second (faster)

// Line ~521: Increase/decrease random variance
dataStore.revenueChannels[key] += (Math.random() - 0.45) * 500; // ±250 on average
// Change 500 to 1000 for higher volatility

1. Add to dataStore.kpis object
2. Create KPI config in kpiConfig array
3. Add data generation logic in updateRealtimeData()

All theme colors are CSS variables at the top of the stylesheet:

/* Change these hex values to rebrand */
--bg-dark: #0a0a1a;
--accent-primary: #f59e0b;
--accent-success: #10b981;
--accent-danger: #ef4444;

Tested on standard development hardware:

This project demonstrates:

✅ Data Visualization: Multi-chart dashboard with Plotly.js ✅ Real-Time Simulation: Streaming data with smooth animations ✅ Frontend Architecture: Clean separation of data/rendering logic ✅ Responsive Design: Mobile-first CSS grid layout ✅ JavaScript Expertise: Vanilla ES6, no frameworks ✅ UX Design: Command-center aesthetic with interactive elements ✅ Performance: Efficient rendering and data management ✅ Production Quality: Polished, deployable single-file application

Potential extensions (not included in base version):

• WebSocket integration for true backend data streaming
• Local storage for historical data persistence
• Export dashboard snapshots as PNG
• Custom date range filtering
• Dark/Light theme toggle
• Advanced alert filtering and search
• Anomaly detection with ML.js
• Multi-dashboard support with tabs

MIT License © 2026 Mayank Joshi

Permission is hereby granted to freely use, modify, and distribute this dashboard.

Mayank Joshi 📊 MSc Business Analytics | Swansea University 🔗 GitHub | Portfolio

Built as a showcase of full-stack data analytics and visualization capabilities.

For issues, feature requests, or questions:

• Open an issue on GitHub
• Check the customization guide above
• Review the inline code comments in index.html

Last Updated: March 2026 Version: 1.0.0 Status: Production Ready