A2UI Catalog GitHub ↗
a2uicatalog · Vol. 19 LIVE_ARTIFACT

20 D3 chart atoms, and a morph from one chart to another

2026-10-27 2 min read series a2uicatalog · Vol 19 build 8095cce

Models can hand-roll any UI. Organisations can't review, secure and maintain all of it. That's the case for declarative protocols, so I've been building around A2UI, Google's open protocol where agents output declarative JSON and the client handles deterministic component rendering.

The latest drop to the A2UI Atomic Catalog adds 20 chart atoms built on D3, plus a morph atom that animates one chart into another.

A team budget as JSON becomes a treemap. Each edit to one line morphs it into a sunburst, a circle pack, a treemap and a sunburst again. The film ends on the 20 D3 chart atoms. The captions read "Type a schema. Get a chart." and "Edit a line. The chart morphs."

Morph one chart into another with a JSON patch

You send a chart schema, a treemap for example. Then you patch a single line with RFC 6902:

json
{"op": "replace", "path": "/type", "value": "sunburst"}

The client moves every element to its new place, matched by data key. That one line renders byte for byte the same as sending the whole sunburst. Any atom with data keys can morph into any other: 14 today, including 10 of the D3 charts, and keys are rolling out across the rest of the catalogue. The morph atom is motion_transition.

The 20 D3 chart atoms

sankey_flow, treemap, histogram, box_plot, waterfall, sunburst, chord_diagram, circle_pack, arc_diagram, contour_plot, voronoi, candlestick_chart, parallel_coords, ternary_plot, quiver, choropleth_map, geo_map, polar_chart, histogram2d and scatter_matrix.

D3 is Mike Bostock's open-source library. The layouts and scales come from ports of its modules, computed on the server, and the catalogue's third-party notices credit them. Everything is exposed through MCP for agent integration.

Try it