CPU Temperature — 30 Days
Daily Raspberry Pi temperature readings visualised as a line + area chart with hover tooltips.
mark: line · temporal$ LOAD_GALLERY --renderer=vega-lite --mode=interactive
Each chart is a standalone Vega-Lite specification embedded in a plain HTML file.
Data lives in /data/*.json —
update the JSON, push to GitHub, and Cloudflare Pages redeploys automatically.
CHART_GALLERY
Available visualisations
HOW_IT_WORKS
Anatomy of a chart
- $schema
- Declares the Vega-Lite version. Enables editor autocomplete and spec validation in the Vega online editor.
- data
{ "url": "..." }loads a JSON or CSV file at runtime. No bundling, no build step.- mark
- The geometric primitive:
line,bar,point,arc,area... - encoding
- Maps data fields to visual channels -
x,y,color,size,tooltip. This is where most of the logic lives. - config
- Global theme - fonts, axis colours, background. Defined once at spec level, applies to all marks.
- vegaEmbed(el, spec, opts)
- The single JS function that compiles the spec and renders it into a DOM element. Three lines of JS is all you need.