feat(echarts): implement swarm-basic

[github-actions]

Implementation: swarm-basic - javascript/echarts

Implements the javascript/echarts version of swarm-basic.

File: plots/swarm-basic/implementations/javascript/echarts.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-matching, not pure white). Title "swarm-basic · javascript · echarts · anyplot.ai" is centered at top in dark charcoal, clearly legible. Y-axis titled "CRP (mg/L)" (has units) in soft gray; x-axis shows category names (Placebo, Low Dose, Medium Dose, High Dose) directly as tick labels. Subtle horizontal-only gridlines. Four groups render as vertically-spread swarms of dots — green (#009E73, Placebo), purple (#C475FD, Low Dose), blue (#4467A3, Medium Dose), ochre (#BD8233, High Dose) — each with a dark diamond marking the group mean (light halo border). A clear downward CRP trend across dose groups is visible. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17-matching, not pure black). Title, y-axis title, and all tick labels switch to light off-white/gray text and remain fully readable — no dark-on-dark failures. The four data colors are pixel-identical to the light render — only chrome flipped. Mean-marker diamonds swap to a light fill with dark border to stay visible against the darker page, an appropriate theme-adaptive treatment. Gridlines remain subtle but visible.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 86/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	14	20
Spec Compliance	14	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	5	10
Total	86	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 (14/20)

• DE-01: Aesthetic Sophistication (6/8) - Custom beeswarm layout + mean markers, clearly above configured defaults
• DE-02: Visual Refinement (4/6) - Subtle grid, generous whitespace; y-axis tick marks not hidden
• DE-03: Data Storytelling (4/6) - Dose-response trend + mean markers create readable visual hierarchy

Spec Compliance (14/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (2/3) - Title format exactly correct; no legend/label explains the mean-diamond markers

Data Quality (15/15)

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

Code Quality (10/10)

• CQ-01: KISS Structure (3/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 (5/10)

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (1/5) - Generic scatter-based construction; no ECharts-distinctive technique (e.g. custom renderItem)

Score Caps Applied

• None

Strengths

• Correct Imprint palette assignment across all 4 categories in canonical order (Placebo=#009E73, Low Dose=#C475FD, Medium Dose=#4467A3, High Dose=#BD8233)
• Theme-adaptive chrome verified correct in both renders — no dark-on-dark or light-on-light legibility failures
• Deterministic seeded LCG data generation, fully reproducible
• Implements the spec's suggested "subtle mean marker" feature with a diamond whose border matches the page background for a clean halo effect in both themes
• Realistic, neutral CRP dose-escalation clinical trial dataset with a clear downward dose-response trend, varied spread per group, and visible outliers

Weaknesses

• Beeswarm point layout is quantized into discrete vertical columns from the fixed bin/step offset formula, giving a blocky, grid-like silhouette rather than an organic swarm curve
• No legend or label identifies the dark diamond markers as the group mean — a viewer of the static PNG cannot infer this without the interactive tooltip
• Y-axis tick marks (axisTick) are not explicitly hidden while x-axis ticks are — inconsistent chrome minimalism
• Library Mastery is generic — swarm built with a plain scatter series and manual offset math that any library could replicate

Issues Found

1. SC-04 MEDIUM: No legend or annotation identifies what the dark diamond markers represent
   • Fix: Add a small legend entry (e.g. legend: { data: [...], selectedMode: false } filtered to just "Group mean") or a text annotation near one diamond labeling "Mean"
2. DE-01/DE-02 LOW: Beeswarm columns look blocky/grid-like rather than organic
   • Fix: Reduce binCount/spacing granularity or use a smoother nearest-neighbor jitter algorithm so density reads as a continuous swarm shape rather than discrete columns
3. DE-02 LOW: Y-axis tick marks not hidden while x-axis ticks are
   • Fix: Add axisTick: { show: false } to the yAxis config to match the x-axis treatment
4. LM-02 LOW: Generic scatter-based construction, no ECharts-distinctive technique
   • Fix: Consider a custom renderItem series for finer control over the swarm silhouette, showcasing an ECharts-specific capability

AI Feedback for Next Attempt

Good foundation — correct palette, correct theme chrome, and a thoughtful mean-marker addition. To push past 90: (1) label what the mean-diamond markers represent (legend entry or annotation), since the static PNG gives no context otherwise; (2) smooth out the beeswarm offset algorithm so points read as an organic swarm rather than discrete grid columns; (3) hide the y-axis tick marks for full chrome-minimalism consistency; (4) consider a distinctive ECharts technique (e.g. custom renderItem) to raise Library Mastery.

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 matching #FAF8F1, not pure white. Title "swarm-basic · javascript · echarts · anyplot.ai" is centered at top in bold dark charcoal, fully legible. A "Group mean" legend entry with a diamond icon sits top-right. Y-axis titled "CRP (mg/L)" in soft gray with units; x-axis shows category names (Placebo, Low Dose, Medium Dose, High Dose) as tick labels directly beneath each swarm. Subtle horizontal-only gridlines, both axis tick marks now hidden. Four groups render as organically-shaped swarms of dots — green #009E73 (Placebo), lavender #C475FD (Low Dose), blue #4467A3 (Medium Dose), ochre #BD8233 (High Dose) — each with a dark diamond (light halo border) marking the group mean. A clear downward CRP dose-response trend is visible across groups. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black background matching #1A1A17, not pure black. Title, legend text, y-axis title, and all tick labels switch to light off-white/gray and remain fully readable — no dark-on-dark failures anywhere. The four data colors are pixel-identical to the light render — only chrome flipped. Mean-marker diamonds swap to a light fill with dark border to stay visible against the darker page, an appropriate theme-adaptive treatment. Gridlines remain subtle but visible.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 89/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	15	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	6	10
Total	89	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 (15/20)

• DE-01: Aesthetic Sophistication (6/8) - Custom pixel-space beeswarm layout + themed mean markers, clearly above configured defaults
• DE-02: Visual Refinement (5/6) - Subtle grid, generous whitespace, both axis tick marks now hidden (fixed from Attempt 1)
• DE-03: Data Storytelling (4/6) - Dose-response trend + labeled mean markers create readable hierarchy; no further emphasis (e.g. annotation on the trend) added

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) - Title format exactly correct; legend now identifies the mean-diamond markers (fixed from Attempt 1)

Data Quality (15/15)

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

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Helper functions (LCG RNG, beeswarm layout) are a genuine necessity since ECharts has no native swarm series, not incidental complexity
• 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 (6/10)

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (2/5) - Uses ECharts' convertToPixel/convertFromPixel coordinate API for the layout, an improvement over Attempt 1's manual offset math, but the series itself is still a plain scatter type rather than a distinctive ECharts feature (e.g. custom renderItem)

Score Caps Applied

• None

Strengths

• All three Attempt 1 weaknesses fixed: (1) legend entry now labels the mean-diamond markers, (2) y-axis tick marks hidden to match x-axis chrome, (3) beeswarm layout rewritten to a greedy nearest-slot placement in pixel space, replacing the blocky quantized columns with an organic, continuous swarm silhouette
• Correct Imprint palette assignment across all 4 categories in canonical order (Placebo=#009E73, Low Dose=#C475FD, Medium Dose=#4467A3, High Dose=#BD8233)
• Theme-adaptive chrome verified correct in both renders — no dark-on-dark or light-on-light legibility failures
• Deterministic seeded LCG data generation, fully reproducible
• Realistic, neutral CRP dose-escalation clinical trial dataset with a clear downward dose-response trend, varied spread per group, and visible outliers

Weaknesses

• Library Mastery is still fundamentally a generic scatter series; the custom layout uses ECharts' coordinate-conversion API but doesn't showcase a truly ECharts-distinctive series type (e.g. custom renderItem)
• Data storytelling is solid but static — no annotation or callout emphasizes the dose-response trend beyond the visual pattern itself

Issues Found

1. LM-02 LOW: Still scatter-based construction, only moderately more ECharts-idiomatic than Attempt 1
   • Fix: Consider a custom renderItem series for finer control over the swarm silhouette (e.g. per-point z-ordering, custom shapes), showcasing a genuinely ECharts-specific capability
2. DE-03 LOW: No explicit emphasis beyond color/position calls out the dose-response trend
   • Fix: Optional — a subtle connecting line or annotation between group means could strengthen the visual narrative

AI Feedback for Next Attempt

Solid, publication-adjacent quality — all Attempt 1 feedback was addressed correctly (legend, tick consistency, organic swarm shape). The main remaining gap is Library Mastery: the implementation still relies on a plain scatter series with coordinate-API-assisted positioning rather than an ECharts-distinctive technique like a custom renderItem series. This is a nice-to-have, not a blocker.

Verdict: APPROVED