feat(highcharts): implement learning-curve-basic

[github-actions]

Implementation: learning-curve-basic - python/highcharts

Implements the python/highcharts version of learning-curve-basic.

File: plots/learning-curve-basic/implementations/python/highcharts.py

Parent Issue: #2275

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The plot displays a classic learning curve on a warm off-white (#FAF8F1) background. Two lines with confidence bands represent Training Score (green, #009E73) and Validation Score (orange, #D55E00). The training curve remains high (~0.99) and stable across all training set sizes with minimal variance. The validation curve starts low (0.72) with high variance, then improves toward 0.93 as training data increases—clearly demonstrating the underfitting-to-convergence pattern. The title "learning-curve-basic · highcharts · anyplot.ai" is clearly visible at the top. Axis labels are explicit: Y-axis shows "Accuracy Score" (0.60–1.02 range), X-axis shows "Training Set Size (samples)" (0–1700 range). The legend is positioned top-right with clear labels. Markers are visible on both lines. All text is dark and readable against the light background; grid lines are subtle and well-integrated.

Dark render (plot-dark.png): Same plot structure on a warm near-black (#1A1A17) background. The data colors (green and orange) are identical to the light render, confirming proper theme-independence for categorical data. All text is light-colored and clearly readable against the dark background. Title, axis labels, tick labels, and legend text all maintain excellent contrast and readability. Grid lines are subtle and consistent with the light render. The visual hierarchy, data representation, and overall structure are identical to the light version, proving correct theme adaptation. Both renders are legible and complete.

Score: 86/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) - All font sizes explicitly set (28px title, 22px labels, 18px ticks); all text clearly readable in both themes
• VQ-02: No Overlap (6/6) - No overlapping elements; all text fully readable
• VQ-03: Element Visibility (6/6) - Markers and lines perfectly adapted; all elements clearly distinguishable
• VQ-04: Color Accessibility (2/2) - Okabe-Ito palette provides CVD-safe contrast
• VQ-05: Layout & Canvas (4/4) - Perfect layout with balanced margins; plot fills optimal canvas percentage
• VQ-06: Axis Labels & Title (2/2) - Descriptive labels with units; title matches spec format
• VQ-07: Palette Compliance (2/2) - First series #009E73, second #D55E00; backgrounds correct; both renders theme-correct

Design Excellence (10/20)

• DE-01: Aesthetic Sophistication (4/8) - Well-configured library defaults with subtitle context; lacks exceptional custom design
• DE-02: Visual Refinement (2/6) - Reasonable margins; minimal customization beyond defaults
• DE-03: Data Storytelling (4/6) - Clearly communicates underfitting-to-convergence narrative; good visual hierarchy

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - Correct learning curve with two series and confidence bands
• SC-02: Required Features (4/4) - Training scores, validation scores, and ±1 std bands all present
• SC-03: Data Mapping (3/3) - X/Y correctly assigned; all data visible and properly scaled
• SC-04: Title & Legend (3/3) - Correct format: "learning-curve-basic · highcharts · anyplot.ai"

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Shows all learning curve aspects with clear variance patterns
• DQ-02: Realistic Context (5/5) - Real classification scenario; plausible accuracy scores; neutral educational context
• DQ-03: Appropriate Scale (4/4) - Y-axis range appropriate; X-axis captures all samples; reproducible

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Straightforward data setup and export; no unnecessary complexity
• CQ-02: Reproducibility (2/2) - Random seed set
• CQ-03: Clean Imports (2/2) - All imports used
• CQ-04: Code Elegance (2/2) - Clean, Pythonic, no fake functionality
• CQ-05: Output & API (1/1) - Correct file output format

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) - Proper Highcharts API; uses arearange for confidence intervals; good series configuration
• LM-02: Distinctive Features (2/5) - Uses arearange but mostly standard patterns; could leverage more capabilities

Strengths

