feat(echarts): implement area-elevation-profile

[github-actions]

Implementation: area-elevation-profile - javascript/echarts

Implements the javascript/echarts version of area-elevation-profile.

File: plots/area-elevation-profile/implementations/javascript/echarts.js

Parent Issue: #4578

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1) confirmed. The plot shows a terrain elevation profile — a smoothed line with a green gradient area fill (#009E73 fading from 55% to 4% opacity) spanning 0–80 km on the x-axis and ~400–3000 m on the y-axis. Title "Alpine Mountain Traverse · area-elevation-profile · javascript · echarts · anyplot.ai" centered in dark ink, correctly font-scaled. Y-axis label "Elevation (m)" and X-axis label "Distance (km)" in dark-soft ink. Six landmark dashed vertical lines with annotation labels (Northern Pass, Valley Village, Main Summit, Plateau Hut, Eastern Pass, River Crossing) and green-bordered circle markers at the Trailhead (0 km, 780 m) and Mountain Town (80 km, 650 m) endpoints. All title, axis, and tick text is clearly readable against the light background. Landmark labels at fontSize 11 are legible at full resolution but confirm as barely readable in the 400px thumbnail.

Dark render (plot-dark.png): Warm near-black background (#1A1A17) confirmed. Identical structure — the green area fill and line color are unchanged from the light render (data colors constant, only chrome flips). Title and all axis/tick labels render in light tones (t.ink / t.inkSoft tokens), clearly readable against the dark background. No dark-on-dark failures: no near-black text on near-black background. Grid lines remain subtle and visible. Brand green #009E73 reads well on the dark surface. Full theme adaptation confirmed.

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

Score: 86/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (6/8) — Title, axis labels, tick labels all readable at full res in both themes. Landmark labels at fontSize 11 are marginal at 400px mobile — the 400px thumbnail confirms they are barely legible.
• VQ-02: No Overlap (6/6) — No text-on-text or text-on-data overlaps. Landmark labels well-spaced.
• VQ-03: Element Visibility (6/6) — Profile line (width 2.5) + gradient fill clearly visible. Start/end markers prominent.
• VQ-04: Color Accessibility (2/2) — Single series #009E73, high contrast on both surfaces, no red-green ambiguity.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed. Good margins. Title ~75% width expected for long mandated title. No overflow.
• VQ-06: Axis Labels & Title (2/2) — "Distance (km)" and "Elevation (m)" — descriptive with units.
• VQ-07: Palette Compliance (2/2) — First (only) series uses #009E73. Backgrounds #FAF8F1 / #1A1A17 confirmed. Data colors identical across themes.

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Gradient terrain silhouette fill is genuinely sophisticated (not flat color). Landmark dashed lines with annotation dots create a professional cartographic look. Start/end markers with ink-colored border add polish.
• DE-02: Visual Refinement (4/6) — Y-axis spine/ticks hidden, x-axis splitLine disabled, Y-only grid, subtle. Clean minimal layout. Further refinement possible.
• DE-03: Data Storytelling (4/6) — Clear Alpine traverse narrative from Trailhead to Mountain Town. Vertical dashed lines guide the eye to landmarks. Gradient fill creates terrain volume.

Spec Compliance (14/15)

• SC-01: Plot Type (5/5) — Correct area elevation profile: line series with areaStyle terrain silhouette.
• SC-02: Required Features (3/4) — Area fill ✓, start/end labels ✓, landmark annotations ✓, units ✓. Missing: vertical exaggeration factor notation — spec explicitly requires "Use a vertical exaggeration factor (e.g., 10x) and note it on the plot".
• SC-03: Data Mapping (3/3) — Distance on x, elevation on y. Y min at 400 m appropriate. 161 points in spec range.
• SC-04: Title & Legend (3/3) — "Alpine Mountain Traverse · area-elevation-profile · javascript · echarts · anyplot.ai" — correct descriptive-prefix format. No legend needed (single series).

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — Area fill, landmark annotations, start/end markers, vertical reference lines, micro-terrain sinusoidal texture all present. Missing VE annotation; optional slope-based gradient coloring absent.
• DQ-02: Realistic Context (5/5) — Alpine traverse 0–80 km, 650–2840 m — fully realistic. Named landmarks plausible and neutral.
• DQ-03: Appropriate Scale (4/4) — 80 km traverse, 0.5 km sample interval, realistic Alpine elevation range.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — Mostly flat script. One helper function elevAt() defined (1-liner, used 8 times) — could be inlined for stricter KISS compliance.
• CQ-02: Reproducibility (2/2) — Fully deterministic: hardcoded control points, fixed sinusoidal coefficients, no Math.random().
• CQ-03: Clean Imports (2/2) — No imports; uses window globals as required.
• CQ-04: Code Elegance (2/2) — Well-organized sections. Gradient as named const. Landmark array drives both markLine and scatter cleanly.
• CQ-05: Output & API (1/1) — animation: false set. No explicit size or devicePixelRatio in init. Orientation directive present.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Native line+areaStyle for terrain silhouette, markLine for reference lines, scatter for annotation dots, smooth parameter, z-layering — idiomatic throughout.
• LM-02: Distinctive Features (3/5) — ECharts linearGradient object in areaStyle colorStops, markLine paired coord format, smooth:0.3 for organic terrain, z-layer ordering — multiple distinctive features.

Score Caps Applied

• None

Strengths

• Beautiful gradient terrain silhouette fill using Imprint green (#009E73) — fades 55%→4% opacity creating genuine depth without obscuring the profile line
• Professional landmark annotations: dashed vertical markLines stopping just below each dot with positioned text labels — cartographic and clean
• Full theme-adaptive chrome: t.ink / t.inkSoft tokens applied to all text elements; no dark-on-dark or light-on-light failures in either render
• Deterministic data generation with superimposed sinusoids for realistic micro-terrain texture — no RNG needed
• Title fontsize correctly scaled via the 22 × 67 / len(title) formula; no overflow

Weaknesses

• Landmark labels at fontSize 11 are too small for mobile — the 400px thumbnail confirms they are essentially unreadable; raise to at least 13px
• Missing vertical exaggeration notation — spec requires noting the VE factor on the plot (e.g., subtitle or footnote "~6× vertical exaggeration"); omitted entirely
• elevAt() helper function could be inlined for stricter KISS compliance (minor)

Issues Found

1. VQ-01 MINOR: Landmark annotation labels at fontSize 11 fall below mobile-readable threshold
   • Fix: Increase landmark label fontSize from 11 to 13 (or 14 to match axis labels)
2. SC-02 MISS: Vertical exaggeration factor not noted anywhere on the plot as required by spec
   • Fix: Add a subtitle or graphic annotation such as "Vertical exaggeration: ~6×" (calculate from y-range / x-range × aspect ratio)

AI Feedback for Next Attempt

Two fixes needed: (1) Raise landmark label fontSize from 11 to 13–14px so they remain readable at 400px mobile. (2) Add a vertical exaggeration annotation — calculate VE as (y_range_m / x_range_m) × (plot_width_px / plot_height_px), round to nearest integer, and add either a subtitle line or a bottom-left annotation reading "Vertical exaggeration: ~Nx". Everything else (gradient fill, landmark styling, theme adaptation, data generation) is excellent — do not change those.

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): Warm off-white (#FAF8F1) background — correct surface. Title "Alpine Mountain Traverse · area-elevation-profile · javascript · echarts · anyplot.ai" scaled to ~17 px fits comfortably (~80% width) with subtitle "~16× vertical exaggeration" below it. Y-axis label "Elevation (m)" and X-axis label "Distance (km)" are visible in inkSoft color. Tick labels ("0 km"…"80 km", "500 m"…"3,000 m") are all clearly readable. The terrain silhouette is filled with brand green (#009E73) using a gradient from 0.55 opacity at the terrain line down to 0.04 at y=400 m. Six landmark dashed vertical guidelines with labels (Northern Pass · 2280 m, Valley Village · 1320 m, Main Summit · 2840 m, Plateau Hut · 2490 m, Eastern Pass · 2560 m, River Crossing · 900 m) appear above the profile. Start (Trailhead · 780 m) and end (Mountain Town · 650 m) markers are green dots with dark borders and legible inline labels. All text is dark-on-light — no legibility failures.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background — correct surface. Title, subtitle, axis labels, and tick labels all render in light ink (#F0EFE8 / #B8B7B0) and are clearly readable against the dark surface. No dark-on-dark text failures. The brand green terrain silhouette retains the same hue as in the light render — data colors are theme-independent as required. Grid lines are subtle but visible. All landmark and endpoint labels are fully legible. Legibility: PASS on both themes.

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

Score: 88/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set; title scaled by formula; readable in both themes. Minor: landmark labels at fontSize:13 may be slightly small at mobile scale.
• VQ-02: No Overlap (5/6) — No severe overlap. Minor crowding: Valley Village (dist=21) and Northern Pass (dist=13) labels are close on the descent; Plateau Hut label partially within the silhouette fill but text remains readable with high ink-on-green contrast.
• VQ-03: Element Visibility (6/6) — Terrain fill, profile line, endpoint markers, and landmark labels all clearly visible.
• VQ-04: Color Accessibility (2/2) — Single-series brand green; CVD-safe; dark ink labels maintain high contrast on both surfaces.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed. Margins (left:110, right:55, top:100, bottom:90) give generous whitespace. No AR-09 clipping detected.
• VQ-06: Axis Labels & Title (2/2) — X: "Distance (km)", Y: "Elevation (m)" — descriptive with units.
• VQ-07: Palette Compliance (2/2) — First series uses t.palette[0] (#009E73). Gradient fill uses same hue. Background transparent (page bg shows through). All chrome tokens (t.ink, t.inkSoft, t.grid) correct in both themes.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Above defaults: gradient terrain fill, descriptive title prefix, vertical dashed guidelines, landmark annotations. Intentional design hierarchy. Not publication-quality (FiveThirtyEight-level) but clearly above a configured default.
• DE-02: Visual Refinement (4/6) — Y-axis line hidden, y-axis ticks hidden, x-axis splitLine disabled, only subtle horizontal grid lines, transparent background. Clear visual refinement above library defaults.
• DE-03: Data Storytelling (4/6) — Strong terrain narrative: silhouette conveys mountain journey, labeled landmarks provide waypoints, Main Summit at 2840 m serves as clear focal point. Vertical exaggeration annotated for context.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Area-elevation profile with filled terrain silhouette.
• SC-02: Required Features (4/4) — Gradient fill, start/end labels with elevations, 6 landmark annotations with vertical marker lines, vertical exaggeration (~16×) noted in subtitle.
• SC-03: Data Mapping (3/3) — X = distance (km), Y = elevation (m). Full 0–80 km and 400–3000+ m ranges displayed.
• SC-04: Title & Legend (3/3) — "Alpine Mountain Traverse · area-elevation-profile · javascript · echarts · anyplot.ai" — correct {Descriptive} · {spec-id} · {lang} · {lib} · anyplot.ai format. Single series, no legend needed.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — 161 sample points with ascents, descents, passes, summits, valley, river crossing — full feature coverage.
• DQ-02: Realistic Context (5/5) — Alpine traverse with realistic elevation range (650–2840 m), 80 km length, plausible named landmarks. Neutral outdoor scenario.
• DQ-03: Appropriate Scale (4/4) — Elevation range and traverse length are geomorphologically plausible for Alpine terrain.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear flow: data → init → option. No functions or classes.
• CQ-02: Reproducibility (2/2) — Fully deterministic: hard-coded control points + deterministic sinusoidal texture.
• CQ-03: Clean Imports (2/2) — No imports; all globals (t, chart) used.
• CQ-04: Code Elegance (2/2) — Clean, appropriately complex, no fake UI.
• CQ-05: Output & API (1/1) — ECharts harness saves plot-{THEME}.png and plot-{THEME}.html.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — animation:false, no explicit dimensions, line+areaStyle, markLine, scatter series composition — all idiomatic ECharts.
• LM-02: Distinctive Features (3/5) — Uses markLine with explicit coord pairs (ECharts-specific), linear gradient areaStyle (ECharts gradient API), multi-series z-ordering.

Score Caps Applied

• None

Strengths

• Gradient area fill (brand green 0.55 → transparent 0.04) creates a convincing terrain silhouette that immediately communicates the mountain profile
• Deterministic profile data using linear interpolation between hard-coded Alpine control points plus superimposed sinusoidal texture — elegant and reproducible
• ECharts markLine with explicit coordinate pairs draws vertical dashed guidelines precisely from y=420 to just below each terrain landmark — idiomatic and correct
• Title fontsize auto-scaled by formula (Math.max(13, round(22*67/len))) so the long descriptive prefix fits without overflow
• ~16× vertical exaggeration is correctly noted in the subtitle (computed ratio ~15.2× from grid dimensions)
• Theme-adaptive chrome uses all correct tokens (t.ink, t.inkSoft, t.grid, t.palette[0]) — both renders pass full readability check

Weaknesses

• Landmark scatter dots use symbolSize:5 (10 native px at 2× DPR) — very small at full resolution and barely visible when scaled to mobile (~400 px); increase to symbolSize:9–10
• Some label crowding between adjacent landmarks (Valley Village dist=21 and Northern Pass dist=13 on the descent segment); stagger vertical label offsets to prevent near-collision
• Plateau Hut label appears within the green silhouette fill on the ascending slope (fill opacity ~0.45 at ~2200 m); increase the scatter y-offset to +120 m (from current +80 m) to clear the silhouette top edge

Issues Found

1. LM-02 MODERATE: markLine and gradient fill are ECharts-specific but overall usage doesn't reach the "couldn't be replicated in another library" bar
   • Fix: Consider using ECharts' visualMap for slope-based gradient coloring on the profile line, which would be a more distinctive ECharts feature
2. DE-01 MODERATE: Design is above defaults but not publication-quality
   • Fix: Consider adding a slope-category color gradient on the fill (green → orange → red for flat/moderate/steep) using ECharts pieces in visualMap, which would elevate the design sophistication significantly

AI Feedback for Next Attempt

The terrain silhouette and landmark annotation approach are solid — preserve them. Primary improvements: (1) increase landmark dot size to symbolSize:9–10 for mobile visibility; (2) raise the landmark scatter y-offset from +80 to +120 m so labels clear the fill boundary; (3) for DE-01 and LM-02 gains, consider ECharts visualMap for slope-based fill gradient coloring (the spec notes this as optional). The rest of the implementation is high quality; small targeted fixes rather than a full rewrite.

Verdict: APPROVED