From e0c8c7c4d2dce8bbd00095875ab423ab1b33ef07 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 9 Jun 2026 23:50:35 +0000 Subject: [PATCH 1/5] feat(muix): implement scatter-connected-temporal --- .../implementations/javascript/muix.tsx | 110 ++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 plots/scatter-connected-temporal/implementations/javascript/muix.tsx diff --git a/plots/scatter-connected-temporal/implementations/javascript/muix.tsx b/plots/scatter-connected-temporal/implementations/javascript/muix.tsx new file mode 100644 index 0000000000..18ac4c9cfc --- /dev/null +++ b/plots/scatter-connected-temporal/implementations/javascript/muix.tsx @@ -0,0 +1,110 @@ +// anyplot.ai +// scatter-connected-temporal: Connected Scatter Plot with Temporal Path +// Library: MUI X Charts | React | Node 22 +// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope. +// Quality: pending | Created: 2026-06-09 + +import { LineChart } from "@mui/x-charts/LineChart"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; + +const t = window.ANYPLOT_TOKENS; + +// US Phillips curve: unemployment rate (%) vs. inflation rate (%), 1970–2009 +// Data is synthetic-realistic based on US macroeconomic trends +const unemployment = [ + 4.9, 5.9, 5.6, 4.9, 5.6, 8.5, 7.7, 7.1, 6.1, 5.8, // 1970-1979 + 7.1, 7.6, 9.7, 9.6, 7.5, 7.2, 7.0, 6.2, 5.5, 5.3, // 1980-1989 + 5.6, 6.8, 7.5, 6.9, 6.1, 5.6, 5.4, 4.9, 4.5, 4.2, // 1990-1999 + 4.0, 4.7, 5.8, 6.0, 5.5, 5.1, 4.6, 4.6, 5.8, 9.3, // 2000-2009 +]; + +const inflation = [ + 5.7, 4.4, 3.2, 6.2, 11.0, 9.1, 5.8, 6.5, 7.6, 11.3, // 1970-1979 + 13.5, 10.3, 6.2, 3.2, 4.3, 3.6, 1.9, 3.6, 4.1, 4.8, // 1980-1989 + 5.4, 4.2, 3.0, 3.0, 2.6, 2.8, 3.0, 2.3, 1.6, 2.2, // 1990-1999 + 3.4, 2.8, 1.6, 2.3, 2.7, 3.4, 3.2, 2.9, 3.8, -0.4, // 2000-2009 +]; + +// Decade segments — overlap at boundary indices for seamless path connection +const s1970s = inflation.map((v, i) => (i <= 9 ? v : null)); +const s1980s = inflation.map((v, i) => (i >= 9 && i <= 19 ? v : null)); +const s1990s = inflation.map((v, i) => (i >= 19 && i <= 29 ? v : null)); +const s2000s = inflation.map((v, i) => (i >= 29 ? v : null)); + +// Title: "Phillips Curve · scatter-connected-temporal · javascript · muix · anyplot.ai" = 79 chars +// Scaled fontsize: round(22 × 67/79) = 19 px +const TITLE_H = 52; + +export default function Chart() { + const W = window.ANYPLOT_SIZE.width; + const H = window.ANYPLOT_SIZE.height; + + return ( + + + Phillips Curve · scatter-connected-temporal · javascript · muix · anyplot.ai + + + + ); +} From daaaf5aa3ef41023f0ee387ef75ee83f6d63453c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 9 Jun 2026 23:50:45 +0000 Subject: [PATCH 2/5] chore(muix): add metadata for scatter-connected-temporal --- .../metadata/javascript/muix.yaml | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 plots/scatter-connected-temporal/metadata/javascript/muix.yaml diff --git a/plots/scatter-connected-temporal/metadata/javascript/muix.yaml b/plots/scatter-connected-temporal/metadata/javascript/muix.yaml new file mode 100644 index 0000000000..f89e7dddfb --- /dev/null +++ b/plots/scatter-connected-temporal/metadata/javascript/muix.yaml @@ -0,0 +1,21 @@ +# Per-library metadata for muix implementation of scatter-connected-temporal +# Auto-generated by impl-generate.yml + +library: muix +language: javascript +specification_id: scatter-connected-temporal +created: '2026-06-09T23:50:44Z' +updated: '2026-06-09T23:50:44Z' +generated_by: claude-sonnet +workflow_run: 27242702921 +issue: 4675 +language_version: 22.22.3 +library_version: 7.29.1 +preview_url_light: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/muix/plot-light.png +preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/muix/plot-dark.png +preview_html_light: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/muix/plot-light.html +preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/muix/plot-dark.html +quality_score: null +review: + strengths: [] + weaknesses: [] From 79494f181b11483b26274a6429669221d768b313 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 9 Jun 2026 23:57:41 +0000 Subject: [PATCH 3/5] chore(muix): update quality score 81 and review feedback for scatter-connected-temporal --- .../implementations/javascript/muix.tsx | 5 +- .../metadata/javascript/muix.yaml | 267 +++++++++++++++++- 2 files changed, 262 insertions(+), 10 deletions(-) diff --git a/plots/scatter-connected-temporal/implementations/javascript/muix.tsx b/plots/scatter-connected-temporal/implementations/javascript/muix.tsx index 18ac4c9cfc..9eb29f7319 100644 --- a/plots/scatter-connected-temporal/implementations/javascript/muix.tsx +++ b/plots/scatter-connected-temporal/implementations/javascript/muix.tsx @@ -1,8 +1,7 @@ // anyplot.ai // scatter-connected-temporal: Connected Scatter Plot with Temporal Path -// Library: MUI X Charts | React | Node 22 -// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope. -// Quality: pending | Created: 2026-06-09 +// Library: muix 7.29.1 | JavaScript 22.22.3 +// Quality: 81/100 | Created: 2026-06-09 import { LineChart } from "@mui/x-charts/LineChart"; import Box from "@mui/material/Box"; diff --git a/plots/scatter-connected-temporal/metadata/javascript/muix.yaml b/plots/scatter-connected-temporal/metadata/javascript/muix.yaml index f89e7dddfb..36367f9e02 100644 --- a/plots/scatter-connected-temporal/metadata/javascript/muix.yaml +++ b/plots/scatter-connected-temporal/metadata/javascript/muix.yaml @@ -1,11 +1,8 @@ -# Per-library metadata for muix implementation of scatter-connected-temporal -# Auto-generated by impl-generate.yml - library: muix language: javascript specification_id: scatter-connected-temporal created: '2026-06-09T23:50:44Z' -updated: '2026-06-09T23:50:44Z' +updated: '2026-06-09T23:57:40Z' generated_by: claude-sonnet workflow_run: 27242702921 issue: 4675 @@ -15,7 +12,263 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/scatter-c preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/muix/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/muix/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/muix/plot-dark.html -quality_score: null +quality_score: 81 review: - strengths: [] - weaknesses: [] + strengths: + - Correct Imprint palette in canonical order (1970s→green, 1980s→lavender, 1990s→blue, + 2000s→ochre) + - All font sizes explicitly set — tick labels 14px, axis labels 16px, title 19px + (correctly scaled for 79-char title) + - 'Fully theme-adaptive: pageBg for container background, ThemeProvider handles + all chrome' + - Data colors identical between light and dark renders — only chrome flips as required + - US Phillips Curve 1970–2009 is a perfect real-world dataset for this chart type + - Clean KISS structure with deterministic hard-coded data + - skipAnimation and window.ANYPLOT_SIZE used correctly per harness contract + - 'Title format correct: Descriptive prefix + spec-id · javascript · muix · anyplot.ai' + weaknesses: + - Missing temporal direction indicators within each decade path — the spec explicitly + requests arrows or a gradient to show which direction time flows along each connected + path; without them a viewer cannot tell which end of the 1970s path is 1970 vs + 1979 + - Missing text annotations for key time points — spec explicitly requires labels + for start, end, and notable years (e.g. 1970, 1979, 1980, 1989, 1990, 1999, 2000, + 2009 at minimum; notable events like 1973 oil shock or 2008 crisis are ideal); + MUI X ScatterChart or LineChart mark slots can render SVG text annotations + - Markers are small open circles — with only 10 data points per series (sparse per + style guide), markers should be larger and more prominent to distinguish the connected + scatter from a plain line chart; increase mark size via slotProps or custom mark + component + - Grid has no explicit opacity tuning — both horizontal and vertical grids are on + but use MUI default opacity; explicit grid opacity (e.g. via sx targeting .MuiChartsGrid-root, + or gridAxis stroke-opacity) would make the grid more subtle and reduce visual + noise in the dense overlap area + - LM-02 low — the implementation uses MUI X as a generic line chart; consider using + a custom mark slot (slotProps.mark) to render styled scatter markers, or add reference + lines / highlighted areas specific to MUI X community features + image_description: |- + Light render (plot-light.png): + Background: Warm off-white (#FAF8F1) — correct anyplot light surface, no pure white visible + Chrome: Title "Phillips Curve · scatter-connected-temporal · javascript · muix · anyplot.ai" at 19px in dark ink, fully readable. X-axis label "Unemployment Rate (%)" and Y-axis label "Inflation Rate (%)" in dark ink at 16px, both readable. Tick labels in dark ink at 14px, all readable. Legend at top-right with decade labels (1970s, 1980s, 1990s, 2000s) in dark ink at 14px, fully visible and not overlapping data. + Data: Four connected-scatter paths: 1970s in brand green (#009E73), 1980s in lavender (#C475FD), 1990s in blue (#4467A3), 2000s in ochre (#BD8233). Each path has small open-circle markers at each data point (10 per decade). Lines connect points in temporal (chronological) order. Both horizontal and vertical grid lines visible at default MUI X opacity. No arrows or annotations indicating temporal direction within paths. + Legibility verdict: PASS — all text clearly readable against the warm off-white background; no light-on-light issues + + Dark render (plot-dark.png): + Background: Warm near-black (#1A1A17 or very close) — correct anyplot dark surface, no pure black visible + Chrome: Title in light ink, fully readable against the dark background. Axis labels in light ink, readable. Tick labels in light-grey ink, readable. Legend labels in light ink. ThemeProvider correctly flips all chrome from dark to light text. No dark-on-dark issues detected anywhere. + Data: Data colors are identical to the light render — 1970s green, 1980s lavender, 1990s blue, 2000s ochre — confirming the Imprint palette colors do not flip between themes. Grid lines are lighter (adapting to the dark background). The brand green #009E73 is clearly visible on the dark surface. + Legibility verdict: PASS — all text clearly readable against the warm near-black background; no dark-on-dark failures observed + criteria_checklist: + visual_quality: + score: 29 + max: 30 + items: + - id: VQ-01 + name: Text Legibility + score: 8 + max: 8 + passed: true + comment: 'All font sizes explicitly set: title 19px (correctly scaled for + 79-char string), axis labels 16px, tick labels 14px, legend 14px. Readable + in both themes.' + - id: VQ-02 + name: No Overlap + score: 6 + max: 6 + passed: true + comment: No text overlaps. Legend in top-right does not overlap data. Path + intersections are data-inherent for a Phillips curve. + - id: VQ-03 + name: Element Visibility + score: 5 + max: 6 + passed: true + comment: Lines at strokeWidth 2.5 are clear. Markers (open circles) are visible + but small for sparse data (10 points/series); should be more prominent to + distinguish from a plain line chart. + - id: VQ-04 + name: Color Accessibility + score: 2 + max: 2 + passed: true + comment: Imprint palette positions 1-4 are colorblind-safe by design. Four + hue families (green/purple/blue/ochre) are perceptually distinct. + - id: VQ-05 + name: Layout & Canvas + score: 4 + max: 4 + passed: true + comment: Canvas gate passed. Plot fills ~60-70% of canvas. Balanced margins. + Legend at top-right not floating isolated. + - id: VQ-06 + name: Axis Labels & Title + score: 2 + max: 2 + passed: true + comment: 'X: ''Unemployment Rate (%)'' with units. Y: ''Inflation Rate (%)'' + with units. Title includes descriptive prefix ''Phillips Curve''.' + - id: VQ-07 + name: Palette Compliance + score: 2 + max: 2 + passed: true + comment: First series (1970s) uses t.palette[0]=#009E73 (brand green). Subsequent + series use palette[1-3] in canonical order. Background uses t.pageBg. ThemeProvider + handles chrome. Data colors identical across both renders. + design_excellence: + score: 10 + max: 20 + items: + - id: DE-01 + name: Aesthetic Sophistication + score: 4 + max: 8 + passed: false + comment: 'Well-configured library default with correct palette and explicit + sizing. Custom Box+Typography title layout adds some polish. Missing: temporal + arrows, annotations, refined grid opacity, explicit spine control.' + - id: DE-02 + name: Visual Refinement + score: 3 + max: 6 + passed: false + comment: strokeWidth 2.5 explicitly set. Legend styled via slotProps. Font + sizes tuned. MUI X default is already reasonably clean. No explicit grid + opacity tuning, no spine control beyond MUI defaults. + - id: DE-03 + name: Data Storytelling + score: 3 + max: 6 + passed: false + comment: Decade-based color segmentation creates narrative about how the Phillips + curve changed over time. Viewer can trace each decade's economic path. However, + no directional arrows within paths, no start/end annotations — temporal + direction is ambiguous without these cues. + spec_compliance: + score: 13 + max: 15 + items: + - id: SC-01 + name: Plot Type + score: 5 + max: 5 + passed: true + comment: Connected scatter plot achieved via LineChart with showMark:true + and continuous linear xAxis. Correct approach for MUI X community tier. + - id: SC-02 + name: Required Features + score: 2 + max: 4 + passed: false + comment: 'Points connected in chronological order ✓. Markers at each point + ✓. Temporal color encoding via decades ✓. BUT: missing text annotations + for key time points (spec: ''should be annotated''). Missing directional + indicators within each decade''s path (arrows or intra-path gradient).' + - id: SC-03 + name: Data Mapping + score: 3 + max: 3 + passed: true + comment: X=Unemployment Rate, Y=Inflation Rate, time encoded via decade color + segmentation. All 40 data points (1970-2009) visible. + - id: SC-04 + name: Title & Legend + score: 3 + max: 3 + passed: true + comment: 'Title: ''Phillips Curve · scatter-connected-temporal · javascript + · muix · anyplot.ai'' matches required format with descriptive prefix. Legend: + 1970s/1980s/1990s/2000s labels correct.' + data_quality: + score: 14 + max: 15 + items: + - id: DQ-01 + name: Feature Coverage + score: 5 + max: 6 + passed: true + comment: 'Four decades showing different Phillips curve dynamics: 1970s high-inflation + loops, 1980s disinflation, 1990s Great Moderation, 2000s with 2008 deflation. + Good variety of path shapes and directions.' + - id: DQ-02 + name: Realistic Context + score: 5 + max: 5 + passed: true + comment: US Phillips curve 1970-2009 is a classic, neutral, well-known macroeconomic + dataset. Real-world scenario, educationally valuable. + - id: DQ-03 + name: Appropriate Scale + score: 4 + max: 4 + passed: true + comment: Unemployment ~4-10%, inflation -0.4 to 13.5% — historically accurate + ranges for US 1970-2009. 2009 deflation (-0.4%) and 1980 peak inflation + (13.5%) are factually plausible. + code_quality: + score: 10 + max: 10 + items: + - id: CQ-01 + name: KISS Structure + score: 3 + max: 3 + passed: true + comment: 'Clean flat structure: imports → data → single exported component. + No nested functions or classes.' + - id: CQ-02 + name: Reproducibility + score: 2 + max: 2 + passed: true + comment: All data hard-coded inline — fully deterministic, no RNG. + - id: CQ-03 + name: Clean Imports + score: 2 + max: 2 + passed: true + comment: LineChart, Box, Typography — all three are used. No unused imports. + - id: CQ-04 + name: Code Elegance + score: 2 + max: 2 + passed: true + comment: Decade segmentation via map+ternary is clean. Box+Typography for + custom title is appropriate. No over-engineering. + - id: CQ-05 + name: Output & API + score: 1 + max: 1 + passed: true + comment: Community @mui/x-charts only. skipAnimation set. window.ANYPLOT_SIZE + and window.ANYPLOT_TOKENS used correctly per harness contract. + library_mastery: + score: 5 + max: 10 + items: + - id: LM-01 + name: Idiomatic Usage + score: 3 + max: 5 + passed: true + comment: 'Correct harness patterns: ANYPLOT_TOKENS, ANYPLOT_SIZE, skipAnimation. + slotProps.legend for legend customization. sx for CSS-in-JS internal styling. + Correct but doesn''t leverage the library''s best advanced patterns.' + - id: LM-02 + name: Distinctive Features + score: 2 + max: 5 + passed: false + comment: slotProps.legend with direction/position/itemMark configuration and + sx targeting .MuiLineElement-root are MUI X-specific. However, the overall + approach (LineChart with showMark) is fairly generic and could be replicated + in Recharts/Chart.js with minor changes. + verdict: REJECTED +impl_tags: + dependencies: [] + techniques: [] + patterns: + - data-generation + dataprep: [] + styling: [] From 5fe726a16b16c73630ecaa2cca1566f16aab265d Mon Sep 17 00:00:00 2001 From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com> Date: Wed, 10 Jun 2026 00:13:21 +0000 Subject: [PATCH 4/5] fix(muix): address review feedback for scatter-connected-temporal Attempt 1/3 - fixes based on AI review Co-Authored-By: Claude Sonnet 4.6 --- .../implementations/javascript/muix.tsx | 105 +++++++++++++++++- 1 file changed, 100 insertions(+), 5 deletions(-) diff --git a/plots/scatter-connected-temporal/implementations/javascript/muix.tsx b/plots/scatter-connected-temporal/implementations/javascript/muix.tsx index 9eb29f7319..304aaaae30 100644 --- a/plots/scatter-connected-temporal/implementations/javascript/muix.tsx +++ b/plots/scatter-connected-temporal/implementations/javascript/muix.tsx @@ -3,14 +3,13 @@ // Library: muix 7.29.1 | JavaScript 22.22.3 // Quality: 81/100 | Created: 2026-06-09 -import { LineChart } from "@mui/x-charts/LineChart"; +import { LineChart, useXScale, useYScale } from "@mui/x-charts"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; const t = window.ANYPLOT_TOKENS; // US Phillips curve: unemployment rate (%) vs. inflation rate (%), 1970–2009 -// Data is synthetic-realistic based on US macroeconomic trends const unemployment = [ 4.9, 5.9, 5.6, 4.9, 5.6, 8.5, 7.7, 7.1, 6.1, 5.8, // 1970-1979 7.1, 7.6, 9.7, 9.6, 7.5, 7.2, 7.0, 6.2, 5.5, 5.3, // 1980-1989 @@ -31,8 +30,100 @@ const s1980s = inflation.map((v, i) => (i >= 9 && i <= 19 ? v : null)); const s1990s = inflation.map((v, i) => (i >= 19 && i <= 29 ? v : null)); const s2000s = inflation.map((v, i) => (i >= 29 ? v : null)); -// Title: "Phillips Curve · scatter-connected-temporal · javascript · muix · anyplot.ai" = 79 chars -// Scaled fontsize: round(22 × 67/79) = 19 px +// Decade start/end + notable event year annotations [index, label, dx, dy] +const KEY_POINTS = [ + { i: 0, label: "1970", dx: -30, dy: -10 }, + { i: 3, label: "1973", dx: 8, dy: -10 }, // oil shock + { i: 9, label: "1979", dx: 10, dy: -8 }, + { i: 10, label: "1980", dx: -30, dy: -10 }, + { i: 19, label: "1989", dx: 12, dy: 12 }, + { i: 20, label: "1990", dx: -30, dy: -8 }, + { i: 29, label: "1999", dx: 12, dy: 6 }, + { i: 30, label: "2000", dx: -30, dy: -8 }, + { i: 38, label: "2008", dx: 10, dy: -10 }, // financial crisis + { i: 39, label: "2009", dx: 10, dy: 8 }, +]; + +// One directional arrow per decade at its midpoint to show temporal flow +const ARROWS = [ + { i: 5, color: t.palette[0] }, // 1975 (1970s midpoint) + { i: 15, color: t.palette[1] }, // 1985 (1980s midpoint) + { i: 24, color: t.palette[2] }, // 1994 (1990s midpoint) + { i: 34, color: t.palette[3] }, // 2004 (2000s midpoint) +]; + +// Custom overlay rendered inside the LineChart SVG via the children prop. +// Uses useXScale/useYScale (MUI X composition hooks) to convert data coordinates +// to SVG pixel positions for year annotations and directional arrows. +function TemporalOverlay() { + const xScale = useXScale(); + const yScale = useYScale(); + if (!xScale || !yScale) return null; + + return ( + + + {ARROWS.map(({ color }, idx) => ( + + + + ))} + + + {/* Direction arrows at decade midpoints */} + {ARROWS.map(({ i, color }, idx) => { + const x1 = xScale(unemployment[i - 1]); + const y1 = yScale(inflation[i - 1]); + const x2 = xScale(unemployment[i + 1]); + const y2 = yScale(inflation[i + 1]); + if (x1 == null || y1 == null || x2 == null || y2 == null) return null; + const mx = (x1 + x2) / 2; + const my = (y1 + y2) / 2; + const dx = x2 - x1; + const dy = y2 - y1; + const len = Math.sqrt(dx * dx + dy * dy) || 1; + const s = 20 / len; + return ( + + ); + })} + + {/* Year annotations at decade boundaries and notable events */} + {KEY_POINTS.map(({ i, label, dx, dy }) => { + const x = xScale(unemployment[i]); + const y = yScale(inflation[i]); + if (x == null || y == null) return null; + return ( + + {label} + + ); + })} + + ); +} + +// Larger filled markers (r=6) with page-bg outline to distinguish connected-scatter from plain line +function CustomMark({ x, y, color }) { + return ; +} + const TITLE_H = 52; export default function Chart() { @@ -91,6 +182,7 @@ export default function Chart() { { data: s1990s, label: "1990s", color: t.palette[2], showMark: true, curve: "linear" }, { data: s2000s, label: "2000s", color: t.palette[3], showMark: true, curve: "linear" }, ]} + slots={{ mark: CustomMark }} slotProps={{ legend: { direction: "row", @@ -102,8 +194,11 @@ export default function Chart() { }} sx={{ "& .MuiLineElement-root": { strokeWidth: 2.5 }, + "& .MuiChartsGrid-root line": { strokeOpacity: 0.25 }, }} - /> + > + + ); } From 8fe5df487ed6a80483958264c2ed6edb7050f664 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 10 Jun 2026 00:21:00 +0000 Subject: [PATCH 5/5] chore(muix): update quality score 90 and review feedback for scatter-connected-temporal --- .../implementations/javascript/muix.tsx | 2 +- .../metadata/javascript/muix.yaml | 240 +++++++++--------- 2 files changed, 115 insertions(+), 127 deletions(-) diff --git a/plots/scatter-connected-temporal/implementations/javascript/muix.tsx b/plots/scatter-connected-temporal/implementations/javascript/muix.tsx index 304aaaae30..081166c23a 100644 --- a/plots/scatter-connected-temporal/implementations/javascript/muix.tsx +++ b/plots/scatter-connected-temporal/implementations/javascript/muix.tsx @@ -1,7 +1,7 @@ // anyplot.ai // scatter-connected-temporal: Connected Scatter Plot with Temporal Path // Library: muix 7.29.1 | JavaScript 22.22.3 -// Quality: 81/100 | Created: 2026-06-09 +// Quality: 90/100 | Updated: 2026-06-10 import { LineChart, useXScale, useYScale } from "@mui/x-charts"; import Box from "@mui/material/Box"; diff --git a/plots/scatter-connected-temporal/metadata/javascript/muix.yaml b/plots/scatter-connected-temporal/metadata/javascript/muix.yaml index 36367f9e02..d84f3cd9ed 100644 --- a/plots/scatter-connected-temporal/metadata/javascript/muix.yaml +++ b/plots/scatter-connected-temporal/metadata/javascript/muix.yaml @@ -2,7 +2,7 @@ library: muix language: javascript specification_id: scatter-connected-temporal created: '2026-06-09T23:50:44Z' -updated: '2026-06-09T23:57:40Z' +updated: '2026-06-10T00:21:00Z' generated_by: claude-sonnet workflow_run: 27242702921 issue: 4675 @@ -12,140 +12,129 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/scatter-c preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/muix/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/muix/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/muix/plot-dark.html -quality_score: 81 +quality_score: 90 review: strengths: - - Correct Imprint palette in canonical order (1970s→green, 1980s→lavender, 1990s→blue, - 2000s→ochre) - - All font sizes explicitly set — tick labels 14px, axis labels 16px, title 19px - (correctly scaled for 79-char title) - - 'Fully theme-adaptive: pageBg for container background, ThemeProvider handles - all chrome' - - Data colors identical between light and dark renders — only chrome flips as required - - US Phillips Curve 1970–2009 is a perfect real-world dataset for this chart type - - Clean KISS structure with deterministic hard-coded data - - skipAnimation and window.ANYPLOT_SIZE used correctly per harness contract - - 'Title format correct: Descriptive prefix + spec-id · javascript · muix · anyplot.ai' + - 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 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: - - Missing temporal direction indicators within each decade path — the spec explicitly - requests arrows or a gradient to show which direction time flows along each connected - path; without them a viewer cannot tell which end of the 1970s path is 1970 vs - 1979 - - Missing text annotations for key time points — spec explicitly requires labels - for start, end, and notable years (e.g. 1970, 1979, 1980, 1989, 1990, 1999, 2000, - 2009 at minimum; notable events like 1973 oil shock or 2008 crisis are ideal); - MUI X ScatterChart or LineChart mark slots can render SVG text annotations - - Markers are small open circles — with only 10 data points per series (sparse per - style guide), markers should be larger and more prominent to distinguish the connected - scatter from a plain line chart; increase mark size via slotProps or custom mark - component - - Grid has no explicit opacity tuning — both horizontal and vertical grids are on - but use MUI default opacity; explicit grid opacity (e.g. via sx targeting .MuiChartsGrid-root, - or gridAxis stroke-opacity) would make the grid more subtle and reduce visual - noise in the dense overlap area - - LM-02 low — the implementation uses MUI X as a generic line chart; consider using - a custom mark slot (slotProps.mark) to render styled scatter markers, or add reference - lines / highlighted areas specific to MUI X community features + - Title font size (19px CSS) is slightly below the 22px CSS guideline for JS libraries; + minor legibility reduction at small display sizes + - Annotation text (fontSize=12 SVG units) is on the smaller side for mobile readability + — increase to 13-14 + - MUI X default chart frame/border retained; removing or softening via sx override + 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 dx/dy offsets image_description: |- Light render (plot-light.png): - Background: Warm off-white (#FAF8F1) — correct anyplot light surface, no pure white visible - Chrome: Title "Phillips Curve · scatter-connected-temporal · javascript · muix · anyplot.ai" at 19px in dark ink, fully readable. X-axis label "Unemployment Rate (%)" and Y-axis label "Inflation Rate (%)" in dark ink at 16px, both readable. Tick labels in dark ink at 14px, all readable. Legend at top-right with decade labels (1970s, 1980s, 1990s, 2000s) in dark ink at 14px, fully visible and not overlapping data. - Data: Four connected-scatter paths: 1970s in brand green (#009E73), 1980s in lavender (#C475FD), 1990s in blue (#4467A3), 2000s in ochre (#BD8233). Each path has small open-circle markers at each data point (10 per decade). Lines connect points in temporal (chronological) order. Both horizontal and vertical grid lines visible at default MUI X opacity. No arrows or annotations indicating temporal direction within paths. - Legibility verdict: PASS — all text clearly readable against the warm off-white background; no light-on-light issues + Background: Warm off-white approximately #FAF8F1 — correct light theme surface + Chrome: Title "Phillips Curve · scatter-connected-temporal · javascript · muix · anyplot.ai" in dark ink, centered at top (fontSize 19 CSS). X-axis label "Unemployment Rate (%)" and Y-axis label "Inflation Rate (%)" in dark ink with explicit sizes. Tick labels (fontSize 14 CSS) clearly readable. Year annotation labels (fontSize 12 SVG) visible but small. + Data: 4 decade paths — 1970s in #009E73 (first series, brand green ✓), 1980s in #C475FD (lavender), 1990s in #4467A3 (blue), 2000s in #BD8233 (ochre). Custom circle markers (r=6) with page-bg outline stroke. Directional arrowheads at decade midpoints. Year annotations at 1970, 1973, 1979, 1980, 1989, 1990, 1999, 2000, 2008, 2009. + Legibility verdict: PASS — all text readable against warm off-white background Dark render (plot-dark.png): - Background: Warm near-black (#1A1A17 or very close) — correct anyplot dark surface, no pure black visible - Chrome: Title in light ink, fully readable against the dark background. Axis labels in light ink, readable. Tick labels in light-grey ink, readable. Legend labels in light ink. ThemeProvider correctly flips all chrome from dark to light text. No dark-on-dark issues detected anywhere. - Data: Data colors are identical to the light render — 1970s green, 1980s lavender, 1990s blue, 2000s ochre — confirming the Imprint palette colors do not flip between themes. Grid lines are lighter (adapting to the dark background). The brand green #009E73 is clearly visible on the dark surface. - Legibility verdict: PASS — all text clearly readable against the warm near-black background; no dark-on-dark failures observed + Background: Near-black approximately #1A1A17 — correct dark theme surface + Chrome: Title, axis labels, and tick labels all render in light/cream-colored text — no dark-on-dark failures detected. Year annotations use t.inkSoft which is theme-adaptive. Chart frame and grid lines adapt correctly. + Data: Colors identical to light render — 1970s green, 1980s lavender, 1990s blue, 2000s ochre. Custom markers and arrowheads at same positions with same colors. Chrome-only flip confirmed. + Legibility verdict: PASS — all text clearly readable against near-black background, no dark-on-dark failures criteria_checklist: visual_quality: - score: 29 + score: 27 max: 30 items: - id: VQ-01 name: Text Legibility - score: 8 + score: 6 max: 8 passed: true - comment: 'All font sizes explicitly set: title 19px (correctly scaled for - 79-char string), axis labels 16px, tick labels 14px, legend 14px. Readable - in both themes.' + comment: 'All font sizes explicitly set (title 19px CSS, axis labels 16px, + ticks 14px, annotations 12px SVG). All readable in both themes. Slight dock: + title below 22px CSS guideline and annotations small for mobile.' - id: VQ-02 name: No Overlap - score: 6 + score: 5 max: 6 passed: true - comment: No text overlaps. Legend in top-right does not overlap data. Path - intersections are data-inherent for a Phillips curve. + comment: Decade-boundary labels use opposite dx/dy offsets to minimize crowding. + Lower-left cluster is tight but readable without clear collision. - id: VQ-03 name: Element Visibility - score: 5 + score: 6 max: 6 passed: true - comment: Lines at strokeWidth 2.5 are clear. Markers (open circles) are visible - but small for sparse data (10 points/series); should be more prominent to - distinguish from a plain line chart. + comment: Custom circle marks (r=6 CSS px) with page-bg stroke are perfectly + sized for 10 points per series. Line strokeWidth=2.5 appropriate for data + density. - id: VQ-04 name: Color Accessibility score: 2 max: 2 passed: true - comment: Imprint palette positions 1-4 are colorblind-safe by design. Four - hue families (green/purple/blue/ochre) are perceptually distinct. + comment: Imprint palette provides CVD-safe spacing across 4 hue families. + Directional arrows use same series colors for redundant encoding. - id: VQ-05 name: Layout & Canvas score: 4 max: 4 passed: true - comment: Canvas gate passed. Plot fills ~60-70% of canvas. Balanced margins. - Legend at top-right not floating isolated. + comment: No canvas gate failure. Chart fills 848/900 CSS px height. Balanced + margins, legend inside plot area top-right, no edge clipping. - id: VQ-06 name: Axis Labels & Title score: 2 max: 2 passed: true - comment: 'X: ''Unemployment Rate (%)'' with units. Y: ''Inflation Rate (%)'' - with units. Title includes descriptive prefix ''Phillips Curve''.' + comment: Unemployment Rate (%) and Inflation Rate (%) with units. Descriptive + title prefix Phillips Curve. - id: VQ-07 name: Palette Compliance score: 2 max: 2 passed: true - comment: First series (1970s) uses t.palette[0]=#009E73 (brand green). Subsequent - series use palette[1-3] in canonical order. Background uses t.pageBg. ThemeProvider - handles chrome. Data colors identical across both renders. + comment: 'First series #009E73 correct. Imprint palette canonical order for + subsequent series. Background #FAF8F1/#1A1A17. Chrome theme-correct in both + renders.' design_excellence: - score: 10 + score: 15 max: 20 items: - id: DE-01 name: Aesthetic Sophistication - score: 4 + score: 6 max: 8 - passed: false - comment: 'Well-configured library default with correct palette and explicit - sizing. Custom Box+Typography title layout adds some polish. Missing: temporal - arrows, annotations, refined grid opacity, explicit spine control.' + passed: true + comment: 'Clearly above generic defaults: Imprint palette correctly applied, + custom SVG markers with page-bg outlines, directional arrowheads, professional + Phillips Curve narrative. Not quite publication-ready.' - id: DE-02 name: Visual Refinement - score: 3 + score: 4 max: 6 - passed: false - comment: strokeWidth 2.5 explicitly set. Legend styled via slotProps. Font - sizes tuned. MUI X default is already reasonably clean. No explicit grid - opacity tuning, no spine control beyond MUI defaults. + passed: true + comment: Grid opacity reduced to 0.25 via sx override, custom circle marks, + line strokeWidth set. MUI X default chart frame retained, capping at good + not perfect. - id: DE-03 name: Data Storytelling - score: 3 + score: 5 max: 6 - passed: false - comment: Decade-based color segmentation creates narrative about how the Phillips - curve changed over time. Viewer can trace each decade's economic path. However, - no directional arrows within paths, no start/end annotations — temporal - direction is ambiguous without these cues. + passed: true + comment: 'Clear visual hierarchy: color differentiates decades, arrows encode + direction, annotations at 1973 oil shock and 2008 financial crisis create + focal narrative moments.' spec_compliance: - score: 13 + score: 15 max: 15 items: - id: SC-01 @@ -153,122 +142,121 @@ review: score: 5 max: 5 passed: true - comment: Connected scatter plot achieved via LineChart with showMark:true - and continuous linear xAxis. Correct approach for MUI X community tier. + comment: Correct connected scatter with temporal path. - id: SC-02 name: Required Features - score: 2 + score: 4 max: 4 - passed: false - comment: 'Points connected in chronological order ✓. Markers at each point - ✓. Temporal color encoding via decades ✓. BUT: missing text annotations - for key time points (spec: ''should be annotated''). Missing directional - indicators within each decade''s path (arrows or intra-path gradient).' + passed: true + comment: 'All features present: chronological connection, key point annotations, + directional arrows, visible markers, color temporal encoding.' - id: SC-03 name: Data Mapping score: 3 max: 3 passed: true - comment: X=Unemployment Rate, Y=Inflation Rate, time encoded via decade color - segmentation. All 40 data points (1970-2009) visible. + comment: X=unemployment, Y=inflation, time as traversal order and decade hue. + All 40 years shown. - id: SC-04 name: Title & Legend score: 3 max: 3 passed: true - comment: 'Title: ''Phillips Curve · scatter-connected-temporal · javascript - · muix · anyplot.ai'' matches required format with descriptive prefix. Legend: - 1970s/1980s/1990s/2000s labels correct.' + comment: Title follows Phillips Curve · scatter-connected-temporal · javascript + · muix · anyplot.ai format. Legend shows decade labels. data_quality: - score: 14 + score: 15 max: 15 items: - id: DQ-01 name: Feature Coverage - score: 5 + score: 6 max: 6 passed: true - comment: 'Four decades showing different Phillips curve dynamics: 1970s high-inflation - loops, 1980s disinflation, 1990s Great Moderation, 2000s with 2008 deflation. - Good variety of path shapes and directions.' + comment: 'Shows all aspects: connected path, directional flow, multi-series + temporal segmentation, annotations at economic events.' - id: DQ-02 name: Realistic Context score: 5 max: 5 passed: true - comment: US Phillips curve 1970-2009 is a classic, neutral, well-known macroeconomic - dataset. Real-world scenario, educationally valuable. + comment: US Phillips Curve data 1970-2009 is real and well-known. Neutral + economic domain. - id: DQ-03 name: Appropriate Scale score: 4 max: 4 passed: true - comment: Unemployment ~4-10%, inflation -0.4 to 13.5% — historically accurate - ranges for US 1970-2009. 2009 deflation (-0.4%) and 1980 peak inflation - (13.5%) are factually plausible. + comment: 'Values historically accurate: 1980 inflation 13.5%, 2009 unemployment + 9.3%, negative 2009 inflation -0.4%.' code_quality: - score: 10 + score: 9 max: 10 items: - id: CQ-01 name: KISS Structure - score: 3 + score: 2 max: 3 passed: true - comment: 'Clean flat structure: imports → data → single exported component. - No nested functions or classes.' + comment: Clean structure but two helper components (TemporalOverlay, CustomMark) + add complexity. Both are architecturally necessary for React/MUI X hooks + pattern. - id: CQ-02 name: Reproducibility score: 2 max: 2 passed: true - comment: All data hard-coded inline — fully deterministic, no RNG. + comment: All data hard-coded as constants. Fully deterministic, no RNG. - id: CQ-03 name: Clean Imports score: 2 max: 2 passed: true - comment: LineChart, Box, Typography — all three are used. No unused imports. + comment: 'All imports used: LineChart, useXScale, useYScale, Box, Typography.' - id: CQ-04 name: Code Elegance score: 2 max: 2 passed: true - comment: Decade segmentation via map+ternary is clean. Box+Typography for - custom title is appropriate. No over-engineering. + comment: Clean idiomatic React/MUI X code. Null-masking for decade segmentation + is elegant. No fake functionality. - id: CQ-05 name: Output & API score: 1 max: 1 passed: true - comment: Community @mui/x-charts only. skipAnimation set. window.ANYPLOT_SIZE - and window.ANYPLOT_TOKENS used correctly per harness contract. + comment: Harness handles plot-light.png/dark.png + HTML output. library_mastery: - score: 5 + score: 9 max: 10 items: - id: LM-01 name: Idiomatic Usage - score: 3 + score: 5 max: 5 passed: true - comment: 'Correct harness patterns: ANYPLOT_TOKENS, ANYPLOT_SIZE, skipAnimation. - slotProps.legend for legend customization. sx for CSS-in-JS internal styling. - Correct but doesn''t leverage the library''s best advanced patterns.' + comment: 'Expert use of MUI X composition pattern: useXScale/useYScale hooks + inside child component, slots.mark, slotProps.legend, skipAnimation, sx + overrides — all idiomatic.' - id: LM-02 name: Distinctive Features - score: 2 + score: 4 max: 5 - passed: false - comment: slotProps.legend with direction/position/itemMark configuration and - sx targeting .MuiLineElement-root are MUI X-specific. However, the overall - approach (LineChart with showMark) is fairly generic and could be replicated - in Recharts/Chart.js with minor changes. - verdict: REJECTED + passed: true + comment: 'useXScale/useYScale composition hooks for data-coordinate SVG overlay + is distinctive MUI X feature. slots.mark custom renderer. Minor dock: arrowhead + SVG is hand-rolled rather than a native MUI X feature.' + verdict: APPROVED impl_tags: dependencies: [] - techniques: [] + techniques: + - annotations + - html-export + - layer-composition patterns: - data-generation + - iteration-over-groups dataprep: [] - styling: [] + styling: + - edge-highlighting + - grid-styling