feat(pygal): implement scatter-connected-temporal

[github-actions]

Implementation: scatter-connected-temporal - python/pygal

Implements the python/pygal version of scatter-connected-temporal.

File: plots/scatter-connected-temporal/implementations/python/pygal.py

Parent Issue: #4675

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Background is the correct warm off-white (#FAF8F1). The plot shows a connected scatter of Life Expectancy (years) vs GDP per Capita (USD) for 1990–2023, divided into six colour-coded era segments using an imprint_seq gradient from brand green (#009E73) through to steel blue (#4467A3). Larger amber dots mark key years (1998, 2005, 2008, 2015, 2020) with year text labels adjacent. A prominent red dot anchors the 1990 start ("▶ 1990") and a large blue dot marks the 2023 end. Title, Y-axis label, and Y-axis tick labels ("68.0 yrs", "69.0 yrs" … "78.0 yrs") are clearly readable in dark ink. X-axis tick labels are truncated — every label shows as "$8,0…", "$9,0…", "$10,…" etc., making exact GDP values unreadable. Year annotation labels (1998, 2005, 2008, 2015, 2020, 1990, 2023) are readable in dark ink on the light background. Legend at bottom: 8 entries in 3 columns, all readable.
Legibility verdict: PARTIAL FAIL — X-axis tick values truncated; all other text legible.

Dark render (plot-dark.png): Background is the correct warm near-black (#1A1A17). Data colours (the six era gradient segments, amber key markers, red start, blue end) are identical to the light render — correct. Title text, Y-axis label, Y-axis tick labels, and legend entries are readable in light text. X-axis tick labels remain truncated (same issue). Critical: the year annotation labels ("▶ 1990", "1998", "2005", "2008", "2015", "2020", "2023") appear rendered in dark ink on the dark background — the classic dark-on-dark print_labels failure where pygal's value/label text does not inherit the theme-adaptive foreground token. These labels are barely or not at all readable on the #1A1A17 surface.
Legibility verdict: FAIL — year annotation labels are dark-on-dark in dark render; X-axis ticks truncated in both.

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

Score: 77/100

Category	Score	Max
Visual Quality	19	30
Design Excellence	12	20
Spec Compliance	15	15
Data Quality	14	15
Code Quality	10	10
Library Mastery	7	10
Total	77	100

Visual Quality (19/30)

• VQ-01: Text Legibility (0/8) — Dark-on-dark failure: year annotation labels (print_labels output) appear in dark ink (#1A1A17) on dark background (#1A1A17) in dark render — not legible. Additionally, X-axis tick labels are truncated in both renders ("$8,0…", "$9,0…" etc.) — GDP values unreadable.
• VQ-02: No Overlap (5/6) — Minor crowding where "2015" label sits immediately next to the amber dot, and "2023" label is close to the large end marker. No hard collisions.
• VQ-03: Element Visibility (5/6) — Markers clearly sized (12/20/26 px), line connections visible, temporal gradient legible. Slight reduction because the "End (2023)" large dot and the last era segment dot stack in the same position, making it hard to distinguish them.
• VQ-04: Color Accessibility (2/2) — No red-green sole signal; amber for annotations, semantic red for start, blue for end — all CVD-distinguishable.
• VQ-05: Layout & Canvas (3/4) — Correct 3200×1800 canvas. Legend at bottom functional. Margins reasonable. X-axis tick truncation is a layout-space failure: insufficient horizontal space allocated per tick, forcing pygal to abbreviate.
• VQ-06: Axis Labels & Title (2/2) — "GDP per Capita (USD)" and "Life Expectancy (years)" are descriptive with units. Title format correct.
• VQ-07: Palette Compliance (2/2) — First era series is brand green (#009E73). Temporal gradient follows imprint_seq (#009E73 → #4467A3). Amber anchor used correctly for key-year markers. Light (#FAF8F1) and dark (#1A1A17) backgrounds correct.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Above-generic: intentional temporal gradient with era segmentation, amber accent markers, semantic start/end anchoring, and scaled title font size. Custom style throughout. Not fully publication-grade but clearly designed.
• DE-02: Visual Refinement (3/6) — Dashed guide strokes, rounded line caps, multi-column legend. pygal inherently keeps frames; spine removal isn't available. The x-axis truncation detracts from refinement.
• DE-03: Data Storytelling (4/6) — The colour gradient from green to blue effectively narrates temporal movement. Key year labels contextualise economic events (1998 recession, 2008 crisis, 2020 pandemic). Clear start/end anchors guide the viewer through the path.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct connected scatter plot with temporal path. Points connected in chronological order, markers at every data position.
• SC-02: Required Features (4/4) — Sequential connection ✓, key year annotations ✓, colour gradient for time direction ✓ (also directional ▶ symbol at start), explicit start/end marking ✓, all data visible ✓.
• SC-03: Data Mapping (3/3) — X=GDP per capita, Y=life expectancy, time encodes path ordering. All 34 data points rendered.
• SC-04: Title & Legend (3/3) — Title "Life Expectancy vs GDP · scatter-connected-temporal · python · pygal · anyplot.ai" with descriptive prefix. Legend labels match era names.

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — Temporal path, era gradient, key annotations, start/end markers. Could show explicit arrow overlays on the path but colour gradient satisfies the spec.
• DQ-02: Realistic Context (5/5) — Life expectancy vs GDP per capita for a developing economy 1990–2023. Plausible disruptions (1998, 2008, 2020 shocks). Values and scale consistent.
• DQ-03: Appropriate Scale (4/4) — GDP range ~k–2k, life expectancy 68–78 years, 34 points — all appropriate for the domain and chart type.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat script, no functions or classes, clear loop over eras.
• CQ-02: Reproducibility (2/2) — np.random.seed(42), fully deterministic.
• CQ-03: Clean Imports (2/2) — All imports used; sys.path manipulation justified (avoids shadowing the real pygal package).
• CQ-04: Code Elegance (2/2) — No fake UI. Era loop is clean; per-point dict styling idiomatic in pygal.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png via cairosvg and plot-{THEME}.html via render_to_file.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — pygal.XY with correct stroke/show_dots patterns, cairosvg export, per-point dict styling, x_value_formatter, stroke_style customisation.
• LM-02: Distinctive Features (3/5) — Interactive HTML output (pygal's primary differentiator), per-point colour overrides, multi-column bottom legend, stroke_style with linecap/linejoin.

Score Caps Applied

• None — no cap conditions triggered (VQ-02, VQ-03, SC-01, DQ-02, CQ-04 all > 0; DE-01 > 2)

Strengths

• Temporal gradient from #009E73 → #4467A3 elegantly encodes time progression using the imprint_seq ramp — matches spec intent exactly
• Era-segment colour coding with 6 named phases gives the legend semantic value, not just visual redundancy
• Amber key-year markers (1998, 2005, 2008, 2015, 2020) contextualise historical economic events visually
• Semantic red start / blue end anchoring creates a clear narrative arc across the scatter path
• Correct imprint_seq continuous treatment for temporal gradient; palette compliance excellent
• pygal interactive HTML export leveraged alongside PNG — distinctive library feature used well
• Fully deterministic data generation with realistic GDP/life expectancy shock events

Weaknesses

• Dark-on-dark label failure: year annotation labels (rendered via print_labels=True) appear in dark ink on the dark (#1A1A17) background — pygal's print_labels text does not automatically inherit the foreground Style token. Fix: set value_label_font_color or equivalent per-point "color": override on label dicts to use INK (#F0EFE8 in dark mode), or add explicit CSS/style overrides to the SVG string before cairosvg conversion.
• X-axis tick label truncation: all X-axis ticks show "$8,0…", "$9,0…" etc. — pygal abbreviates because tick label width exceeds the column width. Fix: use shorter formatter (lambda x: f"${x/1000:.0f}k" producing "$8k", "$9k" etc.) or reduce the number of X labels (x_labels_major_count=5) to give each label more horizontal room.
• Minor crowding of the "End (2023)" annotation label at the right canvas margin — in dark render this compounds the dark-on-dark issue.

Issues Found

1. VQ-01 ZERO (dark-on-dark): print_labels=True year text rendered in dark ink on #1A1A17 background — unreadable in dark render
   • Fix: Override label text colour to INK token in dark mode; use per-point "label_color": dict entries or patch SVG fill attribute before PNG export
2. VQ-01 / VQ-05 (x-axis truncation): Tick labels truncated to "$Xk,0…" — values unreadable
   • Fix: Switch to shorter x_value_formatter=lambda x: f"${x/1000:.0f}k" so labels fit without abbreviation

AI Feedback for Next Attempt

Two targeted fixes needed: (1) Dark-mode label legibility — set year annotation label text to INK (#F0EFE8) in dark mode since pygal's print_labels does not auto-inherit the foreground Style token. Best approach: patch the SVG bytestring before cairosvg conversion, replacing fill="#1a1a17" (or equivalent computed dark ink) on <text class="value"> elements to fill="#F0EFE8" when THEME=dark. (2) X-axis tick truncation — switch the formatter to lambda x: f"${x/1000:.0f}k" to produce compact "$8k", "$9k", "$22k" labels that fit the column width. No other structural changes needed — the temporal gradient concept, era segmentation, key-year annotations, and spec compliance are excellent.

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 theme surface. Title "Life Expectancy vs GDP · scatter-connected-temporal · python · pygal · anyplot.ai" renders in dark ink at the top, clearly readable at scaled font size 55 (correctly shrunk for the 81-char title). X-axis label "GDP per Capita (USD)" and Y-axis label "Life Expectancy (years)" are dark, readable, and carry units. Tick labels ($8k–$22k on x; 68.0–78.0 yrs on y) appear in muted dark tone, readable against the cream surface. Subtle dashed grid lines are present without competing with data. Six era segments form a connected scatter path from lower-left ($8k / 68 yrs in 1990) to upper-right ($22k / 76.5 yrs in 2023), colored in the imprint_seq gradient from #009E73 (brand green, era 1990–1997) through teal-to-blue interpolations to #4467A3 (era 2020–2023). Amber (#DDCC77) dots mark key years (1998, 2005, 2008, 2015, 2020) with year labels in dark text. A red (#AE3030) large dot with "▶ 1990" labels the start; a dark-blue large dot with "● 2023" labels the end. Legend at bottom with 7 entries across 3 columns, all readable. Some label crowding in the $13k–$16k GDP band (2005/2008 labels cluster near the path). All text is readable against the light background. Legibility verdict: PASS.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background — correct dark surface. Title, axis labels, and tick labels all render in light ink, clearly legible against the dark background. Grid lines subtle. Legend text readable. No dark-on-dark failures: the SVG label-color patch correctly sets year annotation text (1998, 2005, 2008, 2015, 2020, "▶ 1990", "● 2023") to INK (#F0EFE8), so they appear as light text on the dark surface. Data colors are identical to the light render — brand green (#009E73) for the first era, sequential gradient to blue (#4467A3) for the final era, amber (#DDCC77) for key-year markers, red (#AE3030) for start, dark blue for end. Only chrome (background, text, grid) has flipped; data palette is unchanged. Legibility verdict: PASS.

Both paragraphs confirmed. All text readable in both themes. No dark-on-dark failures.

Score: 84/100

Category	Score	Max
Visual Quality	26	30
Design Excellence	12	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	9	10
Library Mastery	7	10
Total	84	100

Visual Quality (26/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set; title, axis labels, tick labels, year labels readable in both themes. Minor deduction: year labels in the dense $13k–$16k zone are somewhat small relative to the path.
• VQ-02: No Overlap (4/6) — Label crowding in middle zone ($13k–$16k): "2005" and "2008" labels cluster near the era path; "2015"/"2020" labels tight in upper-right. Readable but noisy.
• VQ-03: Element Visibility (6/6) — Marker sizes perfectly adapted: era dots 12px, key-year 20px, start/end 26px, line width 5px. Excellent density adaptation for 34 points.
• VQ-04: Color Accessibility (2/2) — Imprint seq gradient is CVD-safe; amber and red markers are clearly distinct.
• VQ-05: Layout & Canvas (3/4) — 3200×1800 correct. Right margin (80px) tight for "● 2023" label; top margin (60px) slightly small for title breathing room.
• VQ-06: Axis Labels & Title (2/2) — "GDP per Capita (USD)" and "Life Expectancy (years)" — descriptive with units.
• VQ-07: Palette Compliance (2/2) — First era = #009E73 ✓. Sequential gradient #009E73→#4467A3 = imprint_seq ✓. Amber anchor for key events, #AE3030 for start. Backgrounds #FAF8F1/#1A1A17 ✓. Data colors identical across themes; chrome correctly flips ✓.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Above defaults: temporal gradient across 6 era colors, three-tier marker hierarchy (12→20→26px), arrow-character start marker (▶), SVG dark-theme patching. Intentional and thoughtful design. Not publication-ready but clearly above a configured default.
• DE-02: Visual Refinement (3/6) — Dashed grid guides, generous margins, round linecap/linejoin on strokes, bottom legend in organized columns. Pygal's forced four-spine frame limits further refinement (library constraint).
• DE-03: Data Storytelling (4/6) — Clear temporal narrative: green start → blue end, economic shocks visible as path reversals, amber key-event labels (1998 recession, 2008 crisis, 2020 pandemic) contextualize the trajectory. Visual hierarchy guides the viewer effectively.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Connected scatter with temporal path via XY chart + stroke. Correct type fully implemented.
• SC-02: Required Features (4/4) — Chronological connection, key-year annotations, color gradient for temporal direction, visible markers, directional arrow — all present.
• SC-03: Data Mapping (3/3) — X=GDP per capita, Y=life expectancy, time encoded as 2D path trajectory.
• SC-04: Title & Legend (3/3) — Title "Life Expectancy vs GDP · scatter-connected-temporal · python · pygal · anyplot.ai" — correct format. 7-entry legend.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All aspects present: temporal path, era gradient coloring, key event markers, start/end bookends, directional indicator.
• DQ-02: Realistic Context (5/5) — Developing country GDP vs life expectancy 1990–2023 — highly plausible, richly contextualized, neutral topic.
• DQ-03: Appropriate Scale (4/4) — $8k–$22k GDP per capita and 68–77 yr life expectancy realistic for a transitioning economy. Economic shock magnitudes calibrated correctly.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — One helper function _patch_label_colors present but justified: workaround for pygal's label color not adapting via the foreground Style token in dark theme. Code otherwise linear and clean.
• CQ-02: Reproducibility (2/2) — np.random.seed(42) set.
• CQ-03: Clean Imports (2/2) — All imports used: os (theme env), re (SVG patching), sys (path fix), cairosvg (PNG), numpy, pygal, pygal.style.Style.
• CQ-04: Code Elegance (2/2) — Clean and idiomatic. Era loop is elegant. SVG patch is a smart technical workaround for a real library limitation.
• CQ-05: Output & API (1/1) — plot-{THEME}.png via cairosvg and plot-{THEME}.html via render_to_file — both correct.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — pygal.XY with dict-format data points (value, label, color), stroke/dots_size params, stroke_style dict, print_labels, legend_at_bottom — all idiomatic pygal patterns. SVG post-processing is a necessary workaround, not a sign of non-idiomatic usage.
• LM-02: Distinctive Features (3/5) — Per-point coloring via color key in data dicts (pygal-specific), stroke_style with linecap/linejoin, interactive HTML output via render_to_file, print_labels with per-point label text — three pygal-distinctive features leveraged.

Score Caps Applied

• None

Strengths

• Excellent temporal narrative: imprint_seq gradient (green→blue across 6 eras) encodes time direction visually; ▶ 1990 / ● 2023 bookend markers frame the story clearly
• Three-tier marker hierarchy (dots_size 12→20→26) creates intentional visual prominence for era points, key events, and start/end anchors
• Correct semantic anchor usage: amber (#DDCC77) for key years and #AE3030 for the start marker match the style-guide roles precisely
• SVG label-color patching correctly adapts year annotation text to INK token in dark theme, avoiding dark-on-dark failure
• Full spec compliance: connected path, chronological connection, color gradient, key-year annotations, temporal direction arrow — all present
• Realistic and richly contextualized dataset (developing country GDP vs life expectancy 1990–2023) with correctly calibrated economic shocks (1998, 2008, 2020)
• Interactive HTML output produced alongside the PNG — pygal's distinctive interactive feature leveraged

Weaknesses

• Label crowding in the $13k–$16k GDP band: "2005" and "2008" year labels plus their amber dots cluster tightly with the era connection line — reduce label font size slightly or offset the labels outward to reduce visual noise
• Right margin is tight for the "● 2023" end-label — increase margin_right from 80 to ~120 to give the label comfortable breathing room
• "2015" and "2020" labels in the upper-right zone also cluster near the data path — slightly larger positional offset for those labels would improve readability at the dense end of the trajectory
• Top margin (margin_top=60) is slightly small for title breathing room — raise to ~90

Issues Found

1. VQ-02 LABEL CROWDING: Year labels (2005, 2008) cluster with the era path in the $13k–$16k band
   • Fix: Reduce value_label_font_size from 44 to ~36, or add label_font_size adjustments so year labels are smaller and don't compete with the path
2. VQ-05 TIGHT MARGINS: Right margin too small for the "● 2023" end-label
   • Fix: Increase margin_right from 80 to 120; increase margin_top from 60 to 90

AI Feedback for Next Attempt

The core design is excellent — temporal gradient, three-tier marker hierarchy, semantic anchor usage, and dark-theme SVG patching are all well-executed. Focus repairs on: (1) reduce year label font size (value_label_font_size from 44 to ~36) to reduce crowding in the dense middle zone; (2) increase margin_right to 120 for the "● 2023" end-label breathing room; (3) increase margin_top to 90 for title clearance. These are minor fixes; the design and spec compliance are publication-quality.

Verdict: APPROVED