workflow-visualize-data
Workflow for creating data-driven animations. Use when you need to visualize datasets using D3, P5, or other libraries.
Best use case
workflow-visualize-data is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Workflow for creating data-driven animations. Use when you need to visualize datasets using D3, P5, or other libraries.
Teams using workflow-visualize-data should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/visualize-data/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How workflow-visualize-data Compares
| Feature / Agent | workflow-visualize-data | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Workflow for creating data-driven animations. Use when you need to visualize datasets using D3, P5, or other libraries.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Visualize Data
This workflow guides you through creating data-driven animations in Helios.
## 1. Choose Your Library
- **D3.js:** Best for complex charts, graphs, and SVG-based visualizations.
- **P5.js:** Best for generative art, creative coding, and pixel manipulation (Canvas).
- **Three.js:** Best for 3D data visualization.
- **Vanilla Canvas:** Best for high-performance custom visualizations.
## 2. Prepare Your Data
Load your data (JSON, CSV) and ensure it is available when the composition starts.
```typescript
// Load data
import rawData from './data.json';
```
## 3. Map Time to Data
The core concept is to map the current animation time (or progress) to your data state.
**Linear Interpolation:**
```typescript
helios.subscribe(({ currentFrame, duration, fps }) => {
const progress = currentFrame / (duration * fps); // 0 to 1
// Show data up to the current progress
const visibleData = data.slice(0, Math.floor(data.length * progress));
render(visibleData);
});
```
**Scale-Driven (D3):**
```typescript
const timeScale = d3.scaleLinear().domain([0, duration]).range([0, maxX]);
helios.subscribe(({ currentFrame, fps }) => {
const t = currentFrame / fps;
const currentX = timeScale(t);
// Update attributes
d3.selectAll('circle').attr('cx', d => d.x < currentX ? d.x : 0);
});
```
## 4. Handle Interactivity
If you need `inputProps` to control the visualization (e.g., changing datasets or color themes):
```typescript
helios.subscribe((state) => {
const { theme } = state.inputProps;
updateColors(theme);
});
```
## Related Skills
- `example-d3-animation`
- `example-p5-animation`
- `example-threejs-animation`Related Skills
example-podcast-visualizer
Workflow for creating a podcast visualizer with multi-track audio mixing and DOM-based synchronization. Use when building audio-reactive compositions.
helios-skills
Collection of agent skills for Helios video engine. Use when working with programmatic video creation, browser-native animations, or Helios compositions. Install individual skills by path for specific capabilities.
skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
render-video
Workflow for rendering a Helios composition to a video file. Use when you need to automate video production or export a high-quality animation.
create-composition
Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.
helios-studio
Studio tool for developing and previewing Helios compositions. Use when you want to launch the interactive development environment or manage assets.
helios-renderer
Renderer API for generating video/image output from Helios compositions. Use when you need to programmatically render a composition to a file using Node.js.
helios-player
Player API for embedding Helios compositions in web pages. Use when you need to display a composition with playback controls, enable client-side exporting, or support Picture-in-Picture.
guided-testimonial-video
End-to-end guided workflow for creating a social proof or testimonial video. Extracts brand identity from the repo, generates a warm soundtrack, and produces a trust-building motion.dev composition rendered via Helios CLI. Use when making customer testimonial, review highlight, or social proof videos.
guided-social-clip
End-to-end guided workflow for creating a short-form social media clip (Reels, TikTok, Shorts). Extracts brand identity from the repo, generates a punchy soundtrack, and produces a vertical 9:16 motion.dev composition rendered via Helios CLI. Use when making Instagram Reels, TikTok videos, YouTube Shorts, or other vertical short-form content.
motion-design-rules
Motion design framework for programmatic video. Defines anti-slideshow architecture, visual layering, physics-based easing, choreography rules, and quality validation. Reference this skill from any guided video skill.
guided-launch-announcement
End-to-end guided workflow for creating a product launch or release announcement video. Extracts brand identity from the repo, generates a cinematic soundtrack, and produces a reveal-driven motion.dev composition rendered via Helios CLI. Use when making launch announcements, release videos, or product reveals.