# 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:

```javascript
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:

```javascript
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