feat(highcharts): implement scatter-basic

[github-actions]

Implementation: scatter-basic - python/highcharts

Implements the python/highcharts version of scatter-basic.

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

Parent Issue: #611

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The chart renders on a warm off-white #FAF8F1 background. The title "scatter-basic · highcharts · anyplot.ai" is left-aligned in dark ink at a large size (~68px), with a subtitle "Study hours versus exam performance across 180 students" in muted dark text below. The x-axis is labeled "Study Hours per Day" and the y-axis "Exam Score (%)", both in dark ink with clearly readable tick labels. Data consists of 180 green (#009E73) circular markers with subtle page-background-colored edges, rendered at radius 18. A clear positive correlation is visible from lower-left to upper-right. Grid lines are very subtle. All text is readable against the light background — no legibility failures.

Dark render (plot-dark.png): The same chart renders on a warm near-black #1A1A17 background. The title, subtitle, axis labels, and tick labels all switch to light ink tokens (F0EFE8 / B8B7B0) and are clearly readable. Data markers are the same #009E73 green — identical to the light render (only chrome flips). No dark-on-dark text failures observed — tick labels, axis titles, and subtitle are all light-colored and legible. Grid lines appear as subtle lighter lines against the dark background.

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

Score: 85/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (8/8) — all font sizes explicitly set; title (68px), axis labels (40px), ticks (28px); fully readable in both themes
• VQ-02: No Overlap (6/6) — no text collisions; marker overlap handled by fillOpacity 0.7 with white edges
• VQ-03: Element Visibility (5/6) — radius 18 markers are visible; some density in 4-7 hour range makes individual points harder to isolate
• VQ-04: Color Accessibility (2/2) — single series, #009E73 on both surfaces; high contrast, CVD-safe
• VQ-05: Layout & Canvas (3/4) — good proportions and generous margins, but x-axis extends to 14 with almost no data past 12, and y-axis starts at 0 with no data below ~30%, leaving sizable empty zones at bottom and right
• VQ-06: Axis Labels & Title (2/2) — "Study Hours per Day" and "Exam Score (%)" are descriptive with units
• VQ-07: Palette Compliance (2/2) — first series #009E73; light bg #FAF8F1; dark bg #1A1A17; full theme-adaptive chrome

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — above default: left-aligned title, Inter font family, white marker edges, subtitle adds context; not yet publication-ready
• DE-02: Visual Refinement (4/6) — clear refinements: legend disabled for single series, credits off, tick marks removed (tickLength: 0), subtle GRID opacity, generous spacing parameters
• DE-03: Data Storytelling (3/6) — subtitle provides narrative context; positive correlation is immediately apparent; no additional emphasis (trendline, focal-point annotation) to guide the viewer

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — correct scatter plot
• SC-02: Required Features (4/4) — transparency (fillOpacity 0.7), axis labels, descriptive title, grid lines all present
• SC-03: Data Mapping (3/3) — study hours on x (independent), exam score on y (dependent); 180 points in recommended range
• SC-04: Title & Legend (3/3) — title is "scatter-basic · highcharts · anyplot.ai"; single-series legend correctly disabled

Data Quality (13/15)

• DQ-01: Feature Coverage (5/6) — shows correlation, distribution, and overlap pattern; single-group limits variety
• DQ-02: Realistic Context (5/5) — study hours vs. exam scores: neutral, educational, real-world plausible
• DQ-03: Appropriate Scale (3/4) — values are domain-realistic; gamma distribution produces few points past 10 hours while axis extends to 14, and no data exists below ~30% while axis starts at 0

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — sequential: tokens -> data -> chart -> HTML -> Selenium; no functions/classes
• CQ-02: Reproducibility (2/2) — np.random.seed(42)
• CQ-03: Clean Imports (2/2) — all imports used
• CQ-04: Code Elegance (2/2) — clean, idiomatic; container.screenshot() preferred over driver.save_screenshot
• CQ-05: Output & API (1/1) — saves plot-{THEME}.png and plot-{THEME}.html

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Chart(container="container"), ScatterSeries, HighchartsOptions, to_js_literal(), inline JS download to avoid CDN/headless issues — all correct patterns
• LM-02: Distinctive Features (3/5) — custom tooltip pointFormat, HTML export, hover state configuration, fillOpacity via plotOptions.scatter; several Highcharts-specific features exercised

Score Caps Applied

• None

Strengths

• Full theme-adaptive chrome: all INK, INK_SOFT, INK_MUTED, GRID, PAGE_BG, ELEVATED_BG tokens wired correctly — both renders are fully readable
• Complete spec compliance: correct title format, transparency, grid, 180 points
• Excellent code quality: seed set, clean imports, KISS structure, container.screenshot() for precise element capture
• Proper Highcharts idioms: inline JS download prevents CDN/headless failure, container parameter present

Weaknesses

• Design excellence needs improvement: add a linear regression trendline or reference band to create a visual focal point (DE-03); consider removing outer chart border/frame for a more minimal look (DE-02)
• Axis ranges leave notable empty space: x-axis extends 2+ hours beyond actual data; y-axis starts at 0 but data begins ~30% — tighten ranges or add padding so the data fills more of the plot area (VQ-05, DQ-03)
• Point density in the 4-8 hour cluster makes individual markers hard to distinguish — consider reducing radius slightly or a subtle alpha decrease (VQ-03)

Issues Found

1. DE-03 LOW (3/6): No visual emphasis on the trend — correlation story is implicit but not highlighted.
   • Fix: Add a Highcharts regression line (LineSeries overlay) to make the correlation the focal point
2. VQ-05 / DQ-03 MINOR: Axis ranges extend well beyond data extents, leaving large empty bottom and right zones.
   • Fix: Set x max to ~13 and y min to ~25 (or use minPadding/maxPadding for auto-range)
3. DE-01 (5/8): Visually polished but not yet publication-ready.
   • Fix: Add regression overlay, tighten axis ranges, consider subtle chart border removal

AI Feedback for Next Attempt

Improve design excellence to reach 90+: (1) add a linear regression trendline as a second LineSeries over the scatter to make the correlation the focal point — this elevates DE-03 from 3 to 5+; (2) tighten axis ranges so data fills 80%+ of the plot area (x: 0-13, y: 25-100 with some padding) — this fixes VQ-05 and DQ-03; (3) keep all existing theme-adaptive chrome, code structure, and palette compliance which are all correct. Do NOT change the title format or color tokens.

Verdict: REJECTED