Motion Bubble Timeline
trend
Motion Bubble Timeline
Bubbles glide, resize, and regroup across periods to reveal multivariate change over time.
Use this template●Guide 06
Build motion bubbles, sunbursts, networks, and Gantt charts
step by step.
These four charts answer different questions and require different row shapes. Learn the exact schema for time-varying bubbles, hierarchical paths, weighted links, and scheduled tasks, then preview how each structure moves.
Motion Bubble Timeline
At a glance What you will learn
From clean data to a chart ready to publish.
- Model each chart with its native row shape
- Keep hierarchy paths and network endpoints consistent
- Validate periods, weights, ranges, and progress
- Preview every frame before export
CSV Data guide
Build it with the right data shape
Use this chart-ready schema as your starting point. Replace the sample rows, keep the column structure, and preview the full animation before export.
- Best for
- Bubbles glide, resize, and regroup across periods to reveal multivariate change over time.
- Required columns
EntityPeriodXYSize- What one row means
- One entity at one period, with X and Y coordinates plus a numeric bubble size. Repeat each entity for every period.
Three-step workflow
- 1
Keep the header names and column order shown above.
- 2
Add one observation per row and keep names, units, and periods consistent.
- 3
Preview every frame, then tune labels, density, and animation timing.
Motion Bubble TimelineLocalized CSV example
Entity,Period,X,Y,Size
North,2021,22,64,38
South,2021,48,36,62
East,2021,71,72,44
West,2021,84,28,26
North,2022,31,69,46
South,2022,52,43,70
East,2022,66,78,51
West,2022,77,35,34
North,2023,39,75,58
South,2023,59,51,77
East,2023,72,83,63
West,2023,69,44,42
North,2024,47,81,72
South,2024,66,60,86
East,2024,79,88,75
West,2024,61,53,55CSV Data guide
Build it with the right data shape
Use this chart-ready schema as your starting point. Replace the sample rows, keep the column structure, and preview the full animation before export.
- Best for
- Nested rings sweep outward from the center to show hierarchical composition and contribution.
- Required columns
PathValue- What one row means
- One leaf path and its value. Separate hierarchy levels with a forward slash, for example Product/Core/Search.
Three-step workflow
- 1
Keep the header names and column order shown above.
- 2
Add one observation per row and keep names, units, and periods consistent.
- 3
Preview every frame, then tune labels, density, and animation timing.
Animated SunburstLocalized CSV example
Path,Value
Product/Core/Search,28
Product/Core/Workspace,22
Product/Growth/Automation,18
Product/Growth/Insights,14
Services/Advisory/Strategy,12
Services/Advisory/Research,9
Services/Delivery/Launch,16
Services/Delivery/Support,11
Partners/Platform/Cloud,13
Partners/Platform/Data,8CSV Data guide
Build it with the right data shape
Use this chart-ready schema as your starting point. Replace the sample rows, keep the column structure, and preview the full animation before export.
- Best for
- Weighted relationships draw into a relaxed network as connected nodes settle into place.
- Required columns
SourceTargetWeight- What one row means
- One directed connection from Source to Target. Weight controls link strength and influences node emphasis.
Three-step workflow
- 1
Keep the header names and column order shown above.
- 2
Add one observation per row and keep names, units, and periods consistent.
- 3
Preview every frame, then tune labels, density, and animation timing.
Force NetworkLocalized CSV example
Source,Target,Weight
Product,Design,8
Product,Engineering,10
Product,Research,6
Design,Brand,4
Design,Growth,5
Engineering,Data,7
Engineering,Platform,9
Research,Data,5
Growth,Sales,6
Sales,Support,4
Platform,Support,5
Data,Insights,7
Insights,Growth,3CSV Data guide
Build it with the right data shape
Use this chart-ready schema as your starting point. Replace the sample rows, keep the column structure, and preview the full animation before export.
- Best for
- Project bars build across a shared timeline with progress fills and sequenced task reveals.
- Required columns
TaskStartEndProgress- What one row means
- One task with numeric start and end positions plus progress from 0 to 100. End must be greater than start.
Three-step workflow
- 1
Keep the header names and column order shown above.
- 2
Add one observation per row and keep names, units, and periods consistent.
- 3
Preview every frame, then tune labels, density, and animation timing.
Animated Gantt TimelineLocalized CSV example
Task,Start,End,Progress
Research,0,3,100
Strategy,1,5,92
UX design,3,8,78
Prototype,5,10,65
Engineering,7,15,48
QA,13,17,32
Launch,16,20,1201 Tutorial
Follow the workflow
Work through the steps in order for a new chart, or use them as a review checklist for an existing animation.
- 01
Choose the relationship before the visual
Use motion bubbles for entities changing across several measures and periods, sunbursts for nested composition, force networks for weighted relationships, and Gantt timelines for tasks across a shared schedule.
- 02
Structure a motion bubble table
Create Entity, Period, X, Y, and Size columns. Add one row per entity-period state and repeat each entity for every period so the renderer can interpolate its position and size.
- 03
Encode a sunburst hierarchy
Create Path and Value columns. Write one leaf path per row, separate hierarchy levels with forward slashes, and keep segment names identical wherever branches should merge.
- 04
Describe a weighted network
Create Source, Target, and Weight columns. Each row is one directed edge; consistent node names join edges into the same node and weight controls connection emphasis.
- 05
Build a Gantt schedule
Create Task, Start, End, and Progress columns. Use numeric positions on one shared scale, keep End greater than Start, and use a progress value from 0 to 100.
- 06
Validate the complete animation
Scrub or play every frame. Check that identities persist, hierarchy branches merge correctly, network labels stay readable, task ranges are valid, and the final frame communicates the intended conclusion.
02 Visual examples
Try these chart templates
Compare the motion and reading pattern before committing to a format. Each example opens as an editable, data-driven chart.
Animated Sunburst
share
Animated Sunburst
Nested rings sweep outward from the center to show hierarchical composition and contribution.
Use this templateForce Network
comparison
Force Network
Weighted relationships draw into a relaxed network as connected nodes settle into place.
Use this templateAnimated Gantt Timeline
trend
Animated Gantt Timeline
Project bars build across a shared timeline with progress fills and sequenced task reveals.
Use this template03 Apply it
Related use cases
04 FAQ
Common questions
Can I use dates instead of numbers in the Gantt template?
The current template expects numeric positions on a shared timeline. Convert dates to a consistent offset such as days or weeks, and state that unit in the title or subtitle.
Why do sunburst branches or network nodes appear twice?
Names must match exactly. Normalize capitalization and whitespace, and reuse the same path segment, Source, or Target spelling whenever items should merge.
How many rows should I animate?
Start with the smallest set that supports the story. Dense networks, deep hierarchies, and many bubble entities can make labels difficult to follow, especially on mobile or short-form video.