feat(echarts): implement scatter-connected-temporal

[github-actions]

Implementation: scatter-connected-temporal - javascript/echarts

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

File: plots/scatter-connected-temporal/implementations/javascript/echarts.js

Parent Issue: #4675

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). The plot shows a connected scatter of 44 annual data points (1980–2023) with CO₂ concentration (ppm) on the x-axis and global temperature anomaly (°C) on the y-axis. The path transitions continuously from teal/green (#009E73) at 1980 to steel blue (#4467A3) at 2023, encoding temporal progression through the Imprint sequential colormap. Key milestone years (1980, 2000, 2010, 2023) are rendered as larger circles (symbolSize 16 vs 8) with bold year labels. The gradient line runs left-to-right and bottom-to-top, clearly communicating co-rising CO₂ and temperature. Title, axis labels, tick labels, and year annotations are all rendered in dark ink — fully readable against the light background. Grid lines are subtle. Axis labels include units ("Atmospheric CO₂ (ppm)" and "Global Temperature Anomaly (°C)").

Dark render (plot-dark.png): Near-black background (#1A1A17). Data colors are identical to the light render — the green-to-blue gradient remains visually unchanged. Title, axis names, tick labels, and year annotations all appear in light/off-white ink — no dark-on-dark failures observed. Year labels (1980, 2000, 2010, 2023) remain clearly readable in bold white text. Grid lines are subtle and consistent with the dark theme. Chrome flips correctly; data layer is unchanged. All text is readable against the dark background.

Both paragraphs confirmed. Both renders pass legibility checks.

Score: 88/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (title 17px scaled by length formula, axis names 15px, tick labels 13px, annotations 14px). Well-proportioned, balanced X/Y labels. Minor: title at 17px CSS (34px native) is on the small side for mobile; could be 18–19px.
• VQ-02: No Overlap (6/6) — Year labels at 1980/2000/2010/2023 are well-separated; no collision with axes, ticks, or each other.
• VQ-03: Element Visibility (6/6) — 44 points with symbolSize 8 (regular) / 16 (key years) is appropriate density. Markers clearly visible with pageBg border.
• VQ-04: Color Accessibility (2/2) — Green-to-blue gradient is CVD-safe; temporal progression readable without color alone (larger markers + year labels for key points).
• VQ-05: Layout & Canvas (4/4) — Grid margins (left 110, right 50, top 80, bottom 90 CSS px) create balanced layout; no overflow; canvas gate passed.
• VQ-06: Axis Labels & Title (2/2) — "Atmospheric CO₂ (ppm)" and "Global Temperature Anomaly (°C)" — descriptive with units.
• VQ-07: Palette Compliance (2/2) — Imprint sequential (t.seq[0] = #009E73 → t.seq[1] = #4467A3) used correctly for continuous temporal encoding. Background transparent over #FAF8F1/#1A1A17. Chrome tokens (t.ink, t.inkSoft, t.grid) applied correctly in both themes.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Above default: intentional Imprint sequential gradient for temporal encoding, enlarged key-year markers, bold year labels, pageBg marker borders for definition. Not yet at the "strong design / clearly above defaults" bar of 6 — the axis lines remain visible and the overall frame has a slightly standard ECharts appearance.
• DE-02: Visual Refinement (4/6) — Grid is subtly styled (t.grid tokens), generous margins, line opacity 0.65 is a nice detail. Axis lines are present but standard. Not "every detail polished" (6). Missing: removing or softening axis spine lines would lift this further.
• DE-03: Data Storytelling (4/6) — Temporal gradient creates clear visual hierarchy (color encodes time direction); key year annotations guide the narrative. The overall upward-rightward trend tells the CO₂/temperature co-rise story well. Falls short of "excellent storytelling" — no start/end directional cue (e.g., arrow or "→ 2023" note) to make the direction unmissable at a glance.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct: scatter markers + connecting path in temporal order.
• SC-02: Required Features (4/4) — Points connected in chronological order ✓; key year annotations (1980, 2000, 2010, 2023) ✓; Imprint sequential gradient encodes time direction ✓; visible markers at all positions ✓.
• SC-03: Data Mapping (3/3) — CO₂ on x, temperature anomaly on y, temporal ordering correct.
• SC-04: Title & Legend (3/3) — Title "Temperature Anomaly vs CO₂ · scatter-connected-temporal · javascript · echarts · anyplot.ai" — correct descriptive-prefix format. No legend appropriate for single gradient series.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows temporal path, year-to-year variability, overall upward trend, El Niño spikes (1998, 2016), and the post-2015 acceleration.
• DQ-02: Realistic Context (5/5) — CO₂ vs temperature anomaly (1980–2023) is a scientifically valid, neutral climate dataset; no controversial framing.
• DQ-03: Appropriate Scale (4/4) — CO₂ values (338.7–421.1 ppm) and temperature anomalies (0.12–1.17°C) align with real Keeling curve and NOAA GISS data.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — One helper function lerpColor (8 lines) is present. Single-purpose and clear, but strictly KISS means no functions. Could be inlined or replaced with ECharts' built-in gradient stop interpolation.
• CQ-02: Reproducibility (2/2) — All data hard-coded; fully deterministic; no RNG.
• CQ-03: Clean Imports (2/2) — No imports; only window.ANYPLOT_TOKENS and global echarts used; clean.
• CQ-04: Code Elegance (2/2) — Clean JS, idiomatic years.map() for data construction, dynamic title font-size formula, no over-engineering.
• CQ-05: Output & API (1/1) — No explicit file save (harness handles it); animation: false set; current ECharts 5 API used.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Good use of per-item data objects with symbolSize, itemStyle, and label properties — the ECharts declarative per-datum customization model. Linear gradient on lineStyle.color is idiomatic. Minor: type: "line" is a common connected-scatter workaround; ECharts 5 has no dedicated connected-scatter type so this is correct.
• LM-02: Distinctive Features (3/5) — Per-item label show/hide, per-item symbolSize, and the type: "linear" gradient in lineStyle.color are ECharts-specific. Does not yet use ECharts-exclusive capabilities like markPoint, markLine, emphasis, or visualMap that would distinguish it more strongly.

Score Caps Applied

• None — no caps triggered.

Strengths

• Excellent spec compliance: all required features present (connected path, temporal gradient, key-year annotations, visible markers)
• Correct Imprint sequential colormap usage (t.seq[0] → t.seq[1]) for continuous temporal encoding — the right tool for the job
• Real, factually-grounded data (CO₂/temperature anomaly 1980–2023) with scientifically plausible values
• Both renders fully readable with correct theme-adaptive chrome tokens throughout
• Title font-size scaling formula applied correctly for the long descriptive title

Weaknesses

• DE-01/DE-02: Axis lines create a standard-looking frame; removing or fading the axis spine lines (axisLine: { show: false } or lineStyle: { opacity: 0.2 }) would give a cleaner, more publication-ready look
• DE-03: No directional cue at the path terminus — add a markPoint or inline annotation (e.g., an arrow symbol or "↑ 2023") to make the time direction unmissable at a glance without relying solely on color memory
• LM-02: ECharts-exclusive features like markLine (trend reference), emphasis (highlight key points on hover/static), or visualMap for the continuous color encoding are unused
• CQ-01: The lerpColor helper function could be eliminated by using ECharts' native visualMap component for continuous color encoding, simplifying the code structure

Issues Found

1. DE-02 MODERATE: Visible axis lines give a slightly boxed appearance. Fix: add axisLine: { show: false } to both axes and rely on the subtle grid lines alone for orientation; or set lineStyle: { color: t.grid } to reduce the axis line weight to grid-level subtlety.
2. DE-03 MODERATE: Time direction relies entirely on color memory. Fix: add a markPoint with a custom SVG arrow at the 2023 terminus, or an echarts.graphic.Text element labeling it "→ 2023 (most recent)" to give first-glance direction.
3. LM-02 LOW: Color gradient implemented via manual lerpColor + per-item itemStyle. Fix: use ECharts' native visualMap: { type: "continuous", dimension: 0, min: 1980, max: 2023, inRange: { color: [t.seq[0], t.seq[1]] } } with a separate scatter-like series or type: "custom" — this would be a genuinely distinctive ECharts technique.

AI Feedback for Next Attempt

Three targeted improvements: (1) Remove or fade axis spine lines (axisLine: { show: false } on both axes) — the subtle grid already provides orientation and removing the frame lifts design polish noticeably. (2) Add a direction cue at the path end — either a markPoint with an arrow SVG path at the 2023 coordinate, or a markLine trend reference — to make temporal direction immediately legible. (3) Replace the manual lerpColor per-item color approach with ECharts' native visualMap: { type: "continuous" } component — this is a genuinely distinctive ECharts feature that simplifies the code and adds the palette-correct continuous color scale as a proper legend element.

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): Warm off-white background (#FAF8F1). Title "Temperature Anomaly vs CO₂ · scatter-connected-temporal · javascript · echarts · anyplot.ai" in dark ink at top-center, clearly readable. X-axis: "Atmospheric CO₂ (ppm)", Y-axis: "Global Temperature Anomaly (°C)" — both in dark ink with units. Tick labels in inkSoft. Connected scatter path spanning CO₂ 338–421 ppm and temperature anomaly −0.1–1.2°C. Line and markers colored via imprint_seq temporal gradient: begins at brand green (#009E73) in 1980 and transitions to blue (#4467A3) by 2023. Key-year markers (1980, 2000, 2010, 2023) are larger with bold year labels; non-key markers are smaller dots. A markLine arrow at 2022→2023 segment indicates the direction of time. All text is clearly readable against the warm off-white background. No light-on-light issues.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Title and axis names render in light ink (#F0EFE8), clearly readable. Tick labels and year annotations in inkSoft (#B8B7B0) — warm gray, readable with good contrast. Marker halos use t.pageBg (the dark surface color) as borderColor, producing a clean dark-theme halo effect. Data colors are identical to the light render — the imprint_seq gradient from teal-green (1980) to blue (2023) is unchanged; only chrome has flipped. No dark-on-dark failures observed.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 93/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title dynamic (~17px), axis names 15, tick labels 13, year labels 14 bold. Readable in both themes.
• VQ-02: No Overlap (6/6) — Year labels positioned left/top/right with no collision against data or each other.
• VQ-03: Element Visibility (5/6) — Key-year markers (symbolSize 16) are prominent. Non-key markers (symbolSize 8) are visible but slightly small for a 44-point scatter at the <50 density threshold where bolder markers are preferred.
• VQ-04: Color Accessibility (2/2) — imprint_seq (green→blue) is CVD-safe; no red-green sole signal.
• VQ-05: Layout & Canvas (4/4) — grid: {left:110, right:50, top:80, bottom:90} — generous and balanced; plot fills ~75% of canvas.
• VQ-06: Axis Labels & Title (2/2) — Both axes descriptive with units.
• VQ-07: Palette Compliance (2/2) — visualMap with t.seq (imprint_seq: #009E73→#4467A3). Correct cmap for single-polarity temporal data. Background transparent (renders as theme-correct surface). Chrome fully theme-adaptive.

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (6/8) — Strong design: temporal gradient + mixed marker sizes + terminal arrow + theme-adaptive marker halos places this clearly above configured defaults. Not yet FiveThirtyEight/publication level.
• DE-02: Visual Refinement (5/6) — Axis lines and ticks hidden, subtle grid via t.grid token, transparent background, no legend frame. Minor: both X and Y split-lines are shown; removing X split-lines would produce a cleaner look for this type of temporal path chart.
• DE-03: Data Storytelling (4/6) — Gradient + directional arrow + year milestone labels create a clear temporal climate narrative. Good visual hierarchy. Stops short of "viewer immediately sees the insight" — a brief annotation near the 2015–2023 cluster ("Acceleration") would close the gap.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct connected scatter plot with temporal path via ECharts line type with showSymbol: true.
• SC-02: Required Features (4/4) — Points connected chronologically, key time points annotated (1980/2000/2010/2023), terminal arrow for time direction, color gradient for temporal progression, visible markers at each position.
• SC-03: Data Mapping (3/3) — X: CO₂ ppm, Y: temperature anomaly °C, all 44 annual points shown.
• SC-04: Title & Legend (3/3) — "Temperature Anomaly vs CO₂ · scatter-connected-temporal · javascript · echarts · anyplot.ai" — correct {Descriptive Title} · {spec-id} · {language} · {library} · anyplot.ai format. No legend needed (single continuous series).

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All key aspects shown: directional temporal path, color gradient encoding time, milestone annotations, year-to-year variation visible.
• DQ-02: Realistic Context (5/5) — Real, neutral scientific scenario (CO₂ ppm vs. global temperature anomaly). Not controversial.
• DQ-03: Appropriate Scale (4/4) — CO₂ values 338.7–421.1 ppm and temperature anomalies 0.12–1.17°C are consistent with real Mauna Loa / GISS records for 1980–2023.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat: data arrays → .map() → echarts.init → setOption. No functions/classes.
• CQ-02: Reproducibility (2/2) — Fully hardcoded deterministic data arrays; no RNG.
• CQ-03: Clean Imports (2/2) — Only ANYPLOT_TOKENS and echarts globals used.
• CQ-04: Code Elegance (2/2) — Clean, idiomatic JS. seriesData via .map() with per-point encoding is well-structured.
• CQ-05: Output & API (1/1) — Harness produces plot-{theme}.png and .html. animation:false set. Current ECharts API.

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Expert ECharts patterns: visualMap with dimension encoding, markLine arrow symbols, per-data-point symbolSize and label via data items array.
• LM-02: Distinctive Features (4/5) — visualMap dimension:2 for data-driven sequential coloring is distinctly ECharts-native and elegant. Combined with markLine terminal arrow, well above generic usage. One point held back since the markLine approach is somewhat of a workaround vs. a native directional-path feature.

Score Caps Applied

• None — DE-01=6 > 2 and DE-02=5 > 2 (no "boring" cap); all other caps not triggered.

Strengths

• Excellent use of ECharts visualMap with dimension:2 encoding — the 3rd value in each [x, y, t] data tuple drives the imprint_seq color gradient; this is a distinctively ECharts-native pattern with no Python/R equivalent
• Terminal markLine arrow at 2023 makes time direction immediately obvious without extra labels
• Mixed symbolSize (16 for key years, 8 for others) creates clear focal hierarchy along the path
• All chrome fully theme-adaptive via t.ink/t.inkSoft/t.grid; both renders are clean with zero dark-on-dark failures
• Outstanding real-world dataset (CO₂ ppm vs. temperature anomaly 1980–2023) with factually accurate values — powerful climate narrative

Weaknesses

• Non-key markers (symbolSize 8) are slightly small for 44-point connected scatter at the <50 density threshold — increase to 10–12 for non-key intermediary markers
• Storytelling could be strengthened: a brief annotation near the 2015–2023 cluster (e.g. ECharts markPoint or inline data label on 2023 noting "Record High") would let viewers immediately spot the acceleration insight
• Both X and Y split-lines shown; removing the X split-lines would clean up the grid for a plot where the primary trend is vertical

Issues Found

1. VQ-03 MINOR: Non-key markers at symbolSize 8 are slightly underpowered for a 44-point connected scatter — the style guide calls for more prominent markers below 50 points. Increase intermediary symbolSize to 10–12.
2. DE-03 MODERATE: No explicit focal-point annotation highlighting the recent acceleration (2015–2023). Add a markPoint or inline label on the 2023 endpoint, or a secondary annotation line, to make the story self-evident without requiring the viewer to trace the gradient.
3. DE-02 MINOR: Both xAxis and yAxis splitLine are active. Remove xAxis splitLine to produce a cleaner, less gridded look appropriate for a temporal path chart.

AI Feedback for Next Attempt

This is a strong implementation — approved at 93/100. For any future iteration: (1) increase non-key scatter marker size from 8 to 10–12; (2) remove x-axis split-lines to reduce grid noise; (3) add a markPoint on the 2023 endpoint with a label like "2023: +1.17°C" to anchor the story and make the recent acceleration immediately visible to first-time viewers.

Verdict: APPROVED