feat(highcharts): implement swarm-basic

[github-actions]

Implementation: swarm-basic - javascript/highcharts

Implements the javascript/highcharts version of swarm-basic.

File: plots/swarm-basic/implementations/javascript/highcharts.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-consistent). Bold dark title "swarm-basic · javascript · highcharts · anyplot.ai" at top center. Four treatment groups (Placebo, Low Dose, Med Dose, High Dose) each rendered as a beeswarm of scatter points fanned out to avoid overlap — Placebo in green circles (#009E73), Low Dose in purple diamonds, Med Dose in slate-blue squares, High Dose in amber triangles, matching the Imprint canonical order. A black diamond per group marks the sample mean (legend: "Group mean"), and the means visibly decrease from ~8.0 (Placebo) to ~3.3 (High Dose), showing a clear dose-response trend. All text — title, axis titles ("Treatment Group", "CRP Level (mg/L)"), tick labels, legend — is clearly readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17-consistent). Data colors are pixel-identical to the light render (green/purple/blue/amber), confirming only chrome adapted. Title, axis titles, and tick labels render in light gray/white and are clearly legible; the group-mean diamond switches to white so it stays visible against the dark surface. No dark-on-dark failures observed anywhere.

Both renders pass the theme-readability check with no exceptions.

Score: 87/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — all font sizes explicitly set, well-proportioned in both themes
• VQ-02: No Overlap (6/6) — no overlap in either render
• VQ-03: Element Visibility (5/6) — good marker sizing, slight within-bin overlap in the densest columns
• VQ-04: Color Accessibility (2/2) — color AND marker shape both vary per group, fully CVD-safe
• VQ-05: Layout & Canvas (4/4) — balanced margins, nothing cut off
• VQ-06: Axis Labels & Title (2/2) — descriptive with units
• VQ-07: Palette Compliance (2/2) — correct Imprint order, theme-correct chrome in both renders

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) - Thoughtful color+shape pairing and mean markers, but short of publication-level polish
• DE-02: Visual Refinement (4/6) - X-axis gridlines removed, subtle y-axis grid, minimal legend; axis lines still visible
• DE-03: Data Storytelling (4/6) - Mean-diamond markers create clear visual hierarchy highlighting the dose-response trend

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — genuine beeswarm via binned, fanned-out scatter offsets
• SC-02: Required Features (4/4) — consistent point sizes, clear group spacing, color encoding, group-mean marker
• SC-03: Data Mapping (3/3) — category on x-axis, value on y-axis, all data visible
• SC-04: Title & Legend (3/3) — title format exactly matches mandate; legend appropriately minimal

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — differing spreads and visible outliers alongside the dose-response trend
• DQ-02: Realistic Context (5/5) — CRP biomarker levels across a 4-arm clinical trial, realistic and neutral
• DQ-03: Appropriate Scale (4/4) — physiologically plausible CRP values and trend

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — top-down flow; helper functions justified by the beeswarm algorithm
• CQ-02: Reproducibility (2/2) — seeded mulberry32(42) PRNG
• CQ-03: Clean Imports (2/2) — no imports needed or present
• CQ-04: Code Elegance (2/2) — appropriate complexity, no fake functionality
• CQ-05: Output & API (1/1) — correct mount-node contract, animation disabled on chart and series

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) - Idiomatic scatter-with-categories construction given the core bundle's lack of a native beeswarm series
• LM-02: Distinctive Features (2/5) - Per-group marker symbols and bordered mean-diamond are nice, but not distinctive to Highcharts specifically

Score Caps Applied

• None

Strengths

• Excellent CVD-safe redundant encoding: each treatment group uses both a distinct Imprint palette color AND a distinct marker shape (circle/diamond/square/triangle), so groups stay distinguishable even without relying on hue.
• Correct Imprint palette in canonical order (green → C475FD → 4467A3 → BD8233) identical across both themes; chrome flips correctly light-to-dark with no legibility issues.
• Genuine beeswarm layout algorithm (bin-and-fan-out via beeswarmOffsets) backed by a deterministic seeded mulberry32 PRNG.
• Group mean diamond markers with theme-adaptive fill add a clear at-a-glance dose-response story, fulfilling the spec's suggested mean marker.
• Clean, minimal chrome: x-axis gridlines removed, subtle single y-axis grid, unobtrusive axis lines, no legend clutter.

Weaknesses

• Library Mastery reads as generic: scatter + manual x-offsets is a solid workaround for the missing native beeswarm series, but nothing showcases a Highcharts-distinctive capability beyond marker symbols. Consider a library-specific touch (e.g. dataLabels on the mean markers, or a subtle connector/halo along the swarm axis) to lift LM-02.
• Marker opacity/size (radius 5, opacity 0.85) is static across all four groups even though bin density differs visibly (Placebo and Low Dose are denser near the median than High Dose) — a touch more transparency or gap in the denser groups would ease within-bin overlap reading.
• Design Excellence is strong but not exceptional: axis lines are still visible (not fully removed) and the mean-diamond markers have no additional refinement that would push the chart toward publication-level polish.

Issues Found

1. LM-02 LOW: Generic scatter-based approach without a Highcharts-distinctive flourish
   • Fix: Add a library-specific touch — e.g. dataLabels on the group-mean markers showing the numeric mean, or a subtle Highcharts-native connector/halo technique
2. DE-01/DE-02 MODERATE: Strong but not publication-level polish
   • Fix: Consider removing/lightening the remaining axis lines, and add subtle refinement to the mean-diamond markers (e.g. slight size/border hierarchy) for a more premium finish

AI Feedback for Next Attempt

This is a solid, well-executed swarm plot with correct palette compliance, strong data storytelling via the mean markers, and excellent CVD-safe redundant color+shape encoding. To close the gap to 90+: (1) add a Highcharts-distinctive flourish to lift Library Mastery beyond generic scatter usage — e.g. numeric dataLabels on the mean markers; (2) push Design Excellence further with a touch more visual refinement (lighter/removed axis lines, subtle hierarchy on the mean markers); (3) consider slightly increasing transparency or swarm gap in the densest bins (Placebo, Low Dose) for marginally better within-bin separation.

Verdict: REJECTED

[github-actions]

🔧 Repair Attempt 1/4

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1-consistent). Bold dark title "swarm-basic · javascript · highcharts · anyplot.ai" centered at top. Four treatment groups (Placebo, Low Dose, Med Dose, High Dose) rendered as beeswarms of scatter points fanned out to avoid overlap — Placebo in green circles (#009E73), Low Dose in light-purple diamonds, Med Dose in slate-blue squares, High Dose in amber triangles, matching the Imprint canonical order. A black diamond per group marks the sample mean, now labeled with its numeric value (8.0, 6.3, 4.9, 3.3) — the descending sequence makes the dose-response trend immediately visible. Marker opacity is tuned per group's density to ease within-bin overlap. All text — title, axis titles, tick labels, mean-value labels, legend — is clearly readable against the light background, with no overlap between labels and data points.

Dark render (plot-dark.png): Warm near-black background (#1A1A17-consistent). Data colors are pixel-identical to the light render, confirming only chrome adapted. Title, axis titles, and tick labels render in light gray/white and are clearly legible; the group-mean diamond and its numeric label switch to a cream/white fill with a dark text outline, remaining crisp against the dark surface. No dark-on-dark failures observed anywhere.

Both renders pass the theme-readability check with no exceptions.

Score: 91/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — all font sizes explicitly set, well-proportioned in both themes
• VQ-02: No Overlap (6/6) — mean-value labels don't collide with markers or other text
• VQ-03: Element Visibility (5/6) — density-scaled opacity eases overlap in denser groups; some crowding remains in the densest bins
• VQ-04: Color Accessibility (2/2) — color AND marker shape both vary per group, fully CVD-safe
• VQ-05: Layout & Canvas (4/4) — balanced margins, nothing cut off
• VQ-06: Axis Labels & Title (2/2) — descriptive with units
• VQ-07: Palette Compliance (2/2) — correct Imprint order, theme-correct chrome in both renders

Design Excellence (16/20)

• DE-01: Aesthetic Sophistication (6/8) - Thoughtful color+shape pairing, numeric mean labels, and density-tuned opacity now clearly above a well-configured default
• DE-02: Visual Refinement (5/6) - Axis lines fully removed, subtle single y-axis grid, minimal legend
• DE-03: Data Storytelling (5/6) - Numeric mean labels turn the dose-response hierarchy into an explicit, immediately readable narrative

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — genuine beeswarm via binned, fanned-out scatter offsets
• SC-02: Required Features (4/4) — consistent point sizes, clear group spacing, color encoding, group-mean marker
• SC-03: Data Mapping (3/3) — category on x-axis, value on y-axis, all data visible
• SC-04: Title & Legend (3/3) — title format exactly matches mandate; legend appropriately minimal

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — differing spreads and visible outliers alongside the dose-response trend
• DQ-02: Realistic Context (5/5) — CRP biomarker levels across a 4-arm clinical trial, realistic and neutral
• DQ-03: Appropriate Scale (4/4) — physiologically plausible CRP values and trend

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — top-down flow; helper functions justified by the beeswarm algorithm
• CQ-02: Reproducibility (2/2) — seeded mulberry32(42) PRNG
• CQ-03: Clean Imports (2/2) — no imports needed or present
• CQ-04: Code Elegance (2/2) — appropriate complexity, no fake functionality
• CQ-05: Output & API (1/1) — correct mount-node contract, animation disabled on chart and series

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) - Idiomatic scatter-with-categories construction given the core bundle's lack of a native beeswarm series
• LM-02: Distinctive Features (3/5) - Numeric dataLabels on the mean markers and per-series showInLegend control are Highcharts-specific touches

Score Caps Applied

• None

Strengths

• Repair directly addressed all three Attempt 1 weaknesses: numeric dataLabels on the group-mean diamonds now surface the exact dose-response values (8.0 → 6.3 → 4.9 → 3.3), density-scaled opacity (0.88 sparsest to 0.60 densest) eases within-bin overlap in the denser groups, and both axis lines are now fully removed (lineWidth: 0) for cleaner chrome.
• Genuine beeswarm layout algorithm (bin-and-fan-out via beeswarmOffsets) backed by a deterministic seeded mulberry32 PRNG.
• Excellent CVD-safe redundant encoding: each treatment group uses both a distinct Imprint palette color AND a distinct marker shape (circle/diamond/square/triangle).
• Correct Imprint palette in canonical order, identical across both themes; chrome flips correctly light-to-dark with no legibility issues, including the mean-diamond markers and their text-outlined data labels.
• Clean, minimal chrome: no axis lines, subtle single y-axis grid, unobtrusive legend limited to the "Group mean" entry.

Weaknesses

• Opacity is scaled per-group (based on each group's densest bin) rather than per-bin within a group, so the densest individual bins (e.g. the Med Dose cluster around 3-4.5 mg/L) still show some marker-on-marker crowding even though the overall group looks appropriately eased.
• Design Excellence is strong but still short of the "publication-ready, FiveThirtyEight-level" tier — the mean-diamond markers and data labels could gain one more layer of refinement (e.g. a subtle connecting guide or size hierarchy) to fully close the gap to a top-tier score.
• Library Mastery has improved with the dataLabels flourish but is still a scatter-based workaround for the missing native beeswarm series.

Issues Found

1. VQ-03 MINOR: Some marker-on-marker crowding remains in the densest bins despite density-scaled opacity
   • Fix: Consider per-bin (not just per-group) opacity/gap scaling for the very densest clusters
2. DE-01/LM-02 MINOR: Solid but not top-tier polish or library-distinctive showcase
   • Fix: A subtle connector/halo technique or additional dataLabel refinement could push this further in a future iteration

AI Feedback for Next Attempt

This is a well-executed swarm plot that fully addressed the previous review's feedback — the numeric mean labels, density-tuned opacity, and removed axis lines meaningfully lifted Design Excellence and Library Mastery. The remaining gap to a near-perfect score is minor: further per-bin (not just per-group) density scaling in the very densest clusters, and one more layer of aesthetic refinement to reach full publication-level polish.

Verdict: APPROVED