본문으로 건너뛰기
cccskills
무료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/

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

archive-broll

무료

Find, preview, cut and credit archival B-roll from the Internet Archive (archive.org) for a Helios video — public-domain, CC BY and CC BY-SA film plus Prelinger Archives. Use when a Helios composition needs real footage as a plate, cutaway, masked fill or texture. Not for generating footage or editing the user's own camera video.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

cinematic-product-promo-plan

무료

End-to-end production plan template for feeling-first cinematic product promos: brief interrogation, 45s beat structure (cold open through brand), hero-element metaphor, storyboard fidelity ladder, visual system (palette, type, camera, texture), motion mix and easing vocabulary, audio and captions, tooling (animatic through HTML or AE), deliverables matrix, accessibility, review milestones, and compromises to accept or refuse. Use when planning, pitching, storyboarding, or producing polished brand films for any SaaS or consumer product—not category-specific; pair with skills/design/animated-video-philosophy for broader motion principles.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

example-canvas

무료

Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

example-chartjs

무료

Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

BintzGavin의 스킬 모두 보기

이 스킬의 문제 신고