免费在 GitHub 公开

workflow-visualize-data

Workflow for creating data-driven animations. Use when you need to visualize datasets using D3, P5, or other libraries.

中文简介正在准备中。当前显示原文说明。

BintzGavin/helios星标 123(GitHub 123 + cccskills 0)

实测评分未实测

查看安装方法

包含的文件（1）

SKILL.md1.8 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

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.

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

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);
});

4. Handle Interactivity

If you need inputProps to control the visualization (e.g., changing datasets or color themes):

helios.subscribe((state) => {
  const { theme } = state.inputProps;
  updateColors(theme);
});

Related Skills

example-d3-animation
example-p5-animation
example-threejs-animation

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

animated-video-philosophy

免费

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

中文简介正在准备中。当前显示原文说明。