feat(pygal): implement scatter-basic

[github-actions]

Implementation: scatter-basic - python/pygal

Implements the python/pygal version of scatter-basic.

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

Parent Issue: #611

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The plot renders on a warm off-white background (~#FAF8F1). The title "scatter-basic · pygal · anyplot.ai" appears centered at the top in dark text. Y-axis label "Exam Score (%)" and X-axis label "Study Hours per Week (hrs)" are clearly legible in dark text. Tick labels (20%–100% on Y; 0–14 on X) are readable in a muted dark tone. The data is plotted as green (#009E73) filled circles at 70% opacity, showing a clear positive correlation between study hours and exam scores across 180 points. A subtle grid of both horizontal and vertical lines is visible without competing with the data. No legend is shown (single series — correct). All text is readable against the light background; no light-on-light issues detected.

Dark render (plot-dark.png): The plot renders on a warm near-black background (~#1A1A17). Title, axis labels, and tick labels flip to light text tones and are readable against the dark surface. The data circles remain the same brand green (#009E73) — identical to the light render — confirming only chrome elements flip between themes. Grid lines are more subtle in the dark render (nearly invisible) but the data and labels remain clear. No dark-on-dark failures detected; tick labels and axis titles are all visible. Both background choices are correct (warm off-white / warm near-black, not pure white/black).

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

Score: 82/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set (title=52, label=40, major_label=36); readable in both themes
• VQ-02: No Overlap (6/6) — No text collisions; point overlap is data-inherent and controlled by opacity
• VQ-03: Element Visibility (5/6) — Dots visible at opacity=0.7; dots_size=14 adequate but slightly small for the 4800px canvas
• VQ-04: Color Accessibility (2/2) — Single Okabe-Ito series, CVD-safe
• VQ-05: Layout & Canvas (3/4) — Good 4800×2700 landscape with margin=60; minor dead space at top-left (x=0 to 1.5 empty)
• VQ-06: Axis Labels & Title (2/2) — Both axes have descriptive labels with units
• VQ-07: Palette Compliance (2/2) — Brand green #009E73 as first/only series; correct warm backgrounds in both themes

Design Excellence (9/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured library default with correct palette and custom font. No distinctive design choices beyond requirements; clean but not sophisticated.
• DE-02: Visual Refinement (3/6) — Single-series legend correctly omitted; subtle grid. Pygal renders a full four-sided frame by default with no spine removal, limiting refinement.
• DE-03: Data Storytelling (2/6) — Data is displayed clearly but no visual hierarchy or storytelling. The positive correlation is evident from the data itself, but no emphasis, callout, or focal point guides the viewer.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — pygal.XY(stroke=False) is correct scatter type
• SC-02: Required Features (4/4) — Grid (show_x/y_guides), transparency (opacity=0.7), axis labels, title all present
• SC-03: Data Mapping (3/3) — Study hours → X, exam scores → Y; axes cover full data range
• SC-04: Title & Legend (3/3) — Title is scatter-basic · pygal · anyplot.ai; no legend for single series (correct)

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — 180 points showing positive trend with realistic noise; covers the typical scatter pattern well but lacks distinct sub-features (e.g., outlier clusters)
• DQ-02: Realistic Context (5/5) — Study hours vs exam scores: real-world, comprehensible, neutral
• DQ-03: Appropriate Scale (4/4) — 1.5–13.5 hrs and 20–100% are realistic, realistic values

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat sequential script; no functions or classes
• CQ-02: Reproducibility (2/2) — np.random.seed(42)
• CQ-03: Clean Imports (2/2) — os, sys, numpy, pygal, Style all used; no unused imports
• CQ-04: Code Elegance (2/2) — Clean, Pythonic; sys.path.pop(0) workaround is documented by its context; strict=True in zip() is modern practice
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html (interactive library)

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) — Correct pygal.XY(), all theming via Style(), stroke=False for scatter, x_value_formatter/value_formatter for tooltips, range/xrange for axis bounds, js=[] to avoid CDN dependency
• LM-02: Distinctive Features (2/5) — HTML export (pygal's interactive SVG capability) is leveraged; tooltip formatters take advantage of pygal's hover system. However, pygal's more distinctive capabilities (sparklines, gauge charts, interactive legends) are not demonstrated

Score Caps Applied

• None

Strengths

• All theme tokens correctly applied in both renders — backgrounds, text, and data colors are all compliant
• Full spec compliance: correct chart type, all required features, proper title format
• Excellent code quality: clean imports, seed set, flat structure, modern Python patterns
• Correct decision to omit legend for single-series plot
• Interactive HTML output leverages pygal's native capability

Weaknesses

• Design Excellence is at default levels — the scatter has no visual hierarchy, no focal point, and no storytelling beyond displaying the correlation
• Pygal's full four-sided frame is present; while spine removal is not trivially available in pygal, the default border gives a boxed appearance that reduces visual refinement
• Grid lines in dark render become nearly invisible — explore show_minor_x_labels/minor guides or a slightly more prominent subtle tone for the dark theme grid
• dots_size=14 could be increased to 16–18 for better presence at 4800×2700px

Issues Found

1. DE-01 LOW (4/8): Clean but visually generic — looks like a correctly configured default. No distinguishing design choices.
   • Fix: Consider adding visual hierarchy — e.g., use color intensity gradient (lighter to darker green for lower to higher values) via a custom colors tuple, or increase dots_size and reduce opacity slightly for a more dramatic appearance
2. DE-02 LOW (3/6): No spine/frame removal; default box frame visible.
   • Fix: Pygal supports show_x_guides, show_y_guides for grid, but frame removal requires style overrides. Try setting Style(..., plot_border=None) or use no_prefix=True plus CSS injection to hide the outer border in the SVG
3. DE-03 LOW (2/6): No visual storytelling — data is correct but viewer has no guided insight.
   • Fix: Add a secondary neutral reference series (e.g., a trend band or a highlight region showing the "high performance" zone via a separate semi-transparent XY series) to guide the viewer's eye

AI Feedback for Next Attempt

Improve Design Excellence: (1) Increase dots_size to 16–18 for better marker presence at 4800px. (2) Add visual storytelling — for example, split points into two groups (below/above average score) using two XY series in Okabe-Ito green and orange to create visual hierarchy and guide the viewer to an insight. (3) Investigate removing the chart border/frame by customizing the Style object (background=PAGE_BG already covers the frame area, so removing the stroke on the chart frame may achieve a cleaner look). Keep all existing strengths: correct palette, theme tokens, HTML output, title format, and seed.

Verdict: REJECTED

[github-actions]

🔧 Repair Attempt 1/3

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): Scatter plot on a warm off-white (#FAF8F1) background. Two series displayed using Okabe-Ito colors: teal (#009E73) dots for "Passing (≥ 70%)" and orange (#D55E00) dots for "Below 70%". The data shows a clear positive correlation between study hours per week (x-axis, 1–14 hrs) and exam scores (y-axis, 20–100%). Title "scatter-basic · pygal · anyplot.ai" is displayed at the top in dark ink. Axis labels "Study Hours per Week (hrs)" and "Exam Score (%)" are descriptive and include units. Tick labels are readable. Both x and y grid lines are subtle. Legend appears at the bottom with two columns. All text is clearly readable against the light background. PASS.

Dark render (plot-dark.png): Identical layout on a near-black (#1A1A17) background. Title, axis labels, and tick labels are rendered in light text and are clearly readable against the dark background. No dark-on-dark text failures detected. The data colors (teal #009E73 and orange #D55E00) are identical to the light render — only the background and chrome have flipped. Grid lines remain subtle. Legend text is light-colored and readable. Brand green #009E73 is clearly visible on the dark surface. PASS.

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

Score: 87/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	7	10
Total	87	100

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set (title 52px, labels 40px, major labels 36px, legend 34px); perfectly readable in both themes
• VQ-02: No Overlap (6/6) — No overlapping text elements; legend at bottom cleanly separated
• VQ-03: Element Visibility (6/6) — dots_size=17 with opacity=0.7 is well-matched to 180 points; markers visible without excessive overlap
• VQ-04: Color Accessibility (2/2) — Okabe-Ito positions 1+2 (teal/orange) are CVD-safe and high-contrast
• VQ-05: Layout & Canvas (4/4) — Scatter fills 60–70% of canvas; margins balanced; no content cut off
• VQ-06: Axis Labels & Title (2/2) — "Study Hours per Week (hrs)" and "Exam Score (%)" include units
• VQ-07: Palette Compliance (2/2) — First series is #009E73; second is #D55E00; backgrounds are #FAF8F1 / #1A1A17; chrome theme-correct in both renders

Design Excellence (10/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured style (Okabe-Ito, explicit fonts, semantic colors) but overall look is a polished library default, not a standout design
• DE-02: Visual Refinement (2/6) — Both x and y grids visible; no spine removal (pygal limits this); minimal refinement beyond default chart frame
• DE-03: Data Storytelling (4/6) — The 70% threshold split and semantic color encoding (green=passing, orange=failing) immediately convey the study→outcome narrative; good visual hierarchy

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — pygal.XY() is correct scatter implementation
• SC-02: Required Features (4/4) — Transparency (opacity=0.7), axis labels, descriptive title, grid lines all present; 180-point dataset with positive correlation (~0.7) demonstrated
• SC-03: Data Mapping (3/3) — Study hours on x, exam scores on y; all data visible within specified ranges
• SC-04: Title & Legend (3/3) — Title "scatter-basic · pygal · anyplot.ai" matches required format; legend labels are meaningful

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows full positive-correlation scatter with realistic noise, visible spread, and outliers near boundaries
• DQ-02: Realistic Context (5/5) — Study hours vs exam scores is a neutral, real-world educational scenario
• DQ-03: Appropriate Scale (4/4) — Study hours 1.5–13.5 hrs/week, exam scores 20–100% — entirely realistic

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat imports → data → style → chart → save; no functions or classes
• CQ-02: Reproducibility (2/2) — np.random.seed(42) set
• CQ-03: Clean Imports (2/2) — Only os, sys, numpy, pygal, pygal.style.Style used
• CQ-04: Code Elegance (2/2) — Clean, Pythonic; sys.path.pop(0) workaround is explained inline; appropriate complexity
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html; current pygal API

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Uses pygal.XY() with XY coordinate tuples, Style object, value/x_value formatters, legend_at_bottom_columns, range/xrange — idiomatic and correct
• LM-02: Distinctive Features (3/5) — Interactive HTML output (pygal's native strength), custom formatters, dots_size control; doesn't push further into pygal's tooltip customization, SVG embedding, or other advanced features

Score Caps Applied

• None — DE-01=4 (above the ≤2 threshold); no other caps triggered

Strengths

• Perfect visual quality across both themes: correct palette, theme-adaptive chrome, explicit font sizing, no overlap
• Strong data storytelling via the 70% passing-threshold split — viewer immediately grasps the study→outcome narrative
• Flawless spec compliance and code structure; clean KISS code with proper seed

Weaknesses

• DE-01 (4/8): Still reads as a well-configured library default. No standout design element (e.g., a trend line, custom hover template, or refined marker styling) that would elevate it to publication quality
• DE-02 (2/6): Visual refinement is limited — both x+y grids active, chart frame visible on all sides; pygal restricts spine removal but the margin (60px on 4800px canvas) could be increased and grid lines selectively reduced
• LM-02 (3/5): Doesn't exploit pygal's strongest distinctive feature — rich interactive tooltips with custom HTML/CSS. The js=[] suppresses all interactivity; a more distinctive implementation would leverage pygal's interactive SVG nature

Issues Found

1. DE-01 LOW: Polished defaults but no distinctive design element
   • Fix: Add a linear trend/regression series using pygal's line-on-scatter capability (XY with stroke=True for one series); or use custom , custom legend icon style, or other pygal-specific styling options to elevate the visual
2. DE-02 LOW: Grid on both axes with no refinement
   • Fix: Increase margin (e.g., 120–180px) to add more breathing room; set and keep only y-axis guides to reduce clutter; explore or chart border options
3. LM-02 MID: Interactive potential not exploited
   • Fix: Remove to restore interactivity, or if PNG is the focus, add a custom value_formatter with richer label strings that demonstrate pygal's formatting power

AI Feedback for Next Attempt

Design Excellence is the only gap (10/20). Specific improvements: (1) Add a trend line as a third pygal series (XY with stroke=True, dots_size=0) in a muted neutral color to make the correlation explicit and elevate visual sophistication. (2) Increase margin to 120–160px for more generous whitespace. (3) Consider showing only y-axis guides (show_x_guides=False) to reduce grid clutter. (4) Restore interactive tooltips (remove js=[]) or leverage pygal's tooltip_border_radius and custom tooltip formatting to show a distinctive pygal feature. These changes would push DE-01 to 6 and LM-02 to 4, reaching ~93.

Verdict: REJECTED