feat(d3): implement swarm-basic

[github-actions]

Implementation: swarm-basic - javascript/d3

Implements the javascript/d3 version of swarm-basic.

File: plots/swarm-basic/implementations/javascript/d3.js

Parent Issue: #974

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1), not pure white. Bold dark title "swarm-basic · javascript · d3 · anyplot.ai" centered at top. Dark-ink axis labels "Treatment Group" (x) and "CRP Biomarker Level (mg/L)" (y, rotated) are both clearly legible, as are the soft-gray tick labels on both axes. Subtle horizontal (y-axis only) gridlines are barely visible and don't compete with data. Four beeswarm clusters — Placebo (green #009E73), Low Dose (lavender), Medium Dose (blue), High Dose (ochre) — each with a thin semi-transparent median line, showing a clear descending CRP trend across dose groups. All text is readable against the light background; no light-on-light issues.

Dark render (plot-dark.png): Warm near-black background (#1A1A17), not pure black. Title and axis labels render in light/white text, clearly visible; tick labels are soft light gray and fully readable; gridlines and median lines are subtle light tints, still visible. The four category colors are identical to the light render (green/lavender/blue/ochre) — confirming only chrome (background, text, grid, stroke) adapts to theme, not the data colors. No dark-on-dark failures observed; all text remains legible.

Both paragraphs confirmed above — both renders viewed and checked for theme legibility.

Score: 92/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	15	20
Spec Compliance	15	15
Data Quality	14	15
Code Quality	10	10
Library Mastery	9	10
Total	92	100

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — all font sizes explicitly set, readable in both themes, title well within proportion bounds
• VQ-02: No Overlap (6/6) — no text overlap anywhere
• VQ-03: Element Visibility (5/6) — well-sized markers; the densest sub-cluster (Low Dose median region) has some points touching despite the pageBg stroke
• VQ-04: Color Accessibility (2/2) — Imprint palette is CVD-safe, stroke adds definition
• VQ-05: Layout & Canvas (4/4) — good fill and balanced margins, nothing cut off
• VQ-06: Axis Labels & Title (2/2) — descriptive with units
• VQ-07: Palette Compliance (2/2) — canonical Imprint order, identical across themes, theme-correct chrome

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (5/8) - Median markers and clean grouping show design thought beyond a bare default, but relies mostly on the mandated palette without a secondary distinguishing flourish
• DE-02: Visual Refinement (6/6) - Full decoration-removal compliance: L-shaped spines, tick marks removed, subtle y-only grid, generous whitespace, no redundant legend
• DE-03: Data Storytelling (4/6) - Dose-response trend immediately visible via ordering + median lines, but no explicit annotation quantifying the effect

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — correct force-simulation beeswarm layout
• SC-02: Required Features (4/4) — overlap-avoiding spread, consistent size, color-coded categories, median markers
• SC-03: Data Mapping (3/3) — category on x, value on y
• SC-04: Title & Legend (3/3) — exact title format, no legend needed (x-axis already labels categories)

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — varied means/spread/outliers per group; shapes are roughly similar unimodal rather than distinctly varied
• DQ-02: Realistic Context (5/5) — neutral, plausible clinical-trial biomarker scenario
• DQ-03: Appropriate Scale (4/4) — realistic CRP mg/L values and dose-response magnitude

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — linear script; tiny LCG/gaussian helpers are necessary for deterministic data, not over-structuring
• CQ-02: Reproducibility (2/2) — fixed-seed LCG
• CQ-03: Clean Imports (2/2) — no imports beyond provided d3 global
• CQ-04: Code Elegance (2/2) — appropriate complexity, no fake UI
• CQ-05: Output & API (1/1) — correct mount-node contract, no animation, current d3 join API

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — expert use of scales, axes, and data-join pattern
• LM-02: Distinctive Features (4/5) - d3.forceSimulation (forceX + forceCollide) for beeswarm layout is a hallmark D3-native technique

Score Caps Applied

• None

Strengths

• Idiomatic D3 beeswarm layout via d3.forceSimulation with forceX + forceCollide, pinning fy to the value scale and clamping resolved x back into each category band so groups never bleed into neighbors — the canonical D3-native approach to swarm plots
• Subtle median marker per category reveals the dose-response trend at a glance without clutter
• Data domain hugs the value range (not zero-anchored) with a documented rationale, using the full canvas for the actual spread of values
• Full Decoration Removal Checklist compliance: spines reduced to L-shape, tick marks removed, y-only subtle gridlines, no redundant legend
• Correct Imprint palette in canonical order, identical across light/dark, theme-correct chrome throughout
• Deterministic fixed-seed LCG + Box-Muller data generation, fully in-memory
• Realistic clinical-trial biomarker context with a clear, real dose-response story

Weaknesses

• No explicit callout/annotation quantifying the dose-response effect (e.g. "% reduction vs. placebo") — would push Data Storytelling further
• The Low Dose group's central cluster around its median is dense enough that some points partially merge despite the pageBg stroke — slightly smaller radius or more collision padding would keep every point crisply distinguishable in the densest region
• Aesthetic sophistication leans mainly on the mandated system palette and a single median-line accent; a secondary refinement would lift it toward publication-tier polish

Issues Found

1. VQ-03 MINOR: Low Dose group's densest sub-cluster has some marker overlap
   • Fix: Slightly reduce radius or increase forceCollide padding for tighter, cleaner separation in high-density regions
2. DE-03 MINOR: No explicit annotation of the dose-response magnitude
   • Fix: Consider an optional small text callout noting the placebo-to-high-dose delta, if it doesn't clutter the layout

AI Feedback for Next Attempt

This is a strong, well-executed implementation — no changes required to merge. If iterating further for polish: tighten collision padding in the densest sub-cluster (Low Dose) for crisper point separation, and consider a subtle callout quantifying the dose-response trend to push Data Storytelling from good to excellent.

Verdict: APPROVED