feat(highcharts): implement contour-basic

[github-actions]

Implementation: contour-basic - python/highcharts

Implements the python/highcharts version of contour-basic.

File: plots/contour-basic/implementations/python/highcharts.py

Parent Issue: #855

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The plot displays a topographic elevation heatmap on a warm off-white #FAF8F1 background. The viridis colormap runs from deep purple (low elevation, ~350 m) through teal and green to bright yellow (peak elevation, ~1200 m). Two distinct mountain peaks are visible: a smaller peak in the lower-left quadrant (teal-green, ~750–850 m) and a dominant peak in the upper-right quadrant (bright yellow, ~1100–1200 m). White contour lines at 100 m intervals overlay the heatmap and are clearly distinguishable against all viridis tones. Title "Mountain Terrain · contour-basic · highcharts · anyplot.ai" is rendered in large dark text top-left; subtitle in smaller muted dark text below. Axis labels "Distance East (km)" and "Distance North (km)" are dark and readable; tick labels (0, 2, 4, 6, 8, 10) are visible. A vertical viridis colorbar on the right shows the elevation scale in meters. All text is dark (#1A1A17 / #4A4A44) against the off-white page surface — legibility: PASS.

Dark render (plot-dark.png): Identical heatmap and contour structure on a warm near-black #1A1A17 background. The data colors are unchanged — viridis palette and white contour lines are pixel-identical to the light render. Title, axis labels, and tick labels are rendered in light text (#F0EFE8 / #B8B7B0) against the dark surface and are clearly readable. No dark-on-dark failures detected. Colorbar labels also light-colored and visible. Legibility: PASS.

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

Score: 90/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All sizes explicitly set (title 68px, axis labels 40px, tick labels 28px, colorbar 26px); all readable in both themes
• VQ-02: No Overlap (6/6) — No text collisions; colorbar, title, subtitle, and axis labels all have clear separation
• VQ-03: Element Visibility (6/6) — White contour lines are clearly visible across the full viridis range; heatmap cells fill the canvas well
• VQ-04: Color Accessibility (2/2) — Viridis is perceptually uniform and CVD-safe; white contour lines maximise contrast against all colormap values
• VQ-05: Layout & Canvas (4/4) — Heatmap fills 80%+ of canvas; generous spacing on all sides; colorbar positioned cleanly on the right
• VQ-06: Axis Labels & Title (2/2) — "Distance East (km)" and "Distance North (km)" — descriptive with units
• VQ-07: Palette Compliance (2/2) — Viridis (sequential, continuous) is the correct palette for elevation data; plot backgrounds are #FAF8F1 (light) and #1A1A17 (dark); all chrome uses theme-adaptive tokens

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (6/8) — Strong design: custom viridis stops, white contour overlay, left-aligned title + subtitle, full theme-adaptive chrome — clearly above library defaults
• DE-02: Visual Refinement (5/6) — Both grid axes suppressed (gridLineWidth: 0), tick marks removed (tickLength: 0), legend borderWidth=0, generous spacing on all sides; only minor details left unpolished
• DE-03: Data Storytelling (4/6) — Two distinct peaks create natural visual hierarchy; the bright yellow dominant peak in the upper right draws the eye immediately; concentric contour lines help the reader read the gradient structure

Spec Compliance (13/15)

• SC-01: Plot Type (5/5) — Correct: heatmap (filled regions) + contour line overlay is the standard approach for a basic contour plot in Highcharts
• SC-02: Required Features (3/4) — Sequential viridis colormap ✓, colorbar ✓, filled regions + contour lines ✓; spec notes "label key contour levels when practical" — contour lines are not labeled with elevation text
• SC-03: Data Mapping (3/3) — X = easting (km), Y = northing (km), Z = elevation (m); all grid coordinates correctly mapped
• SC-04: Title & Legend (2/3) — Required format is contour-basic · highcharts · anyplot.ai; actual title is Mountain Terrain · contour-basic · highcharts · anyplot.ai — extra "Mountain Terrain · " prefix

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows multiple elevation bands, two distinct peaks, saddle region, and full contour structure — all aspects of a contour plot
• DQ-02: Realistic Context (5/5) — Topographic elevation map of a mountain region: neutral, realistic, scientifically plausible
• DQ-03: Appropriate Scale (4/4) — 350–1200 m elevation range for a 10 km × 10 km region; realistic for a mountain terrain scenario

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear: imports → data → contour computation → chart construction → HTML export → screenshot; no functions or classes
• CQ-02: Reproducibility (2/2) — np.random.seed(42) set; elevation surface is deterministic
• CQ-03: Clean Imports (2/2) — All imports (os, tempfile, time, urllib.request, pathlib, numpy, highcharts_core, selenium) are actually used
• CQ-04: Code Elegance (2/2) — Clean, Pythonic; inline marching squares algorithm is complex but necessary (Highcharts has no native contour series)
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png (via container screenshot) and plot-{THEME}.html; current Highcharts API used throughout

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Correct container="container" constructor; proper HighchartsOptions assignment; colorAxis for continuous scale; inline JS for headless Chrome — idiomatic highcharts_core usage
• LM-02: Distinctive Features (3/5) — Uses Highcharts-specific features: colorAxis for continuous colormap, heatmap module, and null-separated polylines ([None, None]) for multi-segment contour rendering — a technique specific to the Highcharts data model

Score Caps Applied

• None

Strengths

• Excellent custom viridis color stops producing a faithful perceptually-uniform elevation colormap
• Marching squares contour extraction (inline, no scipy dependency) produces smooth, correctly chained polylines
• Full theme-adaptive chrome: PAGE_BG, INK, INK_SOFT, INK_MUTED, ELEVATED_BG all wired to ANYPLOT_THEME throughout
• White contour lines (rgba(255,255,255,0.85)) are visible across the entire viridis range in both themes
• Both grid axes fully suppressed for a clean cartographic look; axis labels include units

Weaknesses

• Title prefix "Mountain Terrain · " breaks the required {spec-id} · {library} · anyplot.ai format — move the descriptive name to the subtitle only
• Contour lines are not labeled with elevation values; the spec says "label key contour levels when practical" — adding text at the open ends of a few key contours (e.g. 600 m, 800 m, 1000 m) would satisfy this

Issues Found

1. SC-04 PARTIAL: Title is Mountain Terrain · contour-basic · highcharts · anyplot.ai instead of contour-basic · highcharts · anyplot.ai
   • Fix: Remove the "Mountain Terrain · " prefix from the title text; the subtitle already provides the descriptive context
2. SC-02 MINOR: Contour lines have no elevation labels (spec: "label key contour levels when practical")
   • Fix: Add small text annotations or SVG labels at the open termini of 2–3 major contour levels on the heatmap

AI Feedback for Next Attempt

Fix the title to exactly contour-basic · highcharts · anyplot.ai — the descriptive context is already in the subtitle. Optionally add contour level text labels at 2–3 key isolines to satisfy the spec labeling note. Everything else is publication quality.

Verdict: APPROVED