From 73d67fb9f1bbb5a5c63f6c79cabc9cec943742ea Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 24 Jul 2026 18:32:20 +0000 Subject: [PATCH 1/3] feat(muix): implement quiver-basic --- .../implementations/javascript/muix.tsx | 161 ++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 plots/quiver-basic/implementations/javascript/muix.tsx diff --git a/plots/quiver-basic/implementations/javascript/muix.tsx b/plots/quiver-basic/implementations/javascript/muix.tsx new file mode 100644 index 0000000000..7b9c27382f --- /dev/null +++ b/plots/quiver-basic/implementations/javascript/muix.tsx @@ -0,0 +1,161 @@ +//# anyplot-orientation: square +// anyplot.ai +// quiver-basic: Basic Quiver Plot +// Library: MUI X Charts | React | Node 22 +// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope. +// Quality: pending | Created: 2026-07-24 + +import { ChartContainer } from "@mui/x-charts/ChartContainer"; +import { ChartsXAxis } from "@mui/x-charts/ChartsXAxis"; +import { ChartsYAxis } from "@mui/x-charts/ChartsYAxis"; +import { useXScale, useYScale, useDrawingArea } from "@mui/x-charts/hooks"; + +const t = window.ANYPLOT_TOKENS; +const FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; + +// --- Data: cyclonic wind field around a low-pressure center ---------------- +// Rankine vortex model — solid-body rotation inside the core radius, decaying +// tangential flow outside it. Positions are km from the storm center; wind +// speed is m/s. This produces the calm "eye" at the center and the peak wind +// band at the core radius that real low-pressure systems exhibit. +const DOMAIN = 7; // km, grid spans [-DOMAIN, DOMAIN] on both axes +const GRID_N = 15; // 15x15 = 225 arrows +const CORE_RADIUS = 3.2; // km, radius of peak tangential wind +const PEAK_SPEED = 22; // m/s, tangential wind speed at the core radius +const ARROW_SCALE = 0.85 / PEAK_SPEED; // km of arrow length per m/s of speed + +const VECTORS = []; +for (let i = 0; i < GRID_N; i += 1) { + for (let j = 0; j < GRID_N; j += 1) { + const x = -DOMAIN + (2 * DOMAIN * i) / (GRID_N - 1); + const y = -DOMAIN + (2 * DOMAIN * j) / (GRID_N - 1); + const r = Math.sqrt(x * x + y * y) + 1e-6; + const speed = r <= CORE_RADIUS ? (PEAK_SPEED * r) / CORE_RADIUS : (PEAK_SPEED * CORE_RADIUS) / r; + const u = (-y / r) * speed; // horizontal component (dx) + const v = (x / r) * speed; // vertical component (dy) + VECTORS.push({ x, y, u, v, speed }); + } +} + +// Interpolate between the two imprint_seq stops by a 0..1 fraction. +function lerpColor(hexA, hexB, frac) { + const a = parseInt(hexA.slice(1), 16); + const b = parseInt(hexB.slice(1), 16); + const ar = (a >> 16) & 255, ag = (a >> 8) & 255, ab = a & 255; + const br = (b >> 16) & 255, bg = (b >> 8) & 255, bb = b & 255; + const rr = Math.round(ar + (br - ar) * frac); + const rg = Math.round(ag + (bg - ag) * frac); + const rb = Math.round(ab + (bb - ab) * frac); + return `rgb(${rr}, ${rg}, ${rb})`; +} + +// --- Arrows — drawn on the MUI X coordinate system via scale hooks --------- +function QuiverArrows() { + const xScale = useXScale(); + const yScale = useYScale(); + const HEAD = 10; // px + + return ( + + {VECTORS.map((vec, i) => { + const x1 = xScale(vec.x); + const y1 = yScale(vec.y); + const x2 = xScale(vec.x + vec.u * ARROW_SCALE); + const y2 = yScale(vec.y + vec.v * ARROW_SCALE); + const frac = Math.min(1, vec.speed / PEAK_SPEED); + const color = lerpColor(t.seq[0], t.seq[1], frac); + const angle = Math.atan2(y2 - y1, x2 - x1); + const a1 = angle - 0.4; + const a2 = angle + 0.4; + const headPoints = `${x2},${y2} ${x2 - HEAD * Math.cos(a1)},${y2 - HEAD * Math.sin(a1)} ${x2 - HEAD * Math.cos(a2)},${y2 - HEAD * Math.sin(a2)}`; + return ( + + + + + ); + })} + + ); +} + +// Colorbar gradient encoding wind speed magnitude. +function Colorbar() { + const { left, top, width: gW, height: gH } = useDrawingArea(); + const cbX = left + gW + 26; + const cbW = 18; + + return ( + <> + + + + + + + + + {PEAK_SPEED} + + + 0 + + + Wind Speed (m/s) + + + ); +} + +function ChartTitle({ text, fontSize }) { + const { left, top, width: gW } = useDrawingArea(); + return ( + + {text} + + ); +} + +export default function Chart() { + const W = window.ANYPLOT_SIZE.width; + const H = window.ANYPLOT_SIZE.height; + + const title = "Cyclonic Wind Field · quiver-basic · javascript · muix · anyplot.ai"; + const titleSize = title.length > 67 ? Math.round(22 * (67 / title.length)) : 22; + + const pad = 0.8; + + return ( + + + + + + + + ); +} From cf09fba2f6f7e442c8ce0efe3e72814046914e55 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 24 Jul 2026 18:32:33 +0000 Subject: [PATCH 2/3] chore(muix): add metadata for quiver-basic --- .../metadata/javascript/muix.yaml | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 plots/quiver-basic/metadata/javascript/muix.yaml diff --git a/plots/quiver-basic/metadata/javascript/muix.yaml b/plots/quiver-basic/metadata/javascript/muix.yaml new file mode 100644 index 0000000000..55dd2f4ad9 --- /dev/null +++ b/plots/quiver-basic/metadata/javascript/muix.yaml @@ -0,0 +1,21 @@ +# Per-library metadata for muix implementation of quiver-basic +# Auto-generated by impl-generate.yml + +library: muix +language: javascript +specification_id: quiver-basic +created: '2026-07-24T18:32:33Z' +updated: '2026-07-24T18:32:33Z' +generated_by: claude-sonnet +workflow_run: 30116916724 +issue: 1014 +language_version: 22.23.1 +library_version: 7.29.1 +preview_url_light: https://storage.googleapis.com/anyplot-images/plots/quiver-basic/javascript/muix/plot-light.png +preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/quiver-basic/javascript/muix/plot-dark.png +preview_html_light: https://storage.googleapis.com/anyplot-images/plots/quiver-basic/javascript/muix/plot-light.html +preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/quiver-basic/javascript/muix/plot-dark.html +quality_score: null +review: + strengths: [] + weaknesses: [] From 72a8e6dfe52ac51d489f727cd9c16f6d451d85a9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 24 Jul 2026 18:38:48 +0000 Subject: [PATCH 3/3] chore(muix): update quality score 91 and review feedback for quiver-basic --- .../implementations/javascript/muix.tsx | 4 + .../metadata/javascript/muix.yaml | 246 +++++++++++++++++- 2 files changed, 243 insertions(+), 7 deletions(-) diff --git a/plots/quiver-basic/implementations/javascript/muix.tsx b/plots/quiver-basic/implementations/javascript/muix.tsx index 7b9c27382f..6e336ec802 100644 --- a/plots/quiver-basic/implementations/javascript/muix.tsx +++ b/plots/quiver-basic/implementations/javascript/muix.tsx @@ -1,3 +1,7 @@ +// anyplot.ai +// quiver-basic: Basic Quiver Plot +// Library: muix 7.29.1 | JavaScript 22.23.1 +// Quality: 91/100 | Created: 2026-07-24 //# anyplot-orientation: square // anyplot.ai // quiver-basic: Basic Quiver Plot diff --git a/plots/quiver-basic/metadata/javascript/muix.yaml b/plots/quiver-basic/metadata/javascript/muix.yaml index 55dd2f4ad9..f8fbb0864d 100644 --- a/plots/quiver-basic/metadata/javascript/muix.yaml +++ b/plots/quiver-basic/metadata/javascript/muix.yaml @@ -1,11 +1,8 @@ -# Per-library metadata for muix implementation of quiver-basic -# Auto-generated by impl-generate.yml - library: muix language: javascript specification_id: quiver-basic created: '2026-07-24T18:32:33Z' -updated: '2026-07-24T18:32:33Z' +updated: '2026-07-24T18:38:48Z' generated_by: claude-sonnet workflow_run: 30116916724 issue: 1014 @@ -15,7 +12,242 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/quiver-ba preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/quiver-basic/javascript/muix/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/quiver-basic/javascript/muix/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/quiver-basic/javascript/muix/plot-dark.html -quality_score: null +quality_score: 91 review: - strengths: [] - weaknesses: [] + strengths: + - Physically accurate Rankine vortex model (solid-body core, inverse-decay outer + band) with correct counterclockwise rotation for a Northern-Hemisphere low-pressure + system — a genuinely thoughtful data-generation choice + - Creative, idiomatic use of MUI X's low-level ChartContainer plus useXScale/useYScale/useDrawingArea + hooks to render a genuine quiver overlay entirely within the library's coordinate + system, axes, and scales — the correct sanctioned escape hatch since the community + package has no native vector-field mark + - Continuous wind-speed magnitude correctly encoded with imprint_seq (brand green + to blue), matching the single-polarity nature of the data, with a matching custom + colorbar legend + - 'Both renders are fully theme-correct: warm off-white / near-black backgrounds, + theme-adaptive ink tokens for title/axis/colorbar text, identical data colors + across themes' + - No edge clipping — title, axis labels, and the colorbar + rotated axis label all + sit comfortably inside the 2400x2400 canvas with generous margin + - Correct mandated title format, explicit font sizing throughout, balanced 15x15 + grid with uniform arrow spacing and no overlap + weaknesses: + - No explicit visual callout (annotation or emphasis) marks the calm eye / peak-wind + band — the story is legible from color and arrow length alone but a labeled annotation + would push Data Storytelling from good to excellent + - Colorbar and title are custom-drawn text elements (ChartTitle, Colorbar components) + rather than using ChartContainer's built-in title/legend slots, which is a reasonable + but slightly less 'library-default' pattern + - No grid lines at all (fully removed rather than kept subtle) — a valid stylistic + choice per the style guide but slightly reduces precise value-reading against + the axes + image_description: |- + Light render (plot-light.png): + Background: Warm off-white, consistent with #FAF8F1 — not pure white. + Chrome: Bold dark title "Cyclonic Wind Field · quiver-basic · javascript · muix · anyplot.ai" centered at top, comfortably within the canvas (~55% width, no clipping). X/Y axis labels "X Position (km)" / "Y Position (km)" with units, dark ink, clearly legible. Tick labels from -7 to 7 on both axes, evenly spaced, dark and readable against the light background. A vertical colorbar sits to the right of the plot with "22" at top, "0" at bottom, and a rotated "Wind Speed (m/s)" label — all fully inside the canvas with clear margin to the right edge. + Data: 225 arrows (15x15 grid) arranged in a circular flow pattern. Arrows near the center are short and pale green (near-zero speed, the calm "eye"), transitioning to longer, blue arrows at the core radius band (peak speed), then shrinking again toward the domain edge as speed decays outward — a continuous green-to-blue gradient (imprint_seq) encodes magnitude. Rotation is counterclockwise, consistent with a Northern-Hemisphere cyclone. + Legibility verdict: PASS + + Dark render (plot-dark.png): + Background: Warm near-black, consistent with #1A1A17 — not pure black. + Chrome: Same title, now rendered in light/off-white ink, fully legible against the dark background. Axis labels and tick labels are light-colored and clearly readable — no dark-on-dark text anywhere. Colorbar labels ("22", "0", "Wind Speed (m/s)") are light-colored and legible, same position and margins as the light render, no clipping. + Data: Identical arrow layout, lengths, and green-to-blue color gradient as the light render — confirmed the data colors do not change between themes, only the chrome (background, text) flips as expected. + Legibility verdict: PASS + criteria_checklist: + visual_quality: + score: 29 + max: 30 + items: + - id: VQ-01 + name: Text Legibility + score: 7 + max: 8 + passed: true + comment: Explicit font sizes throughout, well-proportioned title (67 chars + at 22px, no scaling needed), readable in both themes + - id: VQ-02 + name: No Overlap + score: 6 + max: 6 + passed: true + comment: No text/data collisions; colorbar clearly separated from plot and + axis labels + - id: VQ-03 + name: Element Visibility + score: 6 + max: 6 + passed: true + comment: 225 arrows well-sized and spaced for a 15x15 grid, no overplotting + - id: VQ-04 + name: Color Accessibility + score: 2 + max: 2 + passed: true + comment: Green-to-blue imprint_seq gradient, no red-green reliance, good contrast + on both surfaces + - id: VQ-05 + name: Layout & Canvas + score: 4 + max: 4 + passed: true + comment: Plot area fills ~70% of canvas, balanced margins, colorbar integrated, + nothing cut off + - id: VQ-06 + name: Axis Labels & Title + score: 2 + max: 2 + passed: true + comment: '"X Position (km)" / "Y Position (km)" — descriptive with units' + - id: VQ-07 + name: Palette Compliance + score: 2 + max: 2 + passed: true + comment: imprint_seq correctly used for single-polarity continuous magnitude; + theme-correct backgrounds and chrome in both renders + design_excellence: + score: 15 + max: 20 + items: + - id: DE-01 + name: Aesthetic Sophistication + score: 6 + max: 8 + passed: true + comment: Custom Rankine vortex data, custom colorbar, thoughtful typography + — clearly above defaults, short of full publication polish + - id: DE-02 + name: Visual Refinement + score: 5 + max: 6 + passed: true + comment: L-shaped axis lines only, no grid clutter, generous whitespace + - id: DE-03 + name: Data Storytelling + score: 4 + max: 6 + passed: true + comment: Calm eye and peak-wind band are visible through color/length hierarchy, + but no explicit annotation calls them out + spec_compliance: + score: 15 + max: 15 + items: + - id: SC-01 + name: Plot Type + score: 5 + max: 5 + passed: true + comment: Correct quiver/vector-field plot with arrows at grid points + - id: SC-02 + name: Required Features + score: 4 + max: 4 + passed: true + comment: x, y, u, v all represented; 225 arrows within the 100-400 spec range; + magnitude-as-color optional feature used + - id: SC-03 + name: Data Mapping + score: 3 + max: 3 + passed: true + comment: X/Y correctly assigned, full data range shown with padding + - id: SC-04 + name: Title & Legend + score: 3 + max: 3 + passed: true + comment: Title format matches spec exactly; colorbar serves as the magnitude + legend with correct labels + data_quality: + score: 15 + max: 15 + items: + - id: DQ-01 + name: Feature Coverage + score: 6 + max: 6 + passed: true + comment: Shows full range of direction, magnitude, calm core, and decay — + all quiver-plot aspects present + - id: DQ-02 + name: Realistic Context + score: 5 + max: 5 + passed: true + comment: Real, neutral meteorological scenario (cyclonic wind field), matches + spec's Applications section + - id: DQ-03 + name: Appropriate Scale + score: 4 + max: 4 + passed: true + comment: 22 m/s peak speed and km-scale domain are physically plausible for + a rotating wind system + code_quality: + score: 9 + max: 10 + items: + - id: CQ-01 + name: KISS Structure + score: 2 + max: 3 + passed: true + comment: A few small helper components (QuiverArrows, Colorbar, ChartTitle) + — mostly necessitated by hook-scoping requirements, not gratuitous + - id: CQ-02 + name: Reproducibility + score: 2 + max: 2 + passed: true + comment: Fully deterministic Rankine-vortex formula, no randomness + - id: CQ-03 + name: Clean Imports + score: 2 + max: 2 + passed: true + comment: Only imports actually used (ChartContainer, axes, scale hooks) + - id: CQ-04 + name: Code Elegance + score: 2 + max: 2 + passed: true + comment: Appropriate complexity for a custom vector-field overlay, no fake + functionality + - id: CQ-05 + name: Output & API + score: 1 + max: 1 + passed: true + comment: Relies on the harness's mount/screenshot contract correctly, skipAnimation + set, current API + library_mastery: + score: 8 + max: 10 + items: + - id: LM-01 + name: Idiomatic Usage + score: 4 + max: 5 + passed: true + comment: Uses ChartContainer's sanctioned low-level composition API (the correct + approach since no native quiver mark exists in community MUI X) + - id: LM-02 + name: Distinctive Features + score: 4 + max: 5 + passed: true + comment: Genuinely distinctive use of useXScale/useYScale/useDrawingArea to + build custom SVG marks fully integrated with MUI X's axis/scale system + verdict: APPROVED +impl_tags: + dependencies: [] + techniques: + - colorbar + patterns: + - data-generation + dataprep: [] + styling: + - custom-colormap + - gradient-fill