DevTools · AI-ready · Open source
A framework-agnostic chart engine with first-class DevTools, an AI-readable ChartContext on every chart, and one TypeScript API across SVG, Canvas, and WebGPU - for React, Vue, Svelte, Angular, or plain web components.
A real DevTools panel: live state, layout, render and hit-testing, render diffs, profiling, and accessibility audits.
Every chart emits a structured ChartContext - a plain-language summary an AI agent can read and drive over MCP.
That same context is a true text alternative for screen readers. Built in, not bolted on.
Forecasting, anomaly detection, and narration run in the browser. No server, no upload. MIT-licensed.
Every block below is a real michi-vz chart (a line, a scatter, a radar, an area), fed data until it turned into Michi, our cat in Geneva. The serious reasons start right below.
Seventeen chart types, from stacked bars to gap charts to the fountain, drawn by one engine. Here are the six ideas michi-vz cares about most, each one a live chart, not a screenshot.
The sentence beside this chart was written by the chart itself. Every michi-vz chart emits a structured ChartContext that an AI agent can query, a screen reader can speak, and a test can assert on. Pixels for people, structure for everything else.
How machines read these charts →Developer experience at the core
Build charts in minutes, inspect them in seconds, and scale from prototype to production on one API. Pick a chart by the question you are asking - every card is a live component on real data.
Trends over time across one or many series. The dashed run is a gap in the data (detectGaps).
A forecast fan: history, a dashed forecast median, and nested confidence bands that widen with the horizon.
Part to whole over time: how each component's share of a stacked total shifts.
The relationship between two numeric variables; bubble size encodes a third.
Min to max bands per series: forecasts, confidence intervals, or observed ranges.
Stacked columns per period, linked by ribbons that trace each category over time.
Compare several entities across a shared set of axes at a glance.
Stacked vertical bars per category, with an explicit missing-data guard.
Two overlaid horizontal sub-bars per label: a based vs compared value.
Two full-bandwidth overlapping columns per category, with a change arrow above each pair - the vertical sibling of Comparable Bar.
Diverging bars from a centre line: population pyramids and tornado charts.
Cumulative horizontal segments per row with end-cap circles at each step.
Two values per label joined by a gap bar that emphasises the difference.
Hierarchical tiles sized by value; each splits into two parts (e.g. realized vs untapped). Falls back to a stack on narrow screens.
Slices sized by share of a whole; set innerRadiusRatio for a donut. Per-slice % labels and an optional legend.
One concentric ring per item, each sweeping value/max of a full circle over a track. Hover activates a ring; the centre reads out its value.
Circles sized by value, pulled into a cluster by gravity; each can split into a realized core inside a lighter untapped ring.
Flows between nodes laid out in columns; each band's thickness is the flow value. Built on d3-sankey.
A Jet d'Eau: the big dot is the usual value, the fountain runs from the lowest to the highest, and each small dot is one real measurement you can count. Categorical x = snapshot, temporal x = trend.
A world/region choropleth: your own GeoJSON, shaded by a threshold colour scale or an explicit category map. 13 d3-geo/d3-geo-projection projections.
A force-de-overlapped bubble map: you supply lng/lat per item, a one-shot simulation pulls overlapping circles apart. An optional muted backdrop landmass is available; dot-only by default.
A radial cluster()/dendrogram: leaves sit equidistant from the centre, with circles sized at both the group and leaf level. Labels adapt (abbreviate, rotate, or hide) as leaf density grows.
Good to know
There is indeed a cat in Geneva named Michi. Every project in this workshop is named after Michi, and this is Michi's contribution: sleeping through the code review, then taking the credit.
