feat(echarts): implement quiver-basic

[github-actions]

Implementation: quiver-basic - javascript/echarts

Implements the javascript/echarts version of quiver-basic.

File: plots/quiver-basic/implementations/javascript/echarts.js

Parent Issue: #1014

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white (#FAF8F1) background. Title "quiver-basic · javascript · echarts · anyplot.ai" in dark ink, centered and clearly readable. Axis titles "Weight w1"/"Weight w2" in dark ink; tick labels in softer grey-ink. A 13x11 grid of arrows (w1 ∈ [-3,9], w2 ∈ [-5,5]) all point toward a single convergence point at (3,1), marked by a small brand-green (#009E73) dot where the gradient vanishes. Arrow color runs green (flat) → blue (steep) via the Imprint imprint_seq sequential colormap, with a vertical "Steep"/"Flat" continuous legend on the right. Grid lines are thin and subtle but form a full box around the plot rather than an L-shaped frame. All text is readable against the light background — no light-on-light issues.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background, not pure black. Same layout; title and axis titles render in light ink, tick labels in lighter soft-grey, all clearly legible. Grid lines are faint (~15% opacity) but visible. Data colors (arrow green→blue gradient, brand-green convergence dot) are pixel-identical to the light render — only chrome flipped, exactly as required. No dark-on-dark failures anywhere.

Both renders pass the theme-readability check.

Score: 90/100

Category	Score	Max
Visual Quality	27	30
Design Excellence	14	20
Spec Compliance	15	15
Data Quality	14	15
Code Quality	10	10
Library Mastery	10	10
Total	90	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 (2/2)
• VQ-05: Layout & Canvas (3/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) - Gradient-descent narrative with a marked convergence point, custom renderItem arrowheads
• DE-02: Visual Refinement (3/6) - Full 4-sided box frame instead of default L-shaped frame
• DE-03: Data Storytelling (5/6) - Clear focal point and color hierarchy guide the viewer

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 (14/15)

• DQ-01: Feature Coverage (5/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 (10/10)

• LM-01: Idiomatic Usage (5/5) - Correct use of ECharts' custom-series API since there's no native quiver type
• LM-02: Distinctive Features (5/5) - renderItem shape composition + continuous visualMap legend

Score Caps Applied

• None

Strengths

• Creative, realistic framing: arrows show the negative-gradient (steepest-descent) direction over a toy 2-parameter loss bowl, with a visible dot marking the exact minimum where the gradient vanishes — far more compelling than a generic circular-rotation demo field.
• Correctly builds a genuine ECharts custom series (renderItem with api.coord/api.visual) since ECharts has no native quiver/vector-field type — idiomatic use of the library's most advanced rendering API rather than faking arrows with markLine/markPoint hacks.
• Continuous magnitude encoding uses the Imprint imprint_seq colormap (green→blue) via visualMap, correctly matching theme-adaptive chrome (identical data colors, only chrome flips between light/dark).
• Deterministic, seed-free data generation with no imports beyond the echarts global — clean, reproducible, KISS-compliant code.
• Arrow scaling adapts per-vector (shaft + proportionally-capped arrowhead) so both short near-minimum vectors and long boundary vectors stay legible without clutter.

Weaknesses

• Arrows in the low-magnitude band around the minimum (roughly w1∈[0,6], w2∈[-1,3]) shrink to near-invisible slivers — consider a minimum visual-length floor (e.g. sqrt/log compression of magnitude-to-length) so direction stays legible even where the true gradient is small.
• The forced axis padding (xAxis min=-4/max=10 vs data range -3..9, yAxis min=-6/max=6 vs data range -5..5) makes ECharts auto-place boundary ticks at the exact min/max in addition to interval ticks, producing uneven tick spacing (e.g. x-axis shows -4, -3, 0, 3, 6, 9, 10). Tighten min/max to align with the interval grid for even spacing.
• splitLine at the axis extents combined with the default axisLine renders a full 4-sided box around the plot area rather than the style guide's default L-shaped (bottom+left only) frame.

Issues Found

1. DE-02 LOW: Full box frame around the plot instead of the default L-shaped (bottom+left) frame
   • Fix: hide top/right splitLine or axisLine, or set axisLine: { show: false } on the non-primary sides so only bottom/left remain
2. VQ-05 LOW: Uneven axis tick spacing near the boundaries
   • Fix: set xAxis min/max to values that align with the tick interval (e.g. -3/9 or a multiple of 3 spanning past the data range) and similarly for yAxis

AI Feedback for Next Attempt

Strong submission overall — keep the gradient-descent narrative, the convergence-point dot, and the imprint_seq colorbar. For the next iteration, consider giving near-zero-magnitude arrows a minimum visible length so the low-gradient region stays legible, tighten the axis min/max so tick spacing near the boundaries is even, and trim the axis splitLine/axisLine to the default L-shaped frame instead of a full box.

Verdict: APPROVED