D3 comparison primitives — park for assets/toolkit shelf (parked 2026-05-23)
DARE.CO.UK · PARKED SKETCH · 2026-05-24
Mirrored from ~/.claude/.../memory/parked_sketch_d3_comparison_primitives_2026-05-23.md. This is a design sketch parked for future build — read for context, not as a current deliverable.
D3.js charts as a future web-assets/ primitive. Build when a specific surface earns a genuine “thing vs thing” comparison (vehicle TCO head-to-head, year-over-year spend share, projected-vs-actual). Don’t add speculatively — most portfolio data is sibling-shaped (categories, vehicles, years), not rival-shaped; simple bar+table is plenty.
Dan 2026-05-23: “Yes hold off on D3, some things can be parked for inclusion into our assets/toolkit”
The principle
Most portfolio data is sibling-shaped (Car Fuel · Food Shopping · Hardware — each is its own category, not in competition). For sibling data, a sorted table or simple bar is honest. D3 adds visual noise without analytical lift.
D3 earns its weight when data is rival-shaped — when a specific decision compares A vs B vs C explicitly. Hold the tool back until the surface earns it.
When to build (resume conditions)
A specific surface needs ONE of these comparisons:
| Comparison | Chart type | Where it’d live |
|---|---|---|
| Vehicle TCO head-to-head — LR4 vs BMW vs F-250 (acquisition + running + per-year) | Grouped stacked bar | pa/vehicles/index.html rollup |
| Year-over-year spend share by category — Food Shopping vs Car Fuel vs everything else, 2014→2026 | Streamgraph / stacked area | pa/properties/new-hope/expenses/index.html |
| Projected-vs-actual job completion — Amazon screenshot ETA arc vs actual pace | Two-line overlay (current sparkline is 50% there) | pa/amazon/_status/<job>.html |
| Insurance variance defense — pre-loss vs replacement-quote vs claim-paid per item | Side-by-side bullet | pa/home-insurance/claims/_bulk-source/<claim>/ |
| Audrey eras byte-size growth — KB per year with theme-refresh markers | Annotated line | archive.audreyinc.com/eras/ |
Build shape (when triggered)
| Step | Decision |
|---|---|
| Library | D3 v7 via CDN (https://d3js.org/d3.v7.min.js); no bundler |
| Where | New primitive at xlab-co/toolkit/web-assets/charts/ — one file per chart-type (e.g. vehicle-tco.js, streamgraph.js) |
| Data contract | Each chart reads a data-source attribute pointing at a JSON URL (substrate JSON or per-page inline). Component-shaped: <div data-chart="vehicle-tco" data-source="/vehicles/tco.json"></div> |
| Styling | Inherit portfolio palette via CSS variables; no D3 default colors |
| Doc | README per chart with embed snippet (same pattern as dropzone, media) |
Anti-patterns to avoid
- D3 on a single dataset (use a table)
- D3 on rankings (use a sorted bar — no animation needed)
- D3 with 3+ axes (data is rarely that comparable)
- D3 chart that needs a legend explaining what it shows (means it doesn’t compare cleanly)
Cross-references
feedback_xlab_co_toolkit_web_assets_home.md— where the primitive livesfeedback_simple_charts_disproportional_weight.md— sibling principle (simple beats fancy)feedback_grayscale_thumb_hover_pattern.md— another “small visual primitive” that earned its slotfeedback_smoothed_area_chart_over_time.md— prior chart-pattern guidance
The aphorism
Charts compare. Tables list. Most data lists.