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-consistent) background. The title "Manufacturing Output by Sector · slope-basic · python · plotly · anyplot.ai" is dark ink, centered, ~70% of plot width, fully readable. The rotated "Output ($M)" y-axis title and "2023"/"2024" x-axis ticks are readable in soft/dark ink. Ten slope lines connect 2023→2024 sector output values, colored Imprint brand green (#009E73, 6 increasing sectors) or matte red (#AE3030, 4 declining sectors) — correct gain/loss semantic mapping — with line width and marker size scaling by each sector's % change magnitude. Entity value labels flank both sides of the chart. All text is readable against the light background except that the y-axis spine line visibly cuts through the "Food Processing: $275M" and "Pharmaceuticals: $190M" labels — confirmed via pixel inspection (label text starts at x=464, the spine sits at x=556-559 on the 3200px-wide render).

Dark render (plot-dark.png): Warm near-black (#1A1A17-consistent) background. Same title and chrome, now rendered in light ink (#F0EFE8/soft light tones), fully readable against the dark surface — no dark-on-dark failures. Data colors are identical to the light render (#009E73 / #AE3030), confirming only chrome flips between themes as required. The same spine-through-label defect reproduces identically at the same pixel coordinates for "Food Processing" and "Pharmaceuticals".

Both paragraphs confirmed by direct pixel-level crops of both PNGs, not just the thumbnail.

Score: 85/100

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

Visual Quality (24/30)

• VQ-01: Text Legibility (6/8)
• VQ-02: No Overlap (3/6) - spine cuts through 2 of 10 labels
• VQ-03: Element Visibility (6/6)
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (3/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (6/8) - Thoughtful semantic color, direct labeling, magnitude-driven emphasis
• DE-02: Visual Refinement (4/6) - Subtle grid, L-shaped frame; spine-overlap defect costs points
• DE-03: Data Storytelling (5/6) - Emphasis on biggest movers gives an immediate read on direction/magnitude

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6)
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) - custom declutter() helper breaks the flat script structure
• CQ-02: Reproducibility (2/2)
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2)
• CQ-05: Output & API (1/1)

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (3/5) - annotation-anchored leader lines + rich hovertemplate

Score Caps Applied

• None

Strengths

