無料GitHub で公開

example-d3-animation

Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.

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

BintzGavin/heliosスター 123(GitHub 123 + cccskills 0)

実行スコア未検証

インストール方法を見る

含まれるファイル（1）

SKILL.md1.7 KB

SKILL.md（原文）

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

D3.js Animation

Integrate D3.js with Helios by driving D3 scales and attributes using the Helios frame/time state.

Quick Start

import { Helios } from '@helios-project/core';
import * as d3 from 'd3';

const helios = new Helios({ duration: 5, fps: 60 });
const svg = d3.select('#chart');

// Data
const data = [10, 20, 30, 40, 50];

// Setup D3
const x = d3.scaleLinear().domain([0, 50]).range([0, 500]);
const bars = svg.selectAll('rect').data(data).enter().append('rect')
  .attr('height', 20)
  .attr('y', (d, i) => i * 25);

// Animate
helios.subscribe(({ currentFrame, fps }) => {
  const time = currentFrame / fps;

  // Update D3 attributes based on time
  bars.attr('width', d => x(d) * Math.min(1, time));
});

Key Patterns

Frame-Driven Scales

Instead of using d3.transition(), use helios.subscribe() to update attributes on every frame. This ensures frame-perfect rendering and seeking.

helios.subscribe((state) => {
  const t = state.currentFrame / (state.duration * state.fps); // 0 to 1

  // Interpolate data
  const interpolatedData = data.map(d => d * t);

  // Re-bind and render
  path.datum(interpolatedData).attr('d', lineGenerator);
});

Common Issues

d3.transition(): Do NOT use d3.transition(). It relies on internal timers that won't sync with Helios's seek/render cycle. Always set attributes directly in the subscription callback.
Performance: For large datasets, consider using Canvas with D3 (d3-force + Canvas API) instead of SVG for better performance.

Source

Example: examples/d3-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.

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