無料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（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.

日本語の概要は準備中です。原文の説明を表示しています。