• Direct at-a-glance value labels at both endpoints for every entity, connected to their true data point via a thin leader line, decluttered vertically so labels never overlap each other
• Data-driven visual emphasis: line width and marker size scale with each sector's percentage change magnitude, drawing the eye to the biggest movers (Automotive's decline, Machinery's rise) without decorative chartjunk
• Correct semantic color mapping (brand green #009E73 for gains, matte-red Imprint anchor #AE3030 for losses) matching the style guide's finance gain/loss exception, with a code comment documenting the rationale
• Theme-adaptive chrome (background, ink, grid) correctly threaded through both renders; Imprint palette data colors identical across light and dark
• Rich hovertemplate for the interactive HTML export exposing exact sector/year values — a genuine plotly-specific interactivity win

Weaknesses

• Label/axis-spine overlap: the two longest left-side entity labels, "Food Processing: $275M" and "Pharmaceuticals: $190M", are visibly cut through by the y-axis spine line in BOTH light and dark renders. The fixed ax=-0.12 annotation anchor doesn't scale with label string length, so the two longest labels overflow past the xaxis range's left bound (-0.5) and the spine draws directly over the letters
• CQ-01 KISS structure: a custom declutter() helper function is defined mid-script; short and purposeful, but deviates from the flat imports→data→plot→save script structure the rubric expects
• No explicit key/caption stating green = increase, red = decrease; inferable from slope direction and numeric labels, but an explicit note would remove any ambiguity

Issues Found

1. VQ-02 / DE-02 MEDIUM: y-axis spine line cuts through the "Food Processing" and "Pharmaceuticals" labels in both themes
   • Fix: scale the annotation ax offset (or widen the left margin / extend the xaxis range's left bound) based on the longest label's character count, so no left-side label's rendered width ever crosses x=-0.5. The same fix should be checked symmetrically for the right side in case future data has a longer right-hand label than "Pharmaceuticals".
2. CQ-01 LOW: declutter() helper function breaks strict KISS single-script-flow expectation
   • Fix: either inline the label-spacing logic directly in the main script body (e.g., as a short loop without a def), or accept the minor deduction since the function is short, single-purpose, and directly improves label readability.

AI Feedback for Next Attempt

Fix the label/spine overlap first — it's the main blocker to a higher score. Compute the left-label leader-line anchor (ax) so it accounts for the character length of the longest left-side label (e.g. ax = -0.12 - 0.006 * max(len(s) for s in left_labels)), or simply pull the xaxis range's left bound further negative (e.g. -0.7 instead of -0.5) so even "Food Processing" and "Pharmaceuticals" clear the spine with margin. Re-verify by rendering both themes and visually confirming no label crosses the axis line. Optionally, inline the declutter() logic to fully match the KISS script-structure expectation.

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): Warm off-white (#FAF8F1-consistent) background. The title "Manufacturing Output by Sector · slope-basic · python · plotly · anyplot.ai" is dark ink, centered, ~50% of plot width, fully readable. The "Output ($M)" units annotation sits directly below the title. "2023"/"2024" x-axis tick labels are readable in soft ink; y-axis numeric ticks are intentionally hidden since every entity is directly labeled with its value. Ten slope lines connect 2023→2024 sector output values, colored Imprint brand green (#009E73, 6 increasing sectors) or Imprint matte red (#AE3030, 4 declining sectors) — correct gain/loss semantic mapping — with line width and marker size scaling by each sector's % change magnitude. Bilateral value+entity labels flank both sides, each linked to its true data point via a thin leader line. The attempt-1 defect (label text colliding with the y-axis spine on "Food Processing" and "Pharmaceuticals") is fixed — verified via pixel-level crop that no label touches the spine in either theme. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black (#1A1A17-consistent) background. Title and units annotation now render in light ink, x-axis ticks in soft light tone — all fully readable, no dark-on-dark failures on primary chrome. Data colors are identical to the light render (#009E73 / #AE3030), confirming only chrome flips between themes. Same fixed leader-line/label layout, no spine collisions reproduced. One soft spot: the matte-red (#AE3030) label text has a low luminance-contrast ratio (~2.7:1 by WCAG relative-luminance calc) against the near-black background — it remains legible (confirmed via direct crop) but noticeably dimmer than the green counterpart.

Both paragraphs confirmed by direct pixel-level crops of both PNGs.

Score: 91/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (6/6)
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (3/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (16/20)

• DE-01: Aesthetic Sophistication (6/8) - Thoughtful semantic color, direct labeling, magnitude-driven emphasis
• DE-02: Visual Refinement (5/6) - Spine-overlap defect resolved; subtle grid, L-shaped frame; minor title/subtitle crowding remains
• DE-03: Data Storytelling (5/6) - Emphasis on biggest movers gives an immediate read on direction/magnitude

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6)
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Helper function removed; anti-overlap logic now fully inlined
• CQ-02: Reproducibility (2/2)
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2)
• CQ-05: Output & API (1/1)

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (3/5) - annotation-anchored leader lines + rich hovertemplate

Score Caps Applied

• None

Strengths

• Fixed both blockers from the attempt-1 review: the left-side leader labels ("Food Processing", "Pharmaceuticals") no longer collide with the y-axis spine in either theme, and the anti-overlap declutter logic is now fully inlined with no helper function, satisfying strict KISS single-script-flow
• Direct bilateral value labels ("Entity: $XM" / "$XM: Entity") at both endpoints for all 10 sectors, each connected to its true data point via a thin leader line, decluttered vertically without ever disconnecting from its entity
• Data-driven visual emphasis: line width and marker size scale with each sector's percentage-change magnitude, drawing the eye to the biggest movers (Automotive's decline, Machinery's rise) without decorative chartjunk
• Correct semantic finance color mapping (brand green #009E73 for gains, Imprint matte-red anchor #AE3030 for losses), identical across both themes
• Theme-adaptive chrome correctly threaded through both renders; rich hovertemplate for the interactive HTML export

Weaknesses

• Matte-red (#AE3030) label text has a low luminance-contrast ratio (~2.7:1) against the dark-theme background (#1A1A17) — still legible thanks to hue separation and generous size, but below the general 4.5:1 text-contrast guideline. A thin ink-colored micro-stroke on the red text/leader-lines in dark theme (text only, keeping the canonical hex on lines/markers) would tighten this
• The "Output ($M)" units annotation sits immediately beneath the title with very little vertical gap, reading almost like an unlabeled second title line rather than a clearly separated axis-unit caption
• No explicit caption states "green = increase, red = decrease" — inferable from slope direction and endpoint values, but an explicit note would remove residual ambiguity (minor, optional)

Issues Found

1. VQ-01 LOW: Matte-red dark-theme label contrast is below the general text-contrast guideline
   • Fix: add a subtle ink-colored micro-stroke to red text/leader-lines in dark theme only, or accept as a minor known trade-off of the finance semantic-anchor color per the style guide's documented light/dark tension
2. VQ-05/DE-02 LOW: Title and "Output ($M)" units annotation are visually cramped together at the top
   • Fix: add a touch more vertical gap (e.g. increase margin.t slightly or nudge the annotation's y) so the units caption doesn't read as a second title line

AI Feedback for Next Attempt

No blocking issues remain. If revisited, consider a dark-theme-only micro-stroke on red label text for contrast polish, a touch more spacing between the title and the "Output ($M)" units caption, and an optional explicit "green = increase / red = decrease" note for full self-explanatory clarity.

Verdict: APPROVED