feat(muix): implement swarm-basic

[github-actions]

Implementation: swarm-basic - javascript/muix

Implements the javascript/muix version of swarm-basic.

File: plots/swarm-basic/implementations/javascript/muix.tsx

Parent Issue: #974

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). Title "swarm-basic · javascript · muix · anyplot.ai" centered top in dark ink. Axis labels "Department" (x) and "Performance Score" (y) plus tick labels (department names, 40–100 score ticks) render in dark ink/soft-dark gray, all clearly legible. Data is a beeswarm of brand-green (#009E73) points across 4 departments (Engineering, Sales, Marketing, Support), packed tightly without overlapping, with a dark horizontal median-reference line per department. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Same title/axis/tick text now in light ink/off-white — fully readable, no dark-on-dark failures anywhere. Median lines render in light gray. Data points are the identical brand green (#009E73) as the light render — only chrome (background, text, grid, median-line color) flipped as expected. All text is readable against the dark background.

Both renders pass the theme-readability check.

Score: 90/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (8/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 (12/20)

• DE-01: Aesthetic Sophistication (4/8) - Well-configured library default; single flat brand-green fill, no additional palette/gradient work
• DE-02: Visual Refinement (4/6) - Subtle grid, L-shaped spines, generous whitespace — good but not maximally polished
• DE-03: Data Storytelling (4/6) - Median reference line per department creates a clear, immediate cross-group comparison

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 (10/10)

• LM-01: Idiomatic Usage (5/5)
• LM-02: Distinctive Features (5/5) - useXScale/useYScale hooks drive a custom SVG overlay synced to the chart's live D3 scales — a genuinely MUI X-specific technique

Score Caps Applied

• None

Strengths

• Genuine beeswarm layout: a pixel-space collision-resolution algorithm spreads points horizontally so none overlap, matching the spec's core requirement rather than faking it with a plain jittered scatter
• Subtle median reference line per department (drawn via live useXScale/useYScale hooks) adds a clear, uncluttered point of comparison across groups
• Deterministic LCG + Box-Muller data generation with per-department mean/stddev produces realistic, varied distributions including visible outliers
• Theme handling is correct in both renders: identical brand-green data points, correct backgrounds, and theme-adaptive ink throughout
• Idiomatic, advanced MUI X composition — ChartContainer + ScatterPlot + ChartsGrid/Axis components plus scale hooks for a custom overlay, a genuinely MUI X-specific pattern
• Correct title format, single-series legend appropriately omitted, clean code with explicit font sizes throughout

Weaknesses

• Design Excellence sits at the default level: a single flat brand-green fill with no additional visual hierarchy beyond the median tick — a subtle callout labeling the best/worst-performing department, or a more refined marker/grid treatment, would push this toward genuinely polished
• Marker radius (6px) is adequate but on the smaller side for ~40 points per department at the 3200px canvas — could be nudged up slightly for more visual presence without reintroducing overlap

Issues Found

1. DE-01 LOW: Single flat color with no additional aesthetic work beyond the default palette
   • Fix: Consider subtle refinements — e.g. a slightly larger marker, a light halo/edge on markers, or a callout label on the standout department (Support) to add polish
2. VQ-03 MINOR: Marker size adequate but not maximal for the data density
   • Fix: Nudge MARKER_SIZE from 6 up slightly (e.g. 7-8) while keeping the collision-resolution spacing in sync

AI Feedback for Next Attempt

This implementation is strong and passes at attempt 1 — no changes required. If iterating further, focus on Design Excellence: the plot is currently a well-configured default (flat single color, standard grid/spines). A small amount of additional visual hierarchy (e.g. a callout on the top-performing department, or slightly refined marker styling) would meaningfully raise the aesthetic sophistication score.

Verdict: APPROVED