mark-01-glyph.B

Arm

B · with a skill

Method

craft + explicit custom-mark brief

Mode

from-scratch — each arm generated independently from the same brief

Fixture

hero8

Runs

1 · shipped: only

Generated

2026-07-26

Verbatim prompt

Apply the project's custom-mark craft technique to this task.

Design a custom mark for each datum rather than using a default rect or circle.
The mark's form should be built from SVG primitives you compose yourself.

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.

Structural change vs the default arm

Added: clipPath, defs, ellipse, g. Removed: nothing.