refine — the treated arms ran on the default arm's output, so the only difference is the lever
Fixture
hero8
Runs
3 · shipped: median
Generated
2026-07-26
Verbatim prompt
Here is a dataset:
{
"name": "hero8",
"source": "https://science.nasa.gov/solar-system/planets/",
"fetched": "2026-07-25",
"baseline": 0,
"unit": "km (diameter), AU (distance)",
"colorNote": "colors are a designed 8-hue set for mark-craft demos, not an encoding of any measure",
"rows": [
{ "label": "Mercury", "size": 4879, "distance": 0.39, "color": "#8c7b6b" },
{ "label": "Venus", "size": 12104, "distance": 0.72, "color": "#d9a35b" },
{ "label": "Earth", "size": 12756, "distance": 1.00, "color": "#2c7bb6" },
{ "label": "Mars", "size": 6792, "distance": 1.52, "color": "#c1440e" },
{ "label": "Jupiter", "size": 142984, "distance": 5.20, "color": "#b07d52" },
{ "label": "Saturn", "size": 120536, "distance": 9.58, "color": "#c9b47a" },
{ "label": "Uranus", "size": 51118, "distance": 19.20, "color": "#78c6d0" },
{ "label": "Neptune", "size": 49528, "distance": 30.05, "color": "#3f5ea8" }
]
}
It is the eight planets, with equatorial diameter in km and mean distance from the Sun in AU.
Write a chart of it as an ES module with exactly this shape:
export const meta = { fixture: "hero8", width: 640, height: 400 };
export function render(svg, data) { /* mutate the passed <svg> element in place */ }
`data` is the object above. You get a real <svg> element in a jsdom document —
use svg.ownerDocument and createElementNS, or a d3 selection over it. No
network. No Date.now() or Math.random(). Return only the module code.