feat(altair): implement slope-basic

[github-actions]

Implementation: slope-basic - python/altair

Implements the python/altair version of slope-basic.

File: plots/slope-basic/implementations/python/altair.py

Parent Issue: #981

---

🤖 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 "slope-basic · altair · anyplot.ai" appears in dark text at the top center, clearly readable. The Y-axis is labeled "Sales (units)" in dark text. The X-axis shows "Q1 Sales" and "Q4 Sales" as period labels (no axis title, but the labels themselves are descriptive). Tick labels along the Y-axis (100–1200) are clearly visible in a slightly softer dark color. Ten product lines are drawn — 6 in green (#009E73, Increase) and 4 in orange/vermillion (#D55E00, Decrease). Product name labels appear at both endpoints, each colored to match their line. A legend in the top-right corner shows "Direction" with green (Increase) and orange (Decrease) entries. Dashed grid lines are subtle (10% opacity). A thin box border is visible around the plot area on all four sides (from configure_view stroke). Some crowding occurs in the middle ranges on the left (Charger/Tablet/Headphones near 390–440) and right (Monitor/Charger/Webcam near 350–410). All text is readable against the light background — no legibility failures.

Dark render (plot-dark.png): The chart renders on a warm near-black (#1A1A17) background. The same layout is preserved. The title, axis labels, and tick labels all flip to light text and are clearly readable against the dark surface. The data colors are identical to the light render — green lines for Increase, orange for Decrease — confirming only chrome flips. The legend appears in the top-right with a slightly elevated dark box (ELEVATED_BG). No dark-on-dark failures detected: all text is light-colored and clearly legible against the near-black background. Grid lines appear as subtle light dashes. The box border is now a light-toned stroke against the dark background, visible but not distracting.

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

Score: 87/100

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

Visual Quality (26/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set and readable in both themes; product labels at 16px are slightly below the 18px minimum for pixel-based libraries
• VQ-02: No Overlap (4/6) — Charger/Tablet/Headphones cluster on the left (390–440 range) and Monitor/Charger/Webcam on the right (350–410 range) are noticeably crowded, though still distinguishable
• VQ-03: Element Visibility (6/6) — Lines at strokeWidth=3 and circles at size=200 are well-sized and clearly visible against both backgrounds
• VQ-04: Color Accessibility (2/2) — #009E73 and #D55E00 are both Okabe-Ito and CVD-safe; distinguishable by hue and luminance
• VQ-05: Layout & Canvas (3/4) — Canvas is 4200×2550 (width=1400, height=850, scale=3), slightly below the 4800×2700 target; product labels on the right are slightly tight near the edge
• VQ-06: Axis Labels & Title (2/2) — Y-axis labeled "Sales (units)" with units; X-axis uses descriptive period names; title format correct
• VQ-07: Palette Compliance (2/2) — First series (Increase) correctly uses #009E73; second (Decrease) uses #D55E00; backgrounds are #FAF8F1 (light) and #1A1A17 (dark); both renders theme-correct

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Semantically meaningful color mapping (green=increase, orange=decrease) is a strong design choice; colored endpoint labels reinforcing the line color are a nice touch; dashed grid adds polish; however, the full box border around the plot area (configure_view stroke on all four sides) detracts from professional refinement
• DE-02: Visual Refinement (3/6) — Dashed grid (gridDash=[4,4]) and low opacity (0.10) are well-configured; but a visible box border on all four sides instead of an L-shaped or minimal frame misses the style guide recommendation to remove top/right spines
• DE-03: Data Storytelling (4/6) — Color immediately communicates direction of change; the combination of slope angle + color creates strong visual hierarchy; Phone dominates as the largest decrease, clearly visible; a focal point is established through visual means rather than annotations

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct slopegraph connecting values across two time points; slope direction and magnitude clearly communicable at a glance
• SC-02: Required Features (4/4) — Labels at both endpoints ✓; color coding by direction ✓; time point axis labels ✓; 10 entities (within 5–15 spec guidance) ✓
• SC-03: Data Mapping (3/3) — X = time period, Y = sales values, color = direction; detail='Product:N' draws correct per-entity lines
• SC-04: Title & Legend (3/3) — Title "slope-basic · altair · anyplot.ai" matches format; legend shows "Direction" with "Increase" / "Decrease" labels

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows both increases and decreases; includes both steep and gradual slopes; crossing lines demonstrate rank changes between periods
• DQ-02: Realistic Context (5/5) — Tech product quarterly sales (Q1 vs Q4) is a clear, neutral, recognizable business scenario
• DQ-03: Appropriate Scale (4/4) — Values 180–1200 units are plausible for tech product sales; Y-axis with zero=False is appropriate for a slope chart

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat script, no functions/classes; clear linear flow: imports → data → reshape → plot → save
• CQ-02: Reproducibility (2/2) — Hardcoded deterministic data; no randomness present
• CQ-03: Clean Imports (2/2) — os, sys, pandas, altair all used; no unused imports
• CQ-04: Code Elegance (2/2) — Clean, Pythonic Altair code; the sys.path manipulation is a project-level convention
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png (scale_factor=3.0) and plot-{THEME}.html; correct API usage

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Expertly uses Altair's layered mark composition; proper encoding types (N, Q); all configure_* methods used correctly; alt.Scale domain/range for categorical color mapping
• LM-02: Distinctive Features (4/5) — The detail='Product:N' encoding draws separate lines per entity without conflating it with the color channel — this is a distinctly Altair grammar-of-graphics idiom; layer composition of 4 separate mark types is Altair-native; HTML export included

Score Caps Applied

• None — no score caps triggered (VQ-02=4>0, SC-01=5>0, DE-01=5>2, DE-02=3>2)

Strengths

• Semantically meaningful color mapping (green=increase, orange=decrease) using Okabe-Ito positions 1–2 immediately communicates direction at a glance
• Idiomatic use of detail='Product:N' to draw per-entity lines while keeping color as a separate direction channel — a distinctly Altair idiom
• Complete theme adaptation: all chrome elements (background, text, grid, legend) flip correctly in both light and dark renders with no legibility failures
• Strong spec compliance: all required features (endpoint labels, direction color coding, time-point axis labels) present and correct

Weaknesses

• Full box border visible around plot area (configure_view stroke=INK_SOFT creates border on all 4 sides); style guide requires removing top and right spines — use configure_view(stroke=None) and configure_axis domain settings to achieve L-frame or frameless style
• Label crowding in the 350–440 value range: Charger/Tablet/Headphones on the left and Monitor/Charger/Webcam on the right are too closely stacked; add dy offset alternation or increase canvas size (1600×900 per library guide) to reduce crowding
• Product labels at fontSize=16 are below the 18px minimum for pixel-based libraries at this canvas size; increase to 18px

Issues Found

1. DE-02 MEDIUM: Full box border (all 4 spines visible) — configure_view stroke creates a visible rectangular frame; style guide calls for L-shaped or minimal frame
   • Fix: Set configure_view(stroke=None) or stroke='transparent'; optionally set domainColor to only render on bottom/left axes
2. VQ-02 MEDIUM: Label crowding at mid-range values where 3 products cluster within 50 units of each other
   • Fix: Use dy offsets that alternate slightly (e.g., odd/even index offset) or increase height from 850 to 900 to spread labels
3. VQ-01 MINOR: Product labels at 16px — increase to 18px for pixel-based library spec compliance

AI Feedback for Next Attempt

Remove the box border (configure_view stroke=None) to achieve a cleaner L-frame or frameless style per the style guide. Increase canvas to width=1600, height=900 to give labels more vertical breathing room and reduce crowding in the 350–440 unit cluster. Increase product label fontSize from 16 to 18. These three fixes target DE-02 and VQ-01/VQ-02 and should bring the score above 90.

Verdict: REJECTED

[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 plot renders on a warm off-white (#FAF8F1) background. The title "slope-basic · altair · anyplot.ai" appears at the top in dark ink, clearly readable. Two X-axis ticks label the columns "Q1 Sales" and "Q4 Sales". The Y-axis is labeled "Sales (units)" with tick marks ranging from ~100 to 1,200. Ten slope lines connect Q1 to Q4 values — green (#009E73) for products that increased, orange (#D55E00) for those that decreased. Circle markers appear at each endpoint. Entity labels appear on the left and right sides in matching colors. A legend in the top-right corner shows "Direction" with Increase/Decrease entries. All text is readable against the light background. There is noticeable label crowding on the left side around the 390–440 range (Charger 440, Tablet 420, Headphones 390) and a similar cluster on the right side (Tablet 650, Headphones 620). Legibility verdict: PASS with minor overlap concerns.

Dark render (plot-dark.png): The same plot on a near-black (#1A1A17) background. The data colors are identical to the light render — green lines for increasing products, orange for decreasing. The title, axis labels, tick labels, and legend text are all rendered in light cream/grey text, clearly readable against the dark background. No dark-on-dark failures detected. Grid lines are subtle dashed lines at low opacity. The legend box uses the elevated dark background (#242420) with a soft border. Legibility verdict: PASS.

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

Score: 86/100

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

Visual Quality (25/30)

• VQ-01: Text Legibility (7/8) — Font sizes explicitly set throughout: title 28px, y-axis title 22px, tick labels 18px, legend 20/18px. Data labels at fontSize=16 are slightly on the small end at full resolution.
• VQ-02: No Overlap (3/6) — Label crowding on the left side: Charger (440), Tablet (420), Headphones (390) are packed tightly and likely overlapping. Similar cluster on the right (Tablet 650, Headphones 620).
• VQ-03: Element Visibility (6/6) — Lines at strokeWidth=3 and markers at size=200 are well-sized and clearly visible.
• VQ-04: Color Accessibility (2/2) — Green vs. orange (Okabe-Ito positions 1 and 2) provides good CVD-safe contrast without relying on red-green opposition.
• VQ-05: Layout & Canvas (3/4) — Canvas is 1400×850 (4200×2550 at scale_factor=3) rather than the recommended 1600×900 (4800×2700). Plot fills the canvas well otherwise.
• VQ-06: Axis Labels & Title (2/2) — Y-axis labeled "Sales (units)" with units; X-axis period names serve as descriptive column headers.
• VQ-07: Palette Compliance (2/2) — First series (Increase) correctly uses #009E73; second (Decrease) uses #D55E00. Light background #FAF8F1 and dark background #1A1A17 are correct. All chrome is theme-adaptive.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Semantic directional color encoding (green=increase, orange=decrease) is intentional and meaningful, placing this above a plain configured default. Labels on both endpoints with matching colors add polish. Not publication-ready level, but clearly thoughtful.
• DE-02: Visual Refinement (4/6) — Subtle dashed grid at 10% opacity is well-refined. However, configure_view uses a full rectangular border (stroke on all sides) rather than the recommended L-shaped frame (no top/right spines).
• DE-03: Data Storytelling (4/6) — The directional color encoding immediately communicates which products grew vs. declined — a clear visual hierarchy. The viewer instantly sees Phone's sharp decline and Webcam/Headphones' strong growth without needing to read labels first.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct slopegraph connecting two time points with labeled slope lines.
• SC-02: Required Features (4/4) — Labels at both endpoints ✓, direction color-coding ✓, vertical axes labeled with period names ✓, endpoint markers ✓.
• SC-03: Data Mapping (3/3) — X=period, Y=sales, color=direction, detail=product all correctly mapped.
• SC-04: Title & Legend (3/3) — Title format "slope-basic · altair · anyplot.ai" is correct. Legend shows "Direction" with "Increase"/"Decrease" labels.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Both increases and decreases are represented; crossings and rank changes are visible (e.g., Phone drops while Tablet rises past it).
• DQ-02: Realistic Context (5/5) — Tech product sales (Laptop, Phone, Tablet, etc.) comparing Q1 vs. Q4 is a plausible, neutral business scenario.
• DQ-03: Appropriate Scale (4/4) — Values 180–1200 units with realistic variation (Phone declining from market saturation, Webcam growing) are factually plausible.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Clean Imports → Data → Plot → Save structure, no functions or classes.
• CQ-02: Reproducibility (2/2) — Hardcoded deterministic data, no random elements.
• CQ-03: Clean Imports (2/2) — Only os, sys, pandas, altair imported; all are used.
• CQ-04: Code Elegance (2/2) — Clean Altair layer composition; pd.melt() for data reshaping; appropriate complexity for the chart type.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html using current Altair 6.1.0 API.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — Expertly uses Altair's layer composition (+), detail encoding for per-product lines, alt.Scale with domain/range, and the configure_* system.
• LM-02: Distinctive Features (3/5) — The detail="Product:N" encoding to draw individual slope lines grouped by direction color is distinctly Altair/Vega-Lite — in other libraries this would require explicit groupby loops. Layer composition is also a distinctive Altair strength.

Score Caps Applied

• None applied — no cap conditions triggered.

Strengths

• Semantic directional color encoding (green=increase, orange=decrease) creates immediate visual clarity and meaningful hierarchy
• Full spec compliance — all required features present and correctly implemented
• Excellent data quality with realistic business context and visible rank changes
• Clean, idiomatic Altair code using layer composition and detail encoding correctly
• Correct Okabe-Ito palette with proper theme adaptation in both light and dark renders

Weaknesses

• Label crowding on left side around the 390–440 sales range (Charger/Tablet/Headphones too close together); consider adjusting dx offsets or filtering to reduce cluster density
• Canvas dimensions 1400×850 are below the recommended 1600×900 target
• Full rectangular view border instead of recommended L-shaped frame (remove top/right spines via configure_view stroke removal or configure_axis settings)

Issues Found

1. VQ-02 MODERATE: Left-side label cluster — Charger (440), Tablet (420), Headphones (390) overlap. Consider increasing dy offsets for clustered labels or using a slightly larger canvas to spread them.
2. VQ-05 MINOR: Canvas 1400×850 → 4200×2550px at scale_factor=3 (should target 1600×900 → 4800×2700px).
3. DE-02 MINOR: configure_view(stroke=INK_SOFT) creates a full box border. Remove top/right by either setting stroke=None and using axis domain lines, or keep only bottom/left borders.

AI Feedback for Next Attempt

The implementation is well-executed with strong spec compliance and good semantic design. To push higher: (1) increase canvas to width=1600, height=900; (2) address left-side label crowding by nudging overlapping labels with dy offsets proportional to value proximity; (3) remove the full view box border — use configure_view(stroke=None) and rely on axis domain lines for framing.

Verdict: APPROVED