feat(echarts): implement scatter-color-mapped

[github-actions]

Implementation: scatter-color-mapped - javascript/echarts

Implements the javascript/echarts version of scatter-color-mapped.

File: plots/scatter-color-mapped/implementations/javascript/echarts.js

Parent Issue: #2004

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1-consistent). Title "scatter-color-mapped · javascript · echarts · anyplot.ai" is centered at the top in dark ink and clearly legible. "Longitude (°W)" and "Latitude (°N)" axis names in dark ink, tick labels in a softer gray, subtle light-gray gridlines on both axes. 220 scatter points span the full green-to-blue imprint_seq gradient (brand-green ≈17°C at high latitudes, blue ≈29-31°C near the equator), with a vertical colorbar labeled "Sea Surface Temp (°C)" and min/max labels "17"/"31" on the right. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17-consistent). Same title, now in light/off-white ink, clearly legible; axis names and tick labels in light gray tones; gridlines subtle but visible. Data marker colors are identical to the light render — confirming only chrome (background, text, grid, marker border) flipped. No dark-on-dark or light-on-light failures observed.

Both renders pass the theme-readability check.

Score: 87/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	12	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total	87	100

Visual Quality (28/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 (4/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (4/8) - Well-configured default, correct palette/border treatment but no strong custom hierarchy
• DE-02: Visual Refinement (4/6) - Implicit L-shaped axes, subtle grid, white-bordered markers — some refinement visible
• DE-03: Data Storytelling (4/6) - Color pattern visibly correlates with latitude (warm equatorial cluster vs. cool high-latitude cluster)

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

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

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (3/5) - visualMap.calculable enables an ECharts-distinctive interactive range slider

Score Caps Applied

• None

Strengths

• Correct use of the Imprint imprint_seq (green→blue) continuous colormap via ANYPLOT_TOKENS.seq, with visualMap.calculable enabled for interactive range filtering in the HTML output
• Realistic, neutral scenario: sea-surface-temperature readings across Pacific-basin coordinates, directly matching the spec's suggested geographic-temperature application, with a physically plausible warmer-near-equator gradient
• Fully theme-adaptive chrome with identical data colors between light and dark renders
• Clean, deterministic, KISS-structured code with a fixed-seed LCG

Weaknesses

• Longitude axis mixes a negative numeric scale (-170 to -110) with a "(°W)" unit suffix — pick one convention (positive magnitude + W suffix, or signed values without a directional suffix) so the reader doesn't have to double-negate.
• Design Excellence sits at "well-configured default" (DE-01/DE-02 = 4/8, 4/6) — consider a stronger focal point (e.g. lightly emphasizing the warmest or coldest stations) to sharpen the storytelling.
• A handful of markers in dense clusters overlap slightly (e.g. near 37°N, -163°W and 27°N, -134°W) — a touch more opacity reduction or a slightly smaller symbolSize would clean up the densest regions.
• Library Mastery is solid but not maximal — beyond visualMap.calculable, consider a further ECharts-distinctive touch (e.g. a piecewise visualMap band or emphasis state).

Issues Found

1. DE-01/DE-02 LOW: Correct but visually generic beyond palette/border treatment
   • Fix: Add a stronger visual focal point or subtler refinement (e.g. tighter grid opacity, slight marker size variation) to push past "well-configured default"
2. VQ-06 MINOR: Longitude axis unit convention (negative values + "°W" suffix)
   • Fix: Use positive magnitudes with the "(°W)" suffix, or drop the suffix and keep signed values

AI Feedback for Next Attempt

Solid, spec-compliant implementation — the main opportunity is Design Excellence. Push DE-01/DE-02 higher with a clearer visual focal point (e.g. subtly emphasizing the warmest/coldest stations) and tighten the longitude axis unit convention (positive-with-suffix or signed-without-suffix, not both).

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-consistent). Title "scatter-color-mapped · javascript · echarts · anyplot.ai" centered at top in dark ink, clearly legible. "Longitude (°W)" and "Latitude (°N)" axis names in dark ink, tick labels in a softer gray, subtle light-gray gridlines. 220 scatter points span the full green-to-blue imprint_seq gradient with a vertical colorbar ("Sea Surface Temp (°C)", 17-31 range). Two new markPoint annotations — "Coldest 17.6°C" and "Warmest 30.9°C" — each with a dark-outlined circle and bold label. The longitude axis now reads as positive magnitudes (110-170) with the "(°W)" suffix, resolving attempt 1's double-negative convention issue. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17-consistent). Same title, now in light/off-white ink, clearly legible; axis names and tick labels in light gray tones; gridlines subtle but visible. The two markPoint annotations use light-colored outlines and labels, fully legible. Data marker colors are identical to the light render — confirming only chrome (background, text, grid, marker/annotation outline) flipped. No dark-on-dark or light-on-light failures observed.

Both renders pass the theme-readability check.

Score: 90/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	14	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	8	10
Total	90	100

Visual Quality (28/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 (4/4)
• VQ-06: Axis Labels & Title (2/2) - Longitude convention from attempt 1 fixed (positive magnitude + °W suffix)
• VQ-07: Palette Compliance (2/2)

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (5/8) - MarkPoint highlights add polish beyond attempt 1, base chrome still default-level
• DE-02: Visual Refinement (4/6) - Moderate refinement: implicit axes, subtle grid, theme-adaptive annotation outlines
• DE-03: Data Storytelling (5/6) - Explicit "Warmest"/"Coldest" callouts now give a clear labeled focal point

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

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

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (4/5) - visualMap.calculable + markPoint with custom formatter for extremum callouts

Score Caps Applied

• None

Strengths

• Longitude convention from attempt 1 is fully fixed: axis now runs 110-170 as positive magnitudes paired with the "(°W)" suffix, eliminating the prior double-negative reading
• New markPoint annotations ("Warmest 30.9°C", "Coldest 17.6°C") give the chart a clear focal point and directly address the attempt-1 storytelling feedback, using an ECharts-distinctive feature (markPoint with custom formatter)
• Correct use of the Imprint imprint_seq (green→blue) continuous colormap via ANYPLOT_TOKENS.seq, with visualMap.calculable enabled for interactive range filtering in the HTML output
• Fully theme-adaptive chrome with identical data colors between light and dark renders
• Reduced symbolSize (16, down from 20) and opacity (0.75, down from 0.85) measurably eases the marker overlap flagged in attempt 1

Weaknesses

• Design Excellence is improved but still shy of publication-grade: beyond the two markPoint highlights, the plot relies on default grid/axis treatment — consider a subtler grid opacity reduction or a lightly emphasized equatorial band
• A handful of markers in the densest clusters still touch or slightly overlap (e.g. near 28°N/-129°W and 26-27°N/-133°W) — a small additional opacity or size reduction in the highest-density band would fully clean this up
• Only two extremes are annotated; a brief note tying the annotated points to the visualMap scale (or a third mid-range callout) could reinforce the connection between highlights and the continuous scale

Issues Found

1. DE-01/DE-02 LOW: Base chrome (grid, axes) still at default-level despite the new annotations
   • Fix: Tighten grid opacity slightly or add one more subtle refinement (e.g. axis line weight) to push further into publication-grade territory
2. VQ-03 MINOR: A few markers still touch in the densest clusters
   • Fix: A small further reduction in symbolSize or opacity in high-density regions

AI Feedback for Next Attempt

Solid improvement over attempt 1 — the longitude convention and storytelling weaknesses are resolved. This attempt clears the quality bar. Remaining opportunity (non-blocking): push Design Excellence further with subtler grid/axis refinement and clean up the last few overlapping markers in the densest clusters.

Verdict: APPROVED