/visualize-data

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

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`