feat(muix): implement scatter-color-mapped

[github-actions]

Implementation: scatter-color-mapped - javascript/muix

Implements the javascript/muix version of scatter-color-mapped.

File: plots/scatter-color-mapped/implementations/javascript/muix.tsx

Parent Issue: #2004

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1-consistent). Title "scatter-color-mapped · javascript · muix · anyplot.ai" is bold and dark, centered at top. "Longitude (°E)" / "Latitude (°N)" axis labels and degree tick labels are dark gray and legible. Subtle light-gray grid on both axes. ~160 circular markers spread across the lon/lat grid, colored on a continuous green→blue gradient (Imprint imprint_seq) keyed to sea-surface temperature, with a "Sea-surface temp (°C)" caption and "23.0°C"/"15.4°C" min/max labels next to a vertical colorbar on the right. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17-consistent). Same title, axis labels, tick labels, and colorbar caption now render in light/off-white tones, clearly visible against the dark surface. Grid lines are subtle and light at low opacity. The marker positions and the green→blue color gradient are identical to the light render — only the chrome flipped, as required. No dark-on-dark issues: all text reads clearly, and the brand-green end of the gradient stays visible.

Both renders pass the theme-readability check.

Score: 82/100

Category	Score	Max
Visual Quality	27	30
Design Excellence	10	20
Spec Compliance	14	15
Data Quality	13	15
Code Quality	10	10
Library Mastery	8	10
Total	82	100

Visual Quality (27/30)

• VQ-01: Text Legibility (7/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (4/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 (10/20)

• DE-01: Aesthetic Sophistication (4/8) - Well-configured library default, on-brand but not exceptional
• DE-02: Visual Refinement (3/6) - Some customization, but combined grid reads as a fairly default boxed layout
• DE-03: Data Storytelling (3/6) - Warm-core spatial pattern exists but is subtle rather than an obvious focal point

Spec Compliance (14/15)

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

Data Quality (13/15)

• DQ-01: Feature Coverage (5/6)
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (3/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 (8/10)

• LM-01: Idiomatic Usage (5/5)
• LM-02: Distinctive Features (3/5) - Uses MUI X's zAxis colorMap + ContinuousColorLegend, fairly distinctive but doesn't lean on further library-unique interactions

Score Caps Applied

• None

Strengths

• Correct Imprint continuous colormap: imprint_seq (brand green → blue) for the single-polarity temperature magnitude, matching the style guide's sequential-vs-diverging rule.
• Idiomatic MUI X pattern: zAxis colorMap + ContinuousColorLegend is the library's recommended approach for a color-mapped scatter, with custom min/max °C label formatters.
• Theme-adaptive chrome correctly threaded through via t.ink / t.inkSoft; both renders keep identical data colors while only chrome flips.
• Realistic, neutral data story: an oceanographic buoy network with a simulated warm-core current gives the color mapping a plausible spatial pattern rather than pure noise.
• All font sizes explicitly set (labelStyle, tickLabelStyle, ChartsText, legend labelStyle).

Weaknesses

• Several buoy markers visibly overlap (e.g. clusters near 44°N/-13°E, 33°N/-4°E, 32°N/9-10°E) and are drawn fully opaque, so overlapping points hide each other. Add moderate transparency (e.g. fillOpacity/marker alpha ~0.85) on the scatter series to preserve information at overlaps, per the spec's own note.
• Visual design leans on largely default MUI X chart chrome (grid + implied box-like frame from combined vertical+horizontal grid). Consider a subtler grid or removing the implied top/right frame lines for a more polished, less "default library" look.
• The warm-core spatial pattern in the data is present but subtle — the color story doesn't immediately pop. Consider slightly larger markers or a tighter color-range clamp so the spatial temperature gradient reads faster as a focal insight.
• The temperature model (radial falloff from a single point at 0°E/40°N) is a simplified physical stand-in for a real current; plausible, but real SST is primarily latitude-driven — minor realism deduction.

Issues Found

1. VQ-03 / SC-02 MEDIUM: Opaque overlapping markers lose data at overlap points
   • Fix: Add fillOpacity (or equivalent alpha) around 0.8–0.9 to the scatter series so overlapping buoys remain distinguishable.
2. DE-01 / DE-02 LOW: Design reads as a well-configured default rather than a polished, bespoke chart
   • Fix: Refine grid styling (lower opacity or single-axis grid) and consider removing the implied box frame for a cleaner, more minimal look consistent with the anyplot style guide.
3. DE-03 LOW: Spatial temperature story is subtle
   • Fix: Emphasize the warm-core pattern further, e.g. via marker size tied to proximity-to-core or a tighter color domain clamp.

AI Feedback for Next Attempt

Keep the correct imprint_seq colormap, theme wiring, and idiomatic zAxis/ContinuousColorLegend usage — those are working well. For the next attempt, add moderate marker transparency to handle overlap, refine the grid/frame styling to feel less like a stock default, and consider a small tweak (marker size or color clamp) that makes the warm-core spatial pattern the chart's obvious focal point.

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): Background samples exactly rgb(250,248,241) = #FAF8F1, matching spec. The bold title "scatter-color-mapped · javascript · muix · anyplot.ai" is centered at top and clearly legible; "Longitude (°E)" / "Latitude (°N)" axis titles and degree-formatted tick labels are dark ink on the light background, fully readable. Subtle horizontal-only gridlines. The colorbar (right margin) is labeled "Sea-surface temp (°C)" with explicit "23.0°C" / "15.4°C" min/max labels. ~160 circular markers span -14° to 12°E, 30° to 52°N, colored along a green-to-blue Imprint imprint_seq gradient; markers near (0°E, 40-42°N) skew blue/high-temperature, consistent with the coded "warm core" spatial pattern. All text is readable against the light background.

Dark render (plot-dark.png): Background samples exactly rgb(26,26,23) = #1A1A17, matching spec (not pure black). Title, axis titles, and tick labels flip to light ink and remain fully readable — no dark-on-dark failures. Data marker positions and the green-to-blue gradient are pixel-identical to the light render (confirmed by sampling), only chrome flipped as required. All text is readable against the dark background. One caveat: the darkest/most-blue markers (highest-temperature end, e.g. rgb(44,104,130)) measure only ~2.7-2.8:1 luminance contrast against the #1A1A17 background — below the WCAG 3:1 non-text-contrast guideline — though they remain visible.

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

Score: 87/100

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

Visual Quality (27/30)

• VQ-01: Text Legibility (7/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (5/6)
• VQ-04: Color Accessibility (1/2) - High-temperature markers ~2.7-2.8:1 contrast vs. dark background, below 3:1 guideline
• 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) - Custom Imprint palette, dynamic title sizing, alpha-tuned overlap handling
• DE-02: Visual Refinement (4/6) - Horizontal-only grid, no spines, generous margins
• DE-03: Data Storytelling (4/6) - Spatial warm-core gradient gives the color mapping a real focal point

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

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (3/5) - ContinuousColorLegend + zAxis are distinctive but no further differentiators used

Score Caps Applied

• None

Strengths

• Spatial data tells a genuine story: temperature decays outward from a synthetic warm-core current near (0°E, 40°N), giving the color mapping real meaning instead of random noise.
• Colorbar (ContinuousColorLegend) has clear units and explicit min/max value labels, and correctly uses the Imprint imprint_seq sequential palette (t.seq) rather than a default/named colormap like viridis.
• Deterministic LCG-seeded data generation, clean minimal imports, and correct use of skipAnimation + window.ANYPLOT_SIZE sizing per the muix harness contract.
• Title fontsize dynamically scales with title length; both canvases verified pixel-exact at 3200×1800 with correct theme backgrounds (#FAF8F1 light / #1A1A17 dark, confirmed via pixel sampling).

Weaknesses

• Dark-render markers at the high-temperature end of the scale (t.seq[1], indigo-blue, sampled ~rgb(44,104,130) at alpha 0.85) measure only ~2.7-2.8:1 contrast against #1A1A17 — below the WCAG 3:1 non-text-contrast guideline for meaningful graphical objects.
• Densely overlapping clusters (e.g. near 9-10°E/32°N and -14°E/44°N) rely solely on alpha blending with no marker stroke, making it slightly harder to count exact overlap depth in the thickest clusters.
• Distinctive MUI X usage is limited to zAxis colorMap + ContinuousColorLegend; no further library-specific differentiators (e.g. custom tooltip valueFormatter, highlightScope) are leveraged.

Issues Found

1. VQ-04 LOW: High-temperature (deep blue) markers have marginal contrast against the dark theme background
   • Fix: Slightly raise MARKER_ALPHA (e.g. 0.9-0.95) or lighten the top-of-scale sequential stop specifically for dark mode so the darkest markers stay distinguishable from #1A1A17.
2. LM-02 LOW: Distinctive-feature usage is adequate but not exceptional
   • Fix: Consider adding a valueFormatter-driven tooltip or highlightScope cross-highlighting to further showcase MUI X-specific capabilities (optional, not required for approval).

AI Feedback for Next Attempt

This attempt addressed prior feedback well and scores solidly across spec/data/code quality. If iterating further, focus on dark-theme marker contrast at the high end of the color scale and consider one more MUI X-distinctive touch (tooltip formatting or highlight scope) to lift Library Mastery.

Verdict: APPROVED