Data vizNewv1.0.0
Year in Blocks
A year of days you can pick up, fold into a skyline, and play.
A GitHub-style heat map of your year that folds into a 3D skyline, then turns into two small arcade games on the same grid. One canvas scene, no chart library, and every colour read from the page's own theme.
A year in blocks
Live previewHover a day · drag the skyline · try the games
What it does
One scene, two views: the flat heat map folds into an isometric skyline, and back.
The same grid becomes breakout or a fighter-jet shooter, with sound and a score row.
Hover, tap, or arrow-key any day for its count; streaks and the busiest day highlight the grid.
Month and weekday labels hold a contrast floor on every theme stop.
Drag to orbit in 3D; double-click or press 2D to reset.
Reduced-motion, keyboard, and screen-reader paths are built in, not bolted on.
Props
data | { date: string; count: number }[] | — | One entry per day. Repeated dates add up. Omit for a seeded sample year. |
view | "2d" | "3d" | — | Controlled view. Pair with onViewChange. |
defaultView | "2d" | "3d" | "2d" | Uncontrolled starting view. The skyline rises on first scroll into sight. |
onViewChange | (view: "2d" | "3d") => void | — | Fires whenever the visitor changes the view. |
palette | "github" | "halloween" | "ocean" | "ember" | "grape" | "mono" | string[] | { light: string[]; dark: string[] } | "github" | A preset, four colours, or a light/dark pair of four-colour ramps. |
unit / unitPlural | string | "contribution" | The noun used in the tooltip, stats, and screen-reader summary. |
heightScale | number | 1 | Multiplies bar heights in the 3D view. |
showStats / showLegend / showToggle | boolean | true | Turn the stats row, legend, or view switcher off for a quieter embed. |