Data
Line charts, donuts, bar races, goal meters, versus splits, timelines, funnels, world maps and flight routes — data that moves, in any brand, any aspect.
← All packs · 9 items · data/
Line chart
data/line-chartA line draws on through its points over a soft area, each point popping as the line reaches it, the last value called out, against an optional target.
volito render data/line-chart --prop title="Weekly views since the switch" --prop suffix="K" --out line-chart.mov| Prop | Type | Default | Takes |
|---|---|---|---|
title | text | Weekly views since the switch | ≤ 56 chars |
rows · Rows (Label: value) | list | {"label":"W1","value":12}; {"label":"W2","value":18}; {"label":"W3","value":16}; {"label":"W4","value":27}; {"label":"W5","value":34}; {"label":"W6","value":31}; {"label":"W7","value":46}; {"label":"W8","value":58} | — |
prefix · Before numbers | text | — | ≤ 3 chars |
suffix · After numbers | text | K | ≤ 6 chars |
decimals | number | 0 | 0 – 3 |
target · Target line (0 = none) | number | 40 | 0 – 1000000000000 |
targetLabel · Target label | text | Goal | ≤ 16 chars |
Parts (each takes any move with --motion): ground the ground, title the heading, grid the gridlines and axis labels, area the area under the line, line the line, dots the points, label the last value's callout, target the target line.
Donut chart
data/donutSegments sweep round a ring one after another, the centre counts up to the total (or the first share), and a legend lists each part.
volito render data/donut --prop title="Where the hours went" --prop centerLabel="on editing" --out donut.mov| Prop | Type | Default | Takes |
|---|---|---|---|
title | text | Where the hours went | ≤ 50 chars |
rows · Rows (Label: value) | list | {"label":"Editing","value":46}; {"label":"Rendering","value":12}; {"label":"Review","value":18}; {"label":"Publishing","value":9} | — |
center · Centre shows | choice | first share | total | first share |
centerLabel · Centre label | text | on editing | ≤ 20 chars |
prefix · Before numbers | text | — | ≤ 3 chars |
suffix · After numbers | text | h | ≤ 6 chars |
decimals | number | 0 | 0 – 3 |
Parts (each takes any move with --motion): ground the ground, title the heading, ring the segments, center the number in the middle, legend the legend.
Bar chart race
data/bar-raceRanked bars grow and overtake each other as the periods advance; the axis rescales and the period counts up in the corner.
volito render data/bar-race --prop title="Most-used editing tools" --prop suffix="K" --out bar-race.mov| Prop | Type | Default | Takes |
|---|---|---|---|
title | text | Most-used editing tools | ≤ 50 chars |
periods | list | 2022; 2023; 2024; 2025; 2026 | — |
rows · Rows (Name: v1, v2, …) | list | {"label":"MONARC","values":"4, 14, 38, 72, 118"}; {"label":"Studio A","values":"60, 66, 70, 71, 72"}; {"label":"Cutter","values":"40, 48, 52, 50, 46"}; {"label":"Frame.io","values":"22, 30, 41, 47, 51"}; {"label":"Clipmate","values":"35, 30, 24, 20, 18"}; {"label":"Reelsy","values":"8, 20, 33, 44, 49"} | — |
show · Bars shown | number | 6 | 3 – 10 |
prefix · Before numbers | text | — | ≤ 3 chars |
suffix · After numbers | text | K | ≤ 6 chars |
decimals | number | 0 | 0 – 3 |
Parts (each takes any move with --motion): ground the ground, title the heading, bars the bars, period the period in the corner.
Goal meters
data/goalsRows of capsule meters fill to their share of a goal, each with its label and a percentage counting up.
volito render data/goals --prop title="Launch checklist" --out goals.mov| Prop | Type | Default | Takes |
|---|---|---|---|
title | text | Launch checklist | ≤ 50 chars |
rows · Rows (Label: percent) | list | {"label":"Footage cut","value":100}; {"label":"Captions","value":85}; {"label":"Colour grade","value":60}; {"label":"Sound mix","value":35} | — |
Parts (each takes any move with --motion): ground the ground, title the heading, rows each meter.
Versus
data/versusTwo sides face off: a label and a big number counting up on each, a VS badge popping between them and a split bar settling to their ratio.
volito render data/versus --prop title="Hours to publish one video" --prop left="Before" --out versus.mov| Prop | Type | Default | Takes |
|---|---|---|---|
title | text | Hours to publish one video | ≤ 50 chars |
left | text | Before | ≤ 20 chars |
leftValue · Left value | number | 9.5 | 0 – 1000000000000 |
right | text | With MONARC | ≤ 20 chars |
rightValue · Right value | number | 1.5 | 0 – 1000000000000 |
prefix · Before numbers | text | — | ≤ 3 chars |
suffix · After numbers | text | h | ≤ 6 chars |
decimals | number | 1 | 0 – 3 |
Parts (each takes any move with --motion): ground the ground, title the heading, left the left side, right the right side, badge the VS badge, split the split bar.
Timeline
data/timelineMilestones along a line that draws itself: each date's dot pops as the line reaches it and its words rise beside it.
volito render data/timeline --prop title="How we got here" --out timeline.mov| Prop | Type | Default | Takes |
|---|---|---|---|
title | text | How we got here | ≤ 50 chars |
rows · Milestones (When: what) | list | {"when":"2019","what":"First edit in a garage"}; {"when":"2021","what":"Studio opens in Lisbon"}; {"when":"2023","what":"100 creators on board"}; {"when":"2025","what":"The AI editor ships"}; {"when":"2026","what":"Volito goes open"} | — |
Parts (each takes any move with --motion): ground the ground, title the heading, line the line, dots the dots, labels the dates and words.
Funnel
data/funnelStages stack from widest to narrowest, each dropping in with its count, and the share that carries on to the next stage between them.
volito render data/funnel --prop title="From view to sign-up" --out funnel.mov| Prop | Type | Default | Takes |
|---|---|---|---|
title | text | From view to sign-up | ≤ 50 chars |
rows · Stages (Label: count) | list | {"label":"Watched","value":120000}; {"label":"Clicked","value":18400}; {"label":"Tried it","value":6200}; {"label":"Signed up","value":2480} | — |
prefix · Before numbers | text | — | ≤ 3 chars |
suffix · After numbers | text | — | ≤ 6 chars |
decimals | number | 0 | 0 – 3 |
Parts (each takes any move with --motion): ground the ground, title the heading, stages each stage, rates the share between stages.
World map
data/world-mapA world map in the brand's colours: chosen countries fill in one by one (shaded by their values when given) and the top ones are labelled. Zooms to a region.
volito render data/world-map --prop title="Where our viewers are" --prop suffix="%" --out world-map.mov| Prop | Type | Default | Takes |
|---|---|---|---|
title | text | Where our viewers are | ≤ 50 chars |
countries · Countries (Name: value) | list | {"name":"India","value":42}; {"name":"United States","value":31}; {"name":"Brazil","value":18}; {"name":"United Kingdom","value":12}; {"name":"Indonesia","value":11}; {"name":"Germany","value":9}; {"name":"Nigeria","value":7}; {"name":"Japan","value":6} | — |
region | choice | world | world | americas | europe | africa | asia | middle east | oceania | india |
labels · Countries labelled | number | 4 | 0 – 12 |
prefix · Before numbers | text | — | ≤ 3 chars |
suffix · After numbers | text | % | ≤ 6 chars |
decimals | number | 0 | 0 – 3 |
Parts (each takes any move with --motion): ground the ground, title the heading, map the map, highlights the chosen countries, labels the labels.
Flight route
data/flightA map frames two places; a route arcs from one to the other along the great circle while a plane flies it, and both ends are pinned and named.
volito render data/flight --prop from="Lisbon" --prop fromAt="38.72, -9.14" --out flight.mov| Prop | Type | Default | Takes |
|---|---|---|---|
from · From (name) | text | Lisbon | ≤ 24 chars |
fromAt · From (lat, lon or country) | text | 38.72, -9.14 | ≤ 32 chars |
to · To (name) | text | Mumbai | ≤ 24 chars |
toAt · To (lat, lon or country) | text | 19.08, 72.88 | ≤ 32 chars |
note | text | 8,154 km · 9 h 40 m | ≤ 32 chars |
Parts (each takes any move with --motion): ground the ground, map the map, route the route, plane the plane, pins the two pins and names, note the note.