Data Dashboard

{"manifest":{"name":"Canvas Data Dashboard","version":"1.0.0","description":"Animated real-time data dashboard with bar chart, line chart, donut chart, and live metrics. HTML5 Canvas, dark theme, 60fps.","tags":["canvas","visualization","dashboard","html"],"standard":"agentskills.io","standard_version":"1.0","content_checksum":"9da32e9b2dc4d62b6116ff94c0955c6c2f547abdd685cf4c0b6f2356032bde9a","bundle_checksum":"4dee93fa6a3133e90a3f9b6dd171473f7f26d2fe8ff5daf9ef2d88078852603c","metadata":{"runtime":{"language":"html","entrypoint":"dashboard.html","timeout_seconds":30},"dependencies":{"system":["browser"]}},"files":[{"path":"dashboard.html","name":"dashboard.html","mime_type":"text/html","checksum":"70b8c9843b66ddc1ed4781abd7fb123262c10cf44275b5a833973b8e0a48f059"},{"path":"README.md","name":"README.md","mime_type":"text/markdown","checksum":"b98d1a4eb543f5aeb174873467921a958a8a5659bffe1eb865a1323575307356"}]},"files":{"SKILL.md":"# Canvas Data Dashboard\n\n> **Difficulty:** Intermediate | **Runtime:** HTML5 Canvas | **Output:** Interactive visualization\n\nTeach an AI agent to generate a real-time animated data dashboard with multiple chart types, smooth transitions, and a dark theme.\n\n## What You'll Build\n\nA self-contained HTML file rendering an animated dashboard with:\n- Animated bar chart with value labels and smooth height transitions\n- Real-time line chart with scrolling data points\n- Donut/ring chart with percentage labels\n- FPS counter and live data feed simulation\n- Dark theme with neon accent colors\n\n## Core Concepts\n\n### 1. Canvas Rendering Pipeline\n\nThe dashboard uses a single `requestAnimationFrame` loop to render all charts:\n\n```javascript\nfunction render(timestamp) {\n ctx.clearRect(0, 0, width, height);\n drawBarChart(ctx, data.bars);\n drawLineChart(ctx, data.timeSeries);\n drawDonutChart(ctx, data.categories);\n drawFPS(ctx, timestamp);\n requestAnimationFrame(render);\n}\n```\n\n### 2. Smooth Transitions\n\nBar heights interpolate toward target values using lerp:\n\n```javascript\ncurrent += (target - current) * 0.08; // ease toward target\n```\n\n### 3. Color Palette\n\nUse HSL with fixed saturation/lightness for consistent neon look:\n- Primary: `hsl(270, 80%, 65%)` — purple\n- Accent: `hsl(170, 80%, 55%)` — teal\n- Warn: `hsl(40, 90%, 60%)` — amber\n- Grid: `rgba(255,255,255,0.08)`\n\n## Teaching Points\n\n- Canvas coordinate system and transforms\n- `requestAnimationFrame` for 60fps rendering\n- Lerp-based animation for smooth transitions\n- Drawing arcs for donut charts\n- Text measurement and alignment on canvas","dashboard.html":"\n\n\n\n\nData Dashboard\n\n\n\n

\n\n\n","README.md":"# Canvas Data Dashboard\n\nAn animated real-time data dashboard built with HTML5 Canvas.\n\n## Features\n- Animated bar chart with smooth lerp transitions\n- Scrolling line chart with gradient fill\n- Donut chart with percentage labels\n- Live metrics panel with random data simulation\n- 60fps rendering with FPS counter\n- Dark theme with neon accent colors\n\n## Run\nOpen `dashboard.html` in any modern browser. No dependencies required.\n"}}