feat(muix): implement scatter-connected-temporal

[github-actions]

Implementation: scatter-connected-temporal - javascript/muix

Implements the javascript/muix version of scatter-connected-temporal.

File: plots/scatter-connected-temporal/implementations/javascript/muix.tsx

Parent Issue: #4675

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Connected scatter plot on a warm off-white (#FAF8F1) background showing the US Phillips Curve 1970–2009. Four decade paths are visible: 1970s in brand green (#009E73), 1980s in lavender (#C475FD), 1990s in blue (#4467A3), 2000s in ochre (#BD8233). Axis labels "Unemployment Rate (%)" (x) and "Inflation Rate (%)" (y) in dark ink at 16px, tick labels at 14px, all readable. Legend at top-right with decade labels in dark ink. Title "Phillips Curve · scatter-connected-temporal · javascript · muix · anyplot.ai" in dark medium-weight text at 19px (correctly scaled for 79-char string), approximately 75% of canvas width. Both horizontal and vertical grid lines visible at MUI X default opacity. Small open-circle markers at each of the 10 data points per series. No temporal arrows or year annotations. All text readable against the light background — no light-on-light issues. Legibility verdict: PASS.

Dark render (plot-dark.png): Same plot on a warm near-black (#1A1A17) background. ThemeProvider correctly adapts all chrome: title, axis labels, tick labels, and legend text render in light ink against the dark surface. Data colors are identical to the light render — 1970s green, 1980s lavender, 1990s blue, 2000s ochre — confirming the Imprint palette positions do not flip between themes. Grid lines adapt to the dark surface (lighter strokes). Brand green #009E73 is clearly visible on the dark background. No dark-on-dark failures detected anywhere. All text clearly readable. Legibility verdict: PASS.

Both paragraphs confirmed. Both renders pass the theme-readability check.

Score: 81/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — all font sizes explicitly set, title 19px (correctly scaled for 79-char string), axis labels 16px, tick labels 14px, readable in both themes
• VQ-02: No Overlap (6/6) — no text collisions; legend at top-right does not overlap data; path intersections are data-inherent
• VQ-03: Element Visibility (5/6) — lines visible at strokeWidth 2.5; open-circle markers visible but slightly small for sparse data (10 pts/series); should be more prominent to distinguish from a plain line chart
• VQ-04: Color Accessibility (2/2) — Imprint palette positions 1–4 are colorblind-safe; four distinct hue families (green/purple/blue/ochre)
• VQ-05: Layout & Canvas (4/4) — canvas gate passed; plot fills ~60–70% of canvas; balanced margins; legend not isolated
• VQ-06: Axis Labels & Title (2/2) — "Unemployment Rate (%)" and "Inflation Rate (%)" with units; descriptive title with "Phillips Curve" prefix
• VQ-07: Palette Compliance (2/2) — 1970s = palette[0]=#009E73 (brand green); 1980s/1990s/2000s = palette[1–3] in canonical order; background = t.pageBg (#FAF8F1 light / #1A1A17 dark); data colors identical across renders

Design Excellence (10/20)

• DE-01: Aesthetic Sophistication (4/8) — well-configured implementation with correct Imprint palette and explicit sizing; custom Box+Typography title layout adds some polish; missing temporal arrows, annotations, and refined grid opacity that would elevate this to strong design
• DE-02: Visual Refinement (3/6) — strokeWidth 2.5 and legend slotProps are explicit refinements; MUI X default chrome is already clean; no explicit grid opacity tuning, no spine control beyond MUI defaults
• DE-03: Data Storytelling (3/6) — decade-based color segmentation creates a clear narrative about Phillips curve dynamics across eras; viewer can compare each decade's path; however, no temporal direction arrows within paths and no start/end annotations leave the direction of travel ambiguous

Spec Compliance (13/15)

• SC-01: Plot Type (5/5) — connected scatter plot correctly achieved via LineChart with showMark:true and continuous linear xAxis; correct approach for MUI X community tier
• SC-02: Required Features (2/4) — points connected chronologically ✓; visible markers ✓; temporal color encoding via decades ✓; MISSING: text annotations for key time points (spec: "should be annotated with text labels"); MISSING: directional indicator within each decade's path (arrows or intra-path gradient showing which year is first)
• SC-03: Data Mapping (3/3) — X=Unemployment Rate, Y=Inflation Rate; all 40 points (1970–2009) visible; temporal order encoded via decade segmentation
• SC-04: Title & Legend (3/3) — "Phillips Curve · scatter-connected-temporal · javascript · muix · anyplot.ai" matches required format; legend labels 1970s/1980s/1990s/2000s correct

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — four decades show different Phillips curve dynamics: 1970s stagflation loops, 1980s Volcker disinflation, 1990s Great Moderation, 2000s with 2008 deflation; good variety of path shapes
• DQ-02: Realistic Context (5/5) — US Phillips Curve 1970–2009 is a classic, neutral, educationally valuable real-world dataset
• DQ-03: Appropriate Scale (4/4) — unemployment 4–10%, inflation −0.4 to 13.5% are historically accurate for US; 2009 deflation and 1980 peak inflation are factually plausible

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — flat structure: imports → data → single exported component
• CQ-02: Reproducibility (2/2) — all data hard-coded inline, fully deterministic
• CQ-03: Clean Imports (3/3) — LineChart, Box, Typography all used; no unused imports
• CQ-04: Code Elegance (2/2) — decade segmentation via map+ternary is clean; Box+Typography title is appropriate; no over-engineering
• CQ-05: Output & API (1/1) — community @mui/x-charts only; skipAnimation set; ANYPLOT_SIZE and ANYPLOT_TOKENS per harness contract

Library Mastery (5/10)

• LM-01: Idiomatic Usage (3/5) — correct harness patterns (ANYPLOT_TOKENS, ANYPLOT_SIZE, skipAnimation); slotProps.legend configuration; sx for internal CSS targeting; correct but doesn't leverage the library's more advanced patterns
• LM-02: Distinctive Features (2/5) — slotProps.legend with direction/position/itemMark and sx targeting .MuiLineElement-root are MUI X-specific; overall approach is fairly generic and replicable in other React charting libraries

Score Caps Applied

• None — no caps triggered (DE-01=4 > 2, so the DE-01≤2 AND DE-02≤2 cap does not apply)

Strengths

• Correct Imprint palette in canonical order with brand green as the first (1970s) series
• All font sizes explicitly set with title correctly scaled for the 79-character string
• Fully theme-adaptive: pageBg for background, ThemeProvider for all chrome — both renders pass
• US Phillips Curve 1970–2009 is an excellent, neutral, real-world dataset that perfectly demonstrates the chart type
• Clean KISS code structure with deterministic hard-coded data
• Title format correct with descriptive "Phillips Curve ·" prefix

Weaknesses

• Missing temporal direction indicators — spec explicitly requires arrows or a gradient to show which direction time flows along each connected path; without them a viewer cannot determine whether the 1970s path runs clockwise or counter-clockwise
• Missing text annotations for key time points — spec explicitly says points "should be annotated with text labels" (start/end years, notable events); MUI X supports SVG text via custom mark slots or ChartsText
• Markers are small open circles — with only 10 data points per series (sparse), markers should be larger and more prominent; consider increasing mark size via slotProps or a custom mark component
• Grid has no explicit opacity tuning — adding sx targeting .MuiChartsGrid-root with reduced stroke-opacity would make the grid more subtle
• LM-02 opportunity — consider using MUI X's custom mark slot (slotProps.mark) to render larger, styled scatter dots or to add directional arrows, which would be distinctively MUI X

Issues Found

1. SC-02 LOW (2/4): Two spec-required features are missing
   • Fix: Add year labels at start and end of each decade path using ChartsText or custom annotations. Add directional arrows (e.g., using SVG arrowhead markers via sx on .MuiLineElement-root or custom mark components) within each decade's path.
2. DE-03 MEDIUM (3/6): Temporal direction ambiguous
   • Fix: The viewer needs to know which direction the path travels. At minimum, mark the start year of each decade with a text annotation (e.g., "1970", "1980", "1990", "2000") near the first point. Optional enhancement: gradient opacity within each decade segment (darker = later year).
3. VQ-03 MINOR (5/6): Markers too small for sparse data
   • Fix: Increase marker size — MUI X allows custom mark size via slotProps or a custom mark render function.

AI Feedback for Next Attempt

The core connected scatter approach is correct and the palette/theme compliance is perfect. The two most impactful improvements are: (1) Add year annotations — at minimum label the first point of each decade ("1970", "1980", "1990", "2000") using Typography overlays positioned via the data values, or a custom mark slot that renders SVG text; (2) Add temporal direction arrows — either via SVG arrowhead defs applied to the line ends, or by rendering a small directional tick/arrow at the end of each decade's segment. These two additions satisfy the spec's explicit requirements and substantially improve the data storytelling score. Also increase marker size (open circle radius) for the sparse 10-point series.

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): The plot renders on a warm off-white #FAF8F1 background with a well-structured Phillips Curve visualization. Four decade-colored paths trace unemployment (x-axis, 4–11%) against inflation (y-axis, −2–15%) for the US from 1970–2009. The 1970s series is rendered in brand green #009E73, 1980s in lavender #C475FD, 1990s in blue #4467A3, and 2000s in ochre #BD8233. Custom circle markers (r=6) with page-bg outlines appear at each data point; directional arrowheads at decade midpoints indicate temporal flow. Year annotations ("1970", "1973", "1979", "1980", "1989", "1990", "1999", "2000", "2008", "2009") are placed at key economic turning points using carefully offset text. A horizontal grid (strokeOpacity 0.25) provides reference without dominating. The legend appears top-right. All text — title, axis labels (with units), tick labels, and annotations — is clearly readable against the light background.

Dark render (plot-dark.png): The same visualization on a near-black #1A1A17 surface. The title, axis labels, tick labels, and year annotations all render in light/cream-colored text, with no dark-on-dark failures. Data colors are identical to the light render — 1970s green, 1980s lavender, 1990s blue, 2000s ochre — confirming only the chrome flips between themes. The grid, frame, and legend text adapt correctly to the dark surface via the ThemeProvider/ANYPLOT_TOKENS integration. All text is clearly readable against the dark background.

Both renders pass theme-readability checks. No edge clipping detected.

Score: 90/100

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

Visual Quality (27/30)

• VQ-01: Text Legibility (6/8) — All font sizes explicitly set (title: 19px CSS, axis labels: 16px, ticks: 14px, annotations: 12px SVG). All readable at full resolution in both themes. Slight dock: title is at 19px vs the 22px CSS guideline, and the 12px annotation labels are on the small side.
• VQ-02: No Overlap (5/6) — Decade-boundary labels use opposite dx/dy offsets to minimize crowding. The lower-left cluster (1989/1990, 1999/2000 annotations near 4–5% unemployment) is tight but readable without clear collision.
• VQ-03: Element Visibility (6/6) — Custom circle marks (r=6 CSS px) with page-bg stroke are perfectly sized for 10 points per series. Line strokeWidth=2.5 is well-adapted to the data density.
• VQ-04: Color Accessibility (2/2) — Imprint palette provides CVD-safe spacing across 4 hue families. Directional arrows use the same series colors for redundant encoding.
• VQ-05: Layout & Canvas (4/4) — No canvas gate failure. Chart fills 900−52=848 CSS px height; balanced margins; legend inside plot area at top-right; no clipping detected.
• VQ-06: Axis Labels & Title (2/2) — "Unemployment Rate (%)" and "Inflation Rate (%)" with units; descriptive prefix "Phillips Curve ·" in title.
• VQ-07: Palette Compliance (2/2) — First series #009E73 ✓; subsequent series follow Imprint canonical order ✓; background #FAF8F1 light / #1A1A17 dark ✓; chrome theme-correct in both renders ✓.

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (6/8) — Clearly above generic defaults: Imprint palette used correctly, custom SVG markers with page-bg outlines for definition, directional arrowhead markers conveying temporal flow, and a professional Phillips Curve narrative. Not quite FiveThirtyEight publication-ready, but strong design.
• DE-02: Visual Refinement (4/6) — Grid opacity reduced to 0.25 via sx override; custom circle marks replace default MUI X marks; line strokeWidth explicitly set. MUI X default chart frame/border is retained rather than stripped, capping this at "good" rather than "perfect".
• DE-03: Data Storytelling (5/6) — Visual hierarchy is clear: color differentiates decades, directional arrows encode temporal direction, and year annotations at the 1973 oil shock and 2008 financial crisis create focal narrative moments. The viewer immediately grasps the clockwise/counter-clockwise loops. Excellent storytelling choice for this chart type.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct connected scatter with temporal path: scatter points, chronological line connection, markers visible at each data position.
• SC-02: Required Features (4/4) — Points connected chronologically ✓; key time points annotated ✓; directional arrows on temporal path ✓; visible point markers ✓; color encoding of temporal progression per decade ✓.
• SC-03: Data Mapping (3/3) — X=unemployment, Y=inflation, time encoded as traversal order and decade hue. All 40 years shown.
• SC-04: Title & Legend (3/3) — Title Phillips Curve · scatter-connected-temporal · javascript · muix · anyplot.ai matches the {Descriptive Title} · {spec-id} · {language} · {library} · anyplot.ai format ✓. Legend shows decade labels matching series ✓.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows all aspects: connected path, directional flow, multi-series temporal segmentation, annotations at economic events, full range from tight labor market to stagflation.
• DQ-02: Realistic Context (5/5) — US Phillips Curve data (1970–2009) is a real, well-known economics dataset. Neutral domain. Not controversial.
• DQ-03: Appropriate Scale (4/4) — Values are historically accurate: 1980 inflation ~13.5%, 2009 unemployment ~9.3%, negative inflation in 2009 (−0.4%). Data proportions align with established economic records.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — Structure is clean (tokens → data → helpers → chart), but two helper components (TemporalOverlay, CustomMark) add complexity. Both are architecturally necessary for React/MUI X hooks pattern; minor dock for JS/React where this is expected but still adds layers.
• CQ-02: Reproducibility (2/2) — All data hard-coded as constants; fully deterministic; no RNG.
• CQ-03: Clean Imports (2/2) — All imports used: LineChart, useXScale, useYScale, Box, Typography.
• CQ-04: Code Elegance (2/2) — Clean, idiomatic React/MUI X code. The null-masking technique for decade segmentation is elegant. SVG overlay is well-structured. No fake functionality.
• CQ-05: Output & API (1/1) — Harness handles plot-light.png/dark.png + HTML output; no manual save needed ✓.

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Expert use of MUI X composition pattern: useXScale/useYScale hooks inside a child component passed to LineChart is the canonical way to position custom SVG in data coordinates. slots.mark, slotProps.legend, skipAnimation, sx overrides — all idiomatic.
• LM-02: Distinctive Features (4/5) — The useXScale/useYScale composition hooks enabling data-coordinate SVG overlays is a distinctive MUI X feature not easily replicated in other chart libraries. The slots.mark custom renderer is also library-specific. Minor dock: the arrowhead SVG is hand-rolled rather than using a MUI X native feature.

Score Caps Applied

• None — no caps triggered.

Strengths

• Historically accurate US Phillips Curve data (1970–2009) providing real economic context and factual accuracy
• Excellent use of MUI X composition API (useXScale/useYScale) for data-coordinate custom SVG overlay — a genuinely distinctive library feature
• Four-color decade segmentation with directional arrowheads creates clear temporal narrative
• Null-masking for decade path segmentation (i <= 9 ? v : null) is an elegant MUI X pattern for multi-series line charts with gaps
• Year annotations at the 1973 oil shock and 2008 financial crisis provide narrative depth without over-annotating
• Correct Imprint palette application with t.palette[0]–[3] and theme-adaptive chrome through ANYPLOT_TOKENS

Weaknesses

• Title font size (19px CSS) is slightly below the 22px CSS guideline; minor legibility reduction at small display sizes
• Annotation text (fontSize=12 SVG units) is on the smaller side for mobile readability
• MUI X default chart frame/border retained; removing or softening the plot border would improve visual refinement (DE-02)
• Lower-left annotation cluster (1989/1990, 1999/2000 labels near 4–6% unemployment) is dense, though not overlapping thanks to the dx/dy offsets

Issues Found

1. DE-02 MODERATE: Default MUI X chart border/frame retained — no spine removal applied
   • Fix: Use sx override to hide or soften chart borders (e.g., "& .MuiChartsAxis-root .MuiChartsAxis-line": { display: "none" }) to achieve the L-shaped or borderless look recommended by the style guide
2. VQ-01 MINOR: Title at 19px and annotations at 12px are slightly conservative
   • Fix: Bump title to fontSize: 22 to match the JS library guideline; increase annotation fontSize to 13–14 for better mobile legibility

AI Feedback for Next Attempt

Approved at this quality level. If repaired: boost title font size to 22px CSS to match the JS library guideline, increase annotation labels to 13–14px, and consider removing the MUI X chart border/frame via an sx rule for cleaner visual refinement. The useXScale/useYScale composition pattern, decade segmentation, and directional arrows are all correct and should be kept.

Verdict: APPROVED