workflow-visualize-data

What problem does it solve?

Helios workflows solve the challenge of turning raw datasets into engaging, time-aware visual animations within the Helios ecosystem, reducing manual setup and scripting time.

Core Features & Use Cases

• Library-agnostic visualization options: D3.js for charts, P5.js for generative visuals, Three.js for 3D data, and Vanilla Canvas for high-performance rendering.
• Data preparation and ingestion: load JSON or CSV datasets and bind them to visual states.
• Time-to-data mapping: progressive reveal by mapping currentFrame and fps to the visible data.
• Interactivity and dynamic control: react to inputProps to adjust themes, datasets, or animation parameters.
• Use Case: build dashboards that animate transitions, explain data stories with time-based visuals, or teach data concepts interactively.

Quick Start

Start by selecting a library and placing your dataset into data.json or data.csv in the skill directory. Create a Helios composition that subscribes to the Helios timeline and computes progress as currentFrame / (duration * fps). Render the appropriate data slice and update visuals as the animation progresses, with optional runtime controls via inputProps.