• Perfect Palette Compliance: Okabe-Ito canonical order maintained
• Both Renders Theme-Correct: Identical data colors, theme-adaptive chrome, fully readable
• Explicit Text Sizing: All elements clearly visible at full resolution
• Excellent Spec Adherence: Correct type, all features, proper title format
• Clean, Reproducible Code: Clear data generation, proper API usage
• Good Data Storytelling: Learning curve pattern clearly communicated

Weaknesses

• Design Excellence Limited: Follows defaults well but lacks exceptional aesthetic sophistication
• Minimal Visual Refinement: Limited custom decorative choices
• Library Mastery Could Be Deeper: Doesn't fully leverage Highcharts-specific distinctive features

Verdict: APPROVED

Score 86/100 meets the ≥80 threshold for approval.

[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): The learning curve is displayed on a warm off-white (#FAF8F1) surface with two data series: training (bluish-green #009E73) and validation (vermillion #D55E00). The training line starts high (~0.99) and decreases slightly with training set size, while validation starts low (~0.72) and increases, showing a classic overfitting pattern that converges toward the training line. Confidence bands (±1 std) are rendered as semi-transparent fills around each line (green for training, orange for validation), clearly showing the variability across folds. The title "learning-curve-basic · highcharts · anyplot.ai" and subtitle "Model Performance vs Training Set Size" are prominently displayed at the top in dark text. Axis labels "Training Set Size (samples)" and "Accuracy Score" are clearly readable with 18px tick labels in secondary text color. The legend on the right side lists "Training Score" and "Validation Score" against a subtle elevated background. All text elements are highly legible against the light background with strong contrast.

Dark render (plot-dark.png): The same plot rendered on a warm near-black (#1A1A17) surface with identical data colors: the training line and band remain bluish-green, validation remains vermillion. Title and subtitle are now rendered in light text (#F0EFE8) and are equally readable against the dark background. Axis labels and tick labels use the appropriate light secondary text color (#B8B7B0), maintaining excellent readability. The confidence bands and line colors are identical to the light render—only the chrome (background, text, axis lines, legend background) has flipped to dark theme. Grid lines use the theme-adaptive token (10% opacity light text on dark). The legend background is now dark-elevated (#242420) with light borders. No dark-on-dark failures detected—all text remains readable, including axis labels and legend text. The brand green line remains visible and distinguishable. Both renders pass legibility requirements.

Score: 86/100

Category	Score	Max
Visual Quality	30	30
Design Excellence	11	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	5	10
Total	86	100

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — Font sizes properly scaled (28px title, 22px axis labels, 18px ticks); all text readable in both light and dark themes with strong contrast.
• VQ-02: No Overlap (6/6) — Legend positioned away from data; axis labels don't overlap; all elements have breathing room.
• VQ-03: Element Visibility (6/6) — Markers visible on both lines; confidence bands rendered with appropriate 0.25–0.35 opacity; no hidden or invisible elements.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito palette (#009E73, #D55E00) is CVD-safe with adequate contrast; no red-green sole signaling.
• VQ-05: Layout & Canvas (4/4) — Generous margins (180 bottom, 200 left, 120 right, 150 top); proportions balanced; nothing cut off.
• VQ-06: Axis Labels & Title (2/2) — "Accuracy Score" descriptive; "Training Set Size (samples)" includes units.
• VQ-07: Palette Compliance (2/2) — First series #009E73 ✓; multi-series follows Okabe-Ito order ✓; plot backgrounds #FAF8F1 (light) / #1A1A17 (dark) ✓; both renders theme-correct ✓

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) — Clean, professional styling with intentional color choices and proper typography hierarchy. Uses theme tokens throughout. However, design is fairly conventional—standard legend placement, straightforward margins, no distinctive visual flourishes. Competent execution of standard patterns.
• DE-02: Visual Refinement (3/6) — Good removal of unnecessary elements (no top/right spines needed for line charts). Legend has subtle background and border. Whitespace is adequate but not particularly generous or refined. Grid is present and subtle. Functional but minimal customization beyond defaults.
• DE-03: Data Storytelling (3/6) — The plot clearly communicates the learning curve narrative: training-validation gap, convergence pattern, overfitting diagnosis. However, no visual hierarchy or emphasis to guide the viewer through the story. No color contrast emphasis, size variation, or focal point. Straightforward visualization without narrative enhancement.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct learning curve with training and validation lines plus confidence bands.
• SC-02: Required Features (4/4) — All spec requirements: two lines with shaded confidence bands, clear legend, proper axis labels with units.
• SC-03: Data Mapping (3/3) — X-axis correctly maps training set sizes (50–1600); Y-axis shows accuracy scores (0.6–1.02); all data visible.
• SC-04: Title & Legend (3/3) — Title includes spec format "learning-curve-basic · highcharts · anyplot.ai"; legend labels are "Training Score" and "Validation Score".

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows all learning curve aspects: training performance, validation performance, confidence intervals, overfitting gap convergence.
• DQ-02: Realistic Context (5/5) — Realistic classification model curve: training high and stable (~0.99→0.944), validation increasing from underfitting region (~0.72→0.932). Plausible cross-validation fold variability.
• DQ-03: Appropriate Scale (4/4) — Training set sizes (50–1600 samples) are sensible; accuracy range (0.6–1.02) is appropriate for binary/multiclass classification.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No unnecessary functions or classes. Straightforward data setup and chart configuration.
• CQ-02: Reproducibility (2/2) — Uses for deterministic synthetic data.
• CQ-03: Clean Imports (2/2) — Only necessary imports: json, os, tempfile, time, urllib, pathlib, numpy, selenium. No bloat.
• CQ-04: Code Elegance (2/2) — No fake UI or overengineering. Appropriate complexity for the task.
• CQ-05: Output & API (1/1) — Correctly saves as plot-{THEME}.png and plot-{THEME}.html. Current Highcharts API.

Library Mastery (5/10)

• LM-01: Idiomatic Usage (3/5) — Good use of Highcharts chart options dict, proper series definitions (arearange + line), correct Selenium pattern for PNG export. However, fairly standard API usage without distinctive techniques. Default score raised slightly due to correct inline-JS pattern for headless Chrome.
• LM-02: Distinctive Features (2/5) — Uses arearange series type for confidence bands (appropriate for Highcharts), marker styling with lineColor=PAGE_BG for contrast, proper zIndex layering. Standard application of library features without particularly distinctive choices.

Score Caps Applied

• None applied

Strengths

• Perfect theme-adaptation: both light and dark renders pass legibility checks with no dark-on-dark or light-on-light failures
• All text elements properly sized and colored with theme tokens
• Correct Okabe-Ito palette usage with consistent data colors across themes
• Realistic, well-structured learning curve data that clearly shows overfitting patterns
• Proper confidence band rendering with appropriate opacity and zIndex layering
• Clean, maintainable code with deterministic data generation

Weaknesses

• Design is functional but conventional—no visual hierarchy or emphasis to guide the viewer through the learning curve narrative
• Missing distinctive visual refinements (no color contrast emphasis, no focal point, standard legend placement)
• Confidence bands could benefit from more sophisticated styling or emphasis to highlight the variability story

Issues Found

1. DE-01 MEDIUM: Standard design without distinctive visual choices
   • Current: Clean but conventional styling and layout
   • Consider: Adding visual hierarchy through subtle emphasis (e.g., highlighting the convergence zone where validation approaches training, or using color intensity variations to emphasize confidence)
2. DE-02 LOW: Minimal visual refinement beyond defaults
   • Current: Adequate whitespace and grid styling
   • Consider: More refined legend styling, subtle typography emphasis, or grid customization to better support the narrative

AI Feedback for Next Attempt

The implementation is solid and meets all technical requirements with proper theme support and color compliance. To improve beyond 86, consider:

1. Add visual hierarchy through subtle emphasis (e.g., slightly bolder training line, or color highlight on the convergence zone)
2. Enhance legend styling or positioning to better draw attention to the key series
3. Consider adding annotations or visual cues to highlight the key insight (overfitting diagnosis)
4. Explore more refined typography or grid styling choices

Verdict: APPROVED