메뉴
Workflow for creating data-driven animations. Use when you need to visualize datasets using D3, P5, or other libraries.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | workflow-visualize-data |
| description | Workflow for creating data-driven animations. Use when you need to visualize datasets using D3, P5, or other libraries. |
This workflow guides you through creating data-driven animations in Helios.
Load your data (JSON, CSV) and ensure it is available when the composition starts.
// Load data
import rawData from './data.json';
The core concept is to map the current animation time (or progress) to your data state.
Linear Interpolation:
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):
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);
});
If you need inputProps to control the visualization (e.g., changing datasets or color themes):
helios.subscribe((state) => {
const { theme } = state.inputProps;
updateColors(theme);
});
example-d3-animationexample-p5-animationexample-threejs-animationCollection 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.
Core API for Helios video engine. Use when creating compositions, managing timeline state, controlling playback, or subscribing to frame updates. Covers Helios class instantiation, signals, animation helpers, and DOM synchronization.
Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.
Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.
Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.
Patterns for using Helios with Framer Motion. Use when you want to use Framer Motion's physics and transitions but need frame-perfect synchronization with Helios.