feat(echarts): implement errorbar-basic

[github-actions]

Implementation: errorbar-basic - javascript/echarts

Implements the javascript/echarts version of errorbar-basic.

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

Parent Issue: #973

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). Title "errorbar-basic · javascript · echarts · anyplot.ai" in dark ink, centered at top. Y-axis label "Wheat Yield (t/ha)" rotated 90° on left, X-axis label "Nitrogen Dose (kg N/ha)" at bottom — both in muted dark ink. Tick labels (0–7 on Y, 0/50/100/150/200/250/300 on X) in soft dark tone. Subtle horizontal gridlines only (Y-axis only, no vertical). Seven error bars in brand green (#009E73) with visible caps at both ends; circular center markers in the same green with a warm-white border for definition. The dose-response pattern (rising yields, plateau at N=150–200, slight decline) is clear. All text is readable against the light background — no legibility issues.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Title in near-white (t.ink = #F0EFE8), clearly visible. Axis labels and tick labels in light-grey (t.inkSoft = #B8B7B0) — readable against the dark surface with no dark-on-dark failures. Grid lines render as subtle lighter strokes. Data colors are identical to the light render — only chrome flipped. Brand green #009E73 reads well on the dark surface as expected. All text is readable against the dark background.

Both paragraphs confirm theme-readability PASS for both renders.

Score: 86/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	11	20
Spec Compliance	15	15
Data Quality	14	15
Code Quality	10	10
Library Mastery	7	10
Total	86	100

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — All text readable in both themes with correct t.ink/t.inkSoft tokens; title at fontSize 22 CSS px is slightly compact but within library guide defaults
• VQ-02: No Overlap (6/6) — 7 well-spaced data points; no collisions between bars, markers, labels, or ticks
• VQ-03: Element Visibility (6/6) — Error bars with caps clearly visible; symbolSize=16 markers are prominent and well-defined for sparse 7-point dataset
• VQ-04: Color Accessibility (2/2) — Single series in brand green #009E73; CVD-safe Imprint palette position 1; white borders add contrast
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed; generous grid margins (l:120 r:60 t:90 b:90); all elements within bounds
• VQ-06: Axis Labels & Title (2/2) — X: "Nitrogen Dose (kg N/ha)", Y: "Wheat Yield (t/ha)" — descriptive with units; title format correct
• VQ-07: Palette Compliance (2/2) — First (and only) series uses t.palette[0] (#009E73); backgroundColor: transparent; both themes render with correct warm surfaces

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) — Above default: custom renderItem implementation shows craft; white-bordered markers are a deliberate quality touch. Not raised further: no intentional visual hierarchy beyond z-layering, no emphasis elements
• DE-02: Visual Refinement (3/6) — Y-only gridlines (X splitLine: false), all chrome tokens applied, no unnecessary legend frame. Some refinement but no spine removal or explicit whitespace optimisation
• DE-03: Data Storytelling (3/6) — Data tells a clear agronomic dose-response story; white-bordered markers draw the eye to center values. Not raised further: no annotation at the peak yield point, no visual cue guiding the viewer to the key insight

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct error bar plot via ECharts custom series (stems + caps) with scatter overlay for center markers
• SC-02: Required Features (4/4) — Visible caps (capHW=20), consistent widths (lw=3), center markers, symmetric errors — all spec requirements met
• SC-03: Data Mapping (3/3) — X: categorical N doses 0–300 kg/ha; Y: yield means 2.1–5.9 t/ha; error: ±0.4–1.0 t/ha; full range visible
• SC-04: Title & Legend (3/3) — Title matches required format exactly; no legend appropriate for single-series

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — Error bars with caps and center values shown clearly. Minor gap: spec recommends multi-series comparison; only one series present
• DQ-02: Realistic Context (5/5) — Wheat yield / nitrogen fertilization is authentic agricultural research; values, error magnitudes, and dose-response curve shape are agronomically plausible; neutral context
• DQ-03: Appropriate Scale (4/4) — Y range 0–7 t/ha appropriate; 7 dose levels within spec's 3–20 group guidance; error magnitudes scale sensibly

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No wrapper functions or classes; renderItem is required ECharts API, not structural choice; clean flat organization
• CQ-02: Reproducibility (2/2) — All data hardcoded deterministically; no RNG
• CQ-03: Clean Imports (2/2) — No imports; echarts and ANYPLOT_TOKENS are harness-provided globals; only accesses what is needed
• CQ-04: Code Elegance (2/2) — Clean idiomatic ECharts code; no fake interactivity; appropriate complexity
• CQ-05: Output & API (1/1) — ECharts is INTERACTIVE_LIBRARIES; harness emits both .png and .html; animation: false; no DPR override; current ECharts 5 API

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Correct echarts.init pattern, animation: false, no explicit size/DPR, encode metadata on custom series, backgroundColor: transparent per library guide
• LM-02: Distinctive Features (3/5) — Uses ECharts' custom series type with renderItem (a distinctive ECharts feature for non-native elements); group primitive with children array for composing multi-shape elements; z-index layering — all ECharts-specific patterns

Score Caps Applied

• None

Strengths

• ECharts custom series with renderItem correctly implements error bar stems + caps + z-layered scatter markers — the right idiomatic approach for this chart type in ECharts
• All theme tokens applied correctly to both renders; no dark-on-dark or light-on-light failures
• Realistic agricultural dataset (wheat/nitrogen dose-response) with scientifically plausible values and growing error magnitudes
• Perfect spec compliance: all required features present, correct title format, appropriate single-series choice

Weaknesses

• Design storytelling is minimal — no annotation or emphasis element highlights the peak yield at N=200 kg/ha, which is the most informative point of the dose-response curve; adding a brief annotation or emphasis marker would raise DE-03
• Only a single series shown; the spec notes multi-series comparison as a recommended feature — a second series (e.g., different crop variety or fertilizer type) would improve DQ-01 and demonstrate the Imprint palette
• DE-01 basic — no intentional visual hierarchy beyond z-index layering; subtle additions (reference line at zero-dose baseline, or shaded optimal-range band) would elevate the chart

Issues Found

1. DE-03 LOW: No annotation or visual cue at the peak yield point (N=200 kg/ha) — the data tells a compelling story that the chart doesn't actively surface
   • Fix: Add a brief text annotation at the peak marker (e.g. "Peak yield") or increase symbolSize at N=200 to draw the viewer's eye
2. DQ-01 MINOR: Spec recommends multi-series comparison; only one series present
   • Fix: Add a second data series (e.g., a different wheat variety) using Imprint palette position 2 (#C475FD) to demonstrate error bar comparison

AI Feedback for Next Attempt

The implementation is solid — correct chart type, clean ECharts idiom, and proper theme adaptation. To push into the 90+ range: (1) annotate the peak data point to create a focal point and guide the viewer; (2) consider adding a second comparison series to showcase the palette and the "comparing groups" use-case highlighted in the spec; (3) optionally add a subtle baseline reference or axis annotation to anchor the dose-response narrative.

Verdict: APPROVED

[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 background (#FAF8F1). The centered title "errorbar-basic · javascript · echarts · anyplot.ai" is dark-inked and legible at the top. A legend below the title shows "Wheat" (brand green circle) and "Barley" (lavender circle). The X-axis is labeled "Nitrogen Dose (kg N/ha)" with seven tick categories (0, 50, 100, 150, 200, 250, 300). The Y-axis is labeled "Grain Yield (t/ha)" with a range of 0–7. Two series of error bars are displayed: Wheat (#009E73) shows a rising-then-plateauing yield curve; Barley (#C475FD) shows lower values with earlier saturation. Error bars have visible horizontal caps at each end. A light green shaded region (markArea, opacity 0.07) spans x=100–250 with the annotation "Optimal N zone (100–250 kg/ha)" at its top-left. Horizontal grid lines are subtle. All text is clearly readable against the light background.

Dark render (plot-dark.png): The plot renders on a warm near-black background (#1A1A17). The title and all labels switch to light-colored text, remaining clearly readable. Data colors are identical to the light render: Wheat is #009E73 and Barley is #C475FD — only the chrome flips. The shaded optimal-N zone is rendered in a darker teal-green variant that remains distinguishable. Grid lines become lighter/more subtle against the dark surface. Legend text, axis label text, tick label text, and the zone annotation text are all visibly light-colored — no dark-on-dark failures observed. Legibility verdict: PASS for both themes.

Score: 91/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set (title 22px, legend 14px, axis names 16px, tick labels 14px, annotation 12px). Well-proportioned in both themes, readable at full and mobile scale.
• VQ-02: No Overlap (6/6) — At x=0 the two series are close in value but distinguishable by color; error bar ranges overlap in value but colors make them readable. No text collisions.
• VQ-03: Element Visibility (6/6) — symbolSize=14 is well-suited for 7 sparse data points. Error bars use lineWidth=3 with 18px caps — clearly visible at full size.
• VQ-04: Color Accessibility (2/2) — Green and lavender are perceptually well-separated under CVD; no red-green sole-signal issue.
• VQ-05: Layout & Canvas (4/4) — Good margins (left 120, right 80, top 100, bottom 90). Plot fills the canvas well. Y-axis starting at 0 is a scientifically sound baseline choice.
• VQ-06: Axis Labels & Title (2/2) — X: "Nitrogen Dose (kg N/ha)", Y: "Grain Yield (t/ha)" — both descriptive with units.
• VQ-07: Palette Compliance (2/2) — Wheat = #009E73 (brand green, first series). Barley = #C475FD (Imprint palette[1]). Background #FAF8F1 light / #1A1A17 dark. Chrome flips correctly; data colors constant. grid uses t.grid token.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Above a configured default: uses custom renderItem (not a built-in series), meaningful markArea zone annotation, pageBg marker borders for definition, and clean chrome removal. Not yet at "strong design" publication level.
• DE-02: Visual Refinement (4/6) — Axis lines and tick marks removed (show: false). Y-axis-only subtle grid via t.grid token. Generous whitespace margins. Minor: the y-axis range 0–7 leaves ~20% of chart height below lowest data (~1.5 t/ha); tightening the min would improve utilization.
• DE-03: Data Storytelling (4/6) — The markArea "Optimal N zone (100–250 kg/ha)" annotation is a genuine storytelling element that guides the viewer. The Wheat vs. Barley comparison with the peak-then-plateau pattern tells a coherent agronomic story. Not perfect — no visual emphasis differentiating wheat as the primary story — but clearly above data-dump level.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct error bar plot. Custom renderItem draws stems and caps; scatter series for center markers. Both two series, full spec coverage.
• SC-02: Required Features (4/4) — Visible caps ✓, consistent cap width (18px) ✓, different colors for groups ✓, 7 groups within 3–20 range ✓.
• SC-03: Data Mapping (3/3) — X = nitrogen doses (categorical), Y = grain yield; all data visible, axes correct.
• SC-04: Title & Legend (3/3) — Title format "errorbar-basic · javascript · echarts · anyplot.ai" ✓. Legend shows "Wheat" and "Barley" with matching circle icons ✓.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Two-series comparison, symmetric error bars with visible caps, increasing-then-plateauing N response, heteroscedastic errors (σ increases with N dose) — covers all key error bar plot features.
• DQ-02: Realistic Context (5/5) — Wheat and barley grain yield response to nitrogen fertilization is a well-established agricultural science scenario. Values, labels, and axes are realistic and neutral.
• DQ-03: Appropriate Scale (4/4) — Wheat 2.1–5.9 t/ha and barley 1.8–4.3 t/ha match real-world ranges. N doses 0–300 kg N/ha are standard for field trials. Error values 0.3–1.0 t/ha are plausible for n=5 field replicates.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — Three helper functions (mkErrData, mkScatData, makeRenderItem) add necessary abstraction for the custom series factory pattern but deviate slightly from KISS ideal.
• CQ-02: Reproducibility (2/2) — All data hardcoded as deterministic arrays; no random generation.
• CQ-03: Clean Imports (2/2) — No imports in JS harness context. Only window.ANYPLOT_TOKENS and echarts global used.
• CQ-04: Code Elegance (2/2) — Clean factory pattern, appropriate complexity for custom ECharts series, no over-engineering, no fake interactivity.
• CQ-05: Output & API (1/1) — Follows harness contract; echarts.init on #container, animation: false, no explicit devicePixelRatio. Harness produces both .png and .html.

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Expert use of type: "custom" with renderItem factory, encode/dimensions pattern, markArea with silent annotation, z-ordering for render priority. All per ECharts best practices.
• LM-02: Distinctive Features (4/5) — Custom renderItem for drawing error bar stems and caps is distinctly ECharts (not replicable in other libraries without similar custom render API). markArea for zone highlighting is ECharts-specific. One point withheld: the approach is well-executed but not maximally creative (e.g., could have used rich label formatting or emphasis states).

Score Caps Applied

• None

Strengths

• Custom ECharts renderItem correctly implements error bar stems with horizontal caps — the right approach for this chart type in ECharts
• markArea "Optimal N zone" annotation adds genuine storytelling context beyond just displaying data
• Correct Imprint palette applied (brand green first, lavender second), both light and dark themes render with proper chrome
• Clean chrome: axis lines and tick marks removed, only subtle y-axis grid via t.grid token
• Realistic and scientifically accurate agricultural data with appropriate error magnitudes and N response curves
• All font sizes explicitly set and well-proportioned; both renders fully legible

Weaknesses

• Helper functions deviate slightly from KISS; the renderItem factory is justified but mkErrData/mkScatData could be inlined
• Y-axis min=0 leaves ~20% of chart height with no data below y≈1.5; setting min: 0.5 or 1 would tighten proportions
• DE-01 could reach the next tier with a heavier title font weight and slightly more typographic hierarchy

Issues Found

1. DE-01 MODERATE: Design is above defaults but falls short of "strong design" tier — the markArea annotation is the main storytelling element, but no further typographic or color-hierarchy decisions distinguish the primary series or create a clear visual focal point beyond the zone.
   • Fix: Use fontWeight: 'bold' on title, consider a slightly larger symbolSize for wheat markers to emphasize it as the primary series.
2. CQ-01 MINOR: Three helper functions break the flat KISS structure expected for snippets.
   • Fix: Inline mkErrData/mkScatData into the series data arrays; keep makeRenderItem as it's legitimately needed for the factory pattern.

AI Feedback for Next Attempt

The implementation is strong — custom renderItem, correct palette, excellent data. To reach ≥90: (1) Set title fontWeight to 'bold' for typographic hierarchy. (2) Increase wheat symbolSize to 16 vs barley's 12 to create visual emphasis. (3) Tighten y-axis min to 0.5 or 1. (4) Inline the two simple map helpers into the series data arrays to restore KISS structure.

Verdict: APPROVED