feat(plotly): implement slope-basic

[github-actions]

Implementation: slope-basic - python/plotly

Implements the python/plotly version of slope-basic.

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

Parent Issue: #981

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white (#FAF8F1) background. Title "Product Sales Q1 vs Q4 · slope-basic · plotly · anyplot.ai" appears in dark ink at the top center. Ten slope lines connect Q1 2024 to Q4 2024 time points on the x-axis; lines going up are #009E73 (brand green) and lines going down are #D55E00 (vermillion). Labels appear on both sides with the product name and value, colored to match the line. Y-axis is titled "Sales ($K)" with tick labels, and subtle horizontal grid lines are visible. All text is clearly readable against the light background. Some label clustering occurs in the low-value region on the left (30–85K range) and on the right (85–95K range), producing minor label overlap.

Dark render (plot-dark.png): Near-black (#1A1A17) background. Title text is rendered in light (#F0EFE8) ink and is clearly readable against the dark surface. Data colors are identical to the light render — green lines for increases, orange for decreases — confirming the Okabe-Ito data colors are theme-independent. Annotation labels use the line colors (green/orange) which are highly visible on dark. Tick labels and axis text render in #B8B7B0 (INK_SOFT for dark), clearly legible. Grid lines appear as faint light traces. No dark-on-dark failures observed.

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

Score: 87/100

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

Visual Quality (27/30)

• VQ-01: Text Legibility (8/8) — Title 28px, axis labels 22px, tick labels 18px, annotations 16px — all explicitly set and readable in both themes
• VQ-02: No Overlap (3/6) — Left-side bottom cluster (Monitor Stand $55K / Webcam HD $45K / USB Hub $30K separated by only 10-15K each) and right-side pair (Webcam HD $95K / USB Hub $85K at 10K gap) produce visible label collisions at 4800×2700 resolution
• VQ-03: Element Visibility (6/6) — Lines at width=3, markers at size=14, perfectly adapted for 10-entity slope chart
• VQ-04: Color Accessibility (2/2) — Green (#009E73) vs. vermillion (#D55E00) are CVD-safe and distinguish well by luminance
• VQ-05: Layout & Canvas (4/4) — 220px side margins accommodate labels; chart occupies ~72% of canvas width, appropriate for slopegraph format
• VQ-06: Axis Labels & Title (2/2) — Y-axis labeled "Sales ($K)" with units; x-axis uses descriptive tick labels Q1 2024 / Q4 2024
• VQ-07: Palette Compliance (2/2) — Increases use #009E73 (brand green, Okabe-Ito Add workflow diagram for new prototype discovery #1), decreases use #D55E00 (Okabe-Ito Add Claude Code GitHub Workflow #2); backgrounds correctly #FAF8F1 (light) / #1A1A17 (dark); all chrome theme-adaptive

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Semantic color coding (green=up, orange=down) is a deliberate design choice; warm background and clean axes are above default, but lacks publication-level polish (no emphasis on standouts, no subtitle/insight line)
• DE-02: Visual Refinement (4/6) — Subtle y-axis grid at 10% opacity, no x-axis grid, generous side margins, clean Plotly axes (no top/right spines); axis lines retained which adds slight visual noise
• DE-03: Data Storytelling (4/6) — Green/orange color coding immediately communicates which products grew vs. declined; crossed lines reveal rank changes; majority of green lines tells an overall positive story — viewer gets the key insight without annotations

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct slopegraph with lines connecting two time points
• SC-02: Required Features (4/4) — Labels at both endpoints ✓, color coding by direction ✓, vertical axes labeled with time point names ✓, 10 entities within 5-15 range ✓
• SC-03: Data Mapping (3/3) — X maps to Q1/Q4 time points, Y maps to sales values, all 10 products visible
• SC-04: Title & Legend (3/3) — Title contains slope-basic · plotly · anyplot.ai in correct format; no legend needed as direction is encoded in color with labeled endpoints

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — 7 increasing products + 3 decreasing products (Tablet Ultra, Portable SSD, Monitor Stand); shows rank changes, crossing lines, and varied magnitudes of change
• DQ-02: Realistic Context (5/5) — Product sales Q1 vs Q4 comparison — real-world business scenario, neutral tech products, no controversial content
• DQ-03: Appropriate Scale (4/4) — Sales ranging $30K–$310K per quarter for individual tech products is realistic; proportions and relative values are plausible

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Imports → Tokens → Data → Plot → Style → Save; no functions or classes
• CQ-02: Reproducibility (2/2) — All data is hardcoded and deterministic; no random seed needed
• CQ-03: Clean Imports (2/2) — Only os and plotly.graph_objects imported, both used
• CQ-04: Code Elegance (2/2) — Clean and Pythonic; two annotation loops are slightly repetitive but acceptable for clarity
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html correctly

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Uses go.Scatter with mode="lines+markers", add_annotation, proper update_layout patterns; hovertemplate with <extra></extra> suppression shows Plotly expertise
• LM-02: Distinctive Features (3/5) — Interactive hovertemplate with product-specific dollar-formatted info leverages Plotly's web-native interactivity; HTML export via write_html with CDN is distinctively Plotly; could go further with interactive features like click-to-highlight

Score Caps Applied

• None

Strengths

• Perfect spec compliance: all required slopegraph features present (bidirectional labels, directional color coding, time-point axis labels, appropriate entity count)
• Perfect data and code quality: realistic business scenario, fully deterministic, clean KISS code structure
• Solid semantic color encoding: #009E73 for increases and #D55E00 for decreases uses Okabe-Ito positions 1 and 2 with meaningful assignment
• Both theme renders pass readability check; INK tokens correctly thread through title, ticks, and axis labels

Weaknesses

• Label overlap in dense value regions: bottom-left cluster (Monitor Stand $55K / Webcam HD $45K / USB Hub $30K) and right-side pair (Webcam HD $95K / USB Hub $85K) overlap at 4800×2700 resolution
• No visual emphasis on standout data points (strongest gainer: Laptop Pro +$65K; biggest loser: Monitor Stand −$15K) — could add bold line or slight weight increase to top/bottom performers
• Axis lines (linecolor=INK_SOFT) add slight clutter; removing them would achieve a cleaner slopegraph aesthetic

Issues Found

1. VQ-02 OVERLAP: Left-side bottom cluster has 3 labels within 25K range; right-side Webcam HD / USB Hub pair 10K apart — labels collide at actual render resolution
   • Fix: Apply vertical offsets to overlapping annotations (detect pairs with |y_i − y_j| < threshold, nudge alternating labels ±offset); or use a slightly expanded y-axis range
2. DE-01 MID: Good design but not publication-ready — no visual emphasis distinguishes the top and bottom performers from the pack
   • Fix: Increase line width (e.g., 4–5) and marker size for the top gainer (Laptop Pro) and worst decliner (Monitor Stand); or add a brief callout annotation for the standout story
3. DE-02 MINOR: Axis lines retained (linecolor=INK_SOFT) add unnecessary borders; slopegraphs typically use a minimal, line-free grid
   • Fix: Remove axis lines (showline=False on both axes) and rely only on the subtle grid for orientation

AI Feedback for Next Attempt

Priority fix: resolve label collision in dense regions — implement simple collision detection and apply vertical offsets for annotation pairs within 15K of each other on the same side. For design uplift to 90+: (1) remove axis lines for a cleaner slopegraph aesthetic, (2) visually emphasize the top and bottom performers with thicker lines/larger markers or a brief annotation callout. These two changes should push the score above the 90 threshold.

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 slope chart renders on a warm off-white (#FAF8F1) background. Two vertical axis positions (Q1 2024 and Q4 2024) connect 10 product lines. Lines are colored semantically: green (#009E73) for products that increased, orange (#D55E00) for those that declined. Laptop Pro shows the steepest rise (top of chart, clearly dominant); Tablet Ultra shows the most notable drop (orange crossing line). Annotations appear on both left and right endpoints with matching colors. The y-axis is labeled "Sales ($K)". Title format is correct. All text is readable against the light background. Some crowding exists in the lower label region ($30K–$110K range on Q1 side).

Dark render (plot-dark.png): Same structure on a warm near-black (#1A1A17) background. Title, axis labels, and tick labels render in light (#F0EFE8 / #B8B7B0) text — clearly readable against the dark surface. Data colors are identical to the light render: green lines for increases, orange for decreases, proving only chrome flips. Grid lines are subtle and visible. No dark-on-dark failures detected. Brand green #009E73 remains highly visible on the dark surface.

Both paragraphs confirm valid renders. Both themes pass legibility check.

Score: 88/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title 28px, x-ticks 22px, y-title 22px, y-ticks 18px, annotations 16px. Readable at full resolution in both themes.
• VQ-02: No Overlap (4/6) — Lower label cluster ($30–$110K band on Q1 side) shows moderate crowding. Labels at $45K/$55K and similar tight spacings are close but readable; no catastrophic overlap.
• VQ-03: Element Visibility (6/6) — Lines at width=3 and markers at size=14 are well-sized for the canvas. Both data series clearly distinguishable from backgrounds in both themes.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito positions 1 (#009E73) and 2 (#D55E00) are CVD-safe and provide strong luminance contrast. No red-green-only encoding.
• VQ-05: Layout & Canvas (4/4) — Generous l/r margins (220px) are appropriate for a slope chart's bilateral annotations. Plot fills canvas proportionally without wasted space.
• VQ-06: Axis Labels & Title (2/2) — Y-axis "Sales ($K)" includes units. X-axis tick labels "Q1 2024" / "Q4 2024" provide time-point context.
• VQ-07: Palette Compliance (2/2) — Background #FAF8F1 (light) / #1A1A17 (dark) confirmed. First series green #009E73, second series #D55E00 — Okabe-Ito positions 1 and 2. Data colors identical across themes. Chrome tokens all theme-adaptive.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — The semantic color encoding (green=increase, orange=decrease) is a thoughtful intentional design choice that elevates this above generic defaults. Inline labels replace the legend cleanly. Doesn't yet reach "strong design" with refined typography or additional hierarchy signals.
• DE-02: Visual Refinement (4/6) — X-axis grid hidden, y-axis grid uses rgba token for subtlety, zeroline off. Generous margins. Not at the polish of fully removing spines or applying whitespace refinements beyond margins.
• DE-03: Data Storytelling (4/6) — Semantic color encoding immediately communicates which products grew vs. declined. The crossing lines of Tablet Ultra (orange, falling) vs. Smart Watch (green, rising) tell a compelling before/after story. Visual hierarchy is established through color semantics though no additional size or emphasis variation is used.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct slope chart / slopegraph: two vertical axis positions, entities connected by lines encoding direction and magnitude.
• SC-02: Required Features (4/4) — Labels at both endpoints ✓, color coding by direction ✓, vertical axes labeled with time point names (Q1 2024/Q4 2024) ✓, 10 entities within 5-15 range ✓.
• SC-03: Data Mapping (3/3) — X maps time points, Y maps sales values. All 10 entities visible with complete trajectories.
• SC-04: Title & Legend (3/3) — Title "Product Sales Q1 vs Q4 · slope-basic · plotly · anyplot.ai" is correctly formatted. Inline labels render appropriately in place of a legend.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Dataset shows increases (most products), decreases (Tablet Ultra, Monitor Stand, Portable SSD), steep vs. gradual changes, and rank inversions (Tablet Ultra falls past Smart Watch) — all key features of a slope chart.
• DQ-02: Realistic Context (5/5) — Tech product Q1-to-Q4 sales comparison is a recognizable, neutral business scenario with no controversial content.
• DQ-03: Appropriate Scale (4/4) — Sales values $30K–$310K are plausible for product category quarterly sales. Percentage changes are realistic (Laptop Pro +27%, Tablet Ultra -18%, etc.).

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat: imports → theme tokens → data → color logic → plot → annotations → layout → save. No functions or classes.
• CQ-02: Reproducibility (2/2) — All data is hardcoded and deterministic. No random seed required.
• CQ-03: Clean Imports (2/2) — Only os and plotly.graph_objects. Both used.
• CQ-04: Code Elegance (2/2) — Clean iteration patterns for colors, traces, and annotations. No over-engineering.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png (4800×2700 via scale=3) and plot-{THEME}.html. Correct for interactive library.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Proper go.Figure/add_trace pattern, hovertemplate for interactive tooltips, update_layout with full theme token application. Good idiomatic plotly usage. Could have used go.layout.Annotation for slightly cleaner annotation management.
• LM-02: Distinctive Features (3/5) — Uses plotly's interactive hover with custom hovertemplate and exports HTML for interactivity — genuinely distinctive capabilities that differentiate this from static libraries.

Score Caps Applied

• None — no caps triggered.

Strengths

• Semantic color encoding (green=increase, orange=decrease) creates immediate visual communication of direction
• All theme tokens correctly applied — both renders pass legibility in both light and dark
• Perfect spec compliance: labels at both endpoints, direction color coding, correct time-point axis labels
• Realistic, neutral, well-proportioned business data that exercises all slope chart features (rank inversions, varied magnitudes)
• Clean code with proper plotly idioms and full HTML+PNG output

Weaknesses

• Lower label density causes some crowding in the $30–$110K band on both sides (10 products with similar lower values compete for vertical space)
• Design Excellence could be elevated: adding size or weight variation for the biggest movers (Laptop Pro, Tablet Ultra) would strengthen storytelling
• Spines not removed — removing top/right spines would add visual refinement

Issues Found

1. VQ-02 MODERATE: Label crowding in lower y-range ($30–$110K). With 7 products in this band the annotations are tightly packed.
   • Fix: Stagger label positions or reduce font size slightly for lower-value items to avoid cramping
2. DE-02 PARTIAL: Spines still visible (top and right). Default spine visibility reduces refinement.
   • Fix: Add showline=False for top/right effectively, or set axis line visibility selectively

AI Feedback for Next Attempt

To improve: (1) address label crowding in the lower value band — consider staggered annotation x-offsets or slightly smaller font for the clustered lower labels; (2) remove top/right axis lines for cleaner framing; (3) optionally vary line width or add a subtle bold annotation for the biggest movers (Laptop Pro, Tablet Ultra) to amplify data storytelling.

Verdict: APPROVED