Canvas Data Dashboard

Difficulty: Intermediate | Runtime: HTML5 Canvas | Output: Interactive visualization

Teach an AI agent to generate a real-time animated data dashboard with multiple chart types, smooth transitions, and a dark theme.

What You'll Build

A self-contained HTML file rendering an animated dashboard with:

• Animated bar chart with value labels and smooth height transitions
• Real-time line chart with scrolling data points
• Donut/ring chart with percentage labels
• FPS counter and live data feed simulation
• Dark theme with neon accent colors

Core Concepts

1. Canvas Rendering Pipeline

The dashboard uses a single requestAnimationFrame loop to render all charts:

function render(timestamp) {
  ctx.clearRect(0, 0, width, height);
  drawBarChart(ctx, data.bars);
  drawLineChart(ctx, data.timeSeries);
  drawDonutChart(ctx, data.categories);
  drawFPS(ctx, timestamp);
  requestAnimationFrame(render);
}

2. Smooth Transitions

Bar heights interpolate toward target values using lerp:

current += (target - current) * 0.08;  // ease toward target

3. Color Palette

Use HSL with fixed saturation/lightness for consistent neon look:

• Primary: hsl(270, 80%, 65%) — purple
• Accent: hsl(170, 80%, 55%) — teal
• Warn: hsl(40, 90%, 60%) — amber
• Grid: rgba(255,255,255,0.08)

Teaching Points

• Canvas coordinate system and transforms
• requestAnimationFrame for 60fps rendering
• Lerp-based animation for smooth transitions
• Drawing arcs for donut charts
• Text measurement and alignment on canvas