Activity heatmap

A calendar heatmap: weeks across, days down, each day shaded by how busy it was, filling in week by week under a total that counts up, with a Less–More key.

data/heatmap
Data
chart
Full frame
6 s (3–30 s)

Activity heatmap at 16:9 — Playing live with volito/browser, the engine a render uses. Each tab lays the item out again for that shape, not a crop.

Render it

npx volito render data/heatmap --prop title="A year of uploads" --prop label="uploads since January" --out heatmap.mov

That writes ProRes 4444. The same item in another shape, brand or format:

volito render data/heatmap --aspect 9:16 --style cobalt --out heatmap-9x16.mov
volito render data/heatmap --format mp4 --out heatmap.mp4
volito still data/heatmap --t 3 --out heatmap.png
volito info data/heatmap     # every prop and part
volito add data/heatmap      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("data/heatmap"), { props: { title: "A year of uploads", label: "uploads since January" }, out: "heatmap.mov" });

Or ask an agent with the MCP server connected: “Render the Volito activity heatmap (data/heatmap) in 9:16, in our brand.”

Props

Set each with --prop name=value, or all at once with --props and a JSON object.

Prop	Type	Default	Takes
`title`	text	A year of uploads	≤ 50 chars
`total`	number	1284	0 – 1000000000
`label` Total label	text	uploads since January	≤ 60 chars
`weeks`	number	26	4 – 53
`seed` Pattern seed	number	3	1 – 999

Parts

Each part takes any move, ease or idle: --motion ground.in=pop.

Part	What it is
`ground`	the ground
`title`	the heading
`total`	the total and its label
`cells`	the day cells
`key`	the day names and key

Tags: chart, heatmap, calendar, activity, streak

Activity heatmap

Render it

Props

Parts

More in Data

Line chart

Donut chart

Bar chart race

Goal meters

Versus

Timeline