feat(chartjs): implement swarm-basic

[github-actions]

Implementation: swarm-basic - javascript/chartjs

Implements the javascript/chartjs version of swarm-basic.

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

Parent Issue: #974

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (matches #FAF8F1). Bold dark title "swarm-basic · javascript · chartjs · anyplot.ai" centered at top, with a legend row below showing four color swatches (Control, Caffeine, Sleep-Deprived, Exercise). Dark Y-axis title "Reaction Time (ms)" and X-axis title "Experimental Condition"; tick labels in a slightly softer dark grey. Data is shown as four swarm columns of individual points (green/lavender/blue/ochre, first series #009E73) each with a horizontal black median bar. Subtle horizontal-only gridlines, white-edged markers for separation. All text is clearly readable against the light background.

Dark render (plot-dark.png): Warm near-black background (matches #1A1A17). Same title, legend, and axis titles, now rendered in light/white text; tick labels in light grey; gridlines still subtle but visible. Data colors are identical to the light render (same green/lavender/blue/ochre hexes) — only the chrome flipped, including the median bars switching from black to white. All text is clearly legible against the dark background — no dark-on-dark failures observed.

Both renders pass the theme-readability check.

Score: 87/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	13	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	9	10
Library Mastery	7	10
Total	87	100

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (5/6)
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (4/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) - Clearly above default (custom swarm layout, median markers) but not yet publication-ready polish
• DE-02: Visual Refinement (4/6) - Subtle grid, white-edge markers, decent whitespace; some refinement visible but not exhaustive
• DE-03: Data Storytelling (4/6) - Median line creates hierarchy, but no emphasis calls out the standout Sleep-Deprived group

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6)
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (9/10)

• CQ-01: KISS Structure (2/3)
• CQ-02: Reproducibility (2/2)
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2)
• CQ-05: Output & API (1/1)

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (3/5) - Mixed scatter+line + afterBuildTicks override are the minimum needed, not a showcase feature

Score Caps Applied

• None

Strengths

• Custom deterministic swarm layout (value-binning + symmetric offset) produces a genuine beeswarm spread on top of Chart.js's scatter type — a non-trivial technique the library doesn't provide natively.
• Correct Imprint palette in canonical order (green, lavender, blue, ochre) with data colors identical across light and dark renders; chrome is fully theme-adaptive in both.
• Per-category median reference line (mixed scatter+line dataset, filtered out of the legend) adds a clear comparison point across groups without clutter.
• Realistic reaction-time data across 4 psychology-experiment conditions with distinct means/spreads and genuine outliers in every group.
• All chrome font sizes explicitly set and readable in both themes; white-edge markers keep overlapping points distinct.

Weaknesses

• Design Excellence sits at "strong but not publication-ready" — no additional refinement (alpha, size variation, callout) pushes it toward FiveThirtyEight-level polish.
• No visual emphasis on the most notable finding (Sleep-Deprived group is markedly slower and more variable) — a subtle size/alpha/annotation cue on that group would strengthen the storytelling.
• Sleep-Deprived swarm column is noticeably denser/tighter than the other three groups — consider a slightly larger offset step or smaller marker radius there so points stay as distinguishable as elsewhere.
• Library Mastery techniques (mixed chart, afterBuildTicks override) are the minimum needed to fake a categorical beeswarm axis rather than a showcase of a distinctive Chart.js-only capability.

Issues Found

1. DE-01/DE-03 MEDIUM: Chart is technically excellent but visually reads as "well-executed default" rather than "publication-ready" — no element singles out the standout Sleep-Deprived group.
   • Fix: Add a subtle emphasis technique (e.g., slightly larger/bolder median marker or a soft callout) on the group with the most notable effect, or add mild alpha to reduce visual density in the tightly-packed Sleep-Deprived column.
2. VQ-03 LOW: Sleep-Deprived swarm points are tightly packed compared to other groups.
   • Fix: Increase the swarm offset step slightly for that group, or reduce marker radius by ~1px to give points more breathing room.

AI Feedback for Next Attempt

Solid technical foundation — keep the custom swarm algorithm, median lines, and correct Imprint/theme handling exactly as-is. To close the gap to publication-ready: add one deliberate emphasis technique that highlights the key finding (Sleep-Deprived being slower and more variable), and slightly loosen the point spacing in that column so individual points stay as distinguishable as in the other three groups.

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). Bold dark title "swarm-basic · javascript · chartjs · anyplot.ai" centered at top, with a legend row below showing four color swatches (Control=green, Caffeine=lavender, Sleep-Deprived=blue, Exercise=ochre — canonical Imprint order, first series #009E73). Four swarm columns of individual points spread symmetrically to avoid overlap, each with a horizontal median reference bar. New in this attempt: a subtle warm-amber backdrop band sits behind the Sleep-Deprived column and its median bar renders in amber instead of black, calling out that group as the standout finding (slower, more variable reaction times). Dark Y-axis title "Reaction Time (ms)" and X-axis title "Experimental Condition"; tick labels in softer dark grey; horizontal-only gridlines. All text is clearly readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Same title, legend, and axis titles now in light/white text; tick labels in light grey; gridlines still subtle but visible. Data colors are identical to the light render (same green/lavender/blue/ochre hexes, same amber accent) — only chrome flipped, including the median bars switching from black to white (amber stays amber on the highlighted group, correctly theme-invariant). All text is clearly legible against the dark background — no dark-on-dark failures observed.

Both renders pass the theme-readability check.

Score: 92/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (5/6)
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (4/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (16/20)

• DE-01: Aesthetic Sophistication (6/8) - Custom plugin-based backdrop highlight, segment-conditional median coloring, adaptive binning — clearly above a configured default
• DE-02: Visual Refinement (5/6) - Subtle grid, white-edge markers, amber backdrop band is restrained (low alpha, doesn't compete with data), generous whitespace
• DE-03: Data Storytelling (5/6) - Amber backdrop + amber median line on Sleep-Deprived immediately draws the eye to the standout finding — directly resolves the Attempt 1 feedback

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6)
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (9/10)

• CQ-01: KISS Structure (2/3)
• CQ-02: Reproducibility (2/2)
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2)
• CQ-05: Output & API (1/1)

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5)
• LM-02: Distinctive Features (4/5) - Native plugin-core beforeDatasetsDraw hook plus segment conditional line styling are genuine Chart.js-only capabilities, not easily replicated in another library

Score Caps Applied

• None

Strengths

• The amber backdrop band + amber median line on Sleep-Deprived directly resolves Attempt 1's "no emphasis on the standout finding" feedback — the plot now has a clear focal point without touching marker size (spec asks for consistent point sizes throughout).
• Custom native plugin (beforeDatasetsDraw) and segment-based conditional line coloring are genuine Chart.js-specific techniques, elevating Library Mastery beyond the "minimum needed" assessment from Attempt 1.
• Custom deterministic swarm layout (value-binning + symmetric offset) still produces a genuine beeswarm spread on top of Chart.js's scatter type.
• Correct Imprint palette in canonical order (green, lavender, blue, ochre), data colors identical across light/dark, chrome fully theme-adaptive in both renders.
• Realistic reaction-time data across 4 psychology-experiment conditions with distinct means/spreads and genuine outliers in every group.

Weaknesses

• Sleep-Deprived swarm column still shows a denser cluster around 400-420ms than the other three groups — the adaptive-binning comment claims "finer bins for wider-spread groups," but binCount is actually fixed per group (driven only by values.length, constant at 40 for every category) while only binSize scales with that group's spread, so the densest y-region still accumulates more points per bin than in the tighter-spread groups. A genuinely adaptive targetPointsPerBin (smaller for higher-sd groups) would resolve this more directly.
• Design Excellence, while improved, still stops short of full publication-ready polish (e.g. the median line width/amber treatment is the only differentiation technique used — a second subtle cue, like slight alpha reduction in the densest region, would push further).

Issues Found

1. VQ-03 LOW: Sleep-Deprived column remains the densest despite the "adaptive" binning comment — bin count doesn't actually vary by group spread, only bin width does.
   • Fix: Scale targetPointsPerBin down for higher-sd groups (e.g. proportional to sd) so bin count increases where within-bin crowding is worst, not just bin width.

AI Feedback for Next Attempt

This attempt is approved. If revisited later, the one remaining polish item is the residual density in the Sleep-Deprived column — scale bin count (not just bin width) to each group's spread so crowding resolves as cleanly as the other three groups.

Verdict: APPROVED