---
name: "canvas-data-dashboard"
description: "Animated real-time data dashboard with bar chart, line chart, donut chart, and live metrics. HTML5 Canvas, dark theme, 60fps."
metadata:
version: "1.0.0"
dependencies:
system:
- "browser"
runtime:
language: "html"
entrypoint: "dashboard.html"
timeout_seconds: 30
---
# 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
---
## Files
### `dashboard.html`
```html
Data Dashboard
```
### `README.md`
```md
# Canvas Data Dashboard
An animated real-time data dashboard built with HTML5 Canvas.
## Features
- Animated bar chart with smooth lerp transitions
- Scrolling line chart with gradient fill
- Donut chart with percentage labels
- Live metrics panel with random data simulation
- 60fps rendering with FPS counter
- Dark theme with neon accent colors
## Run
Open `dashboard.html` in any modern browser. No dependencies required.
```