feat(plotly): implement dumbbell-basic

[github-actions]

Implementation: dumbbell-basic - python/plotly

Implements the python/plotly version of dumbbell-basic.

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

Parent Issue: #945

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white (#FAF8F1) background — correct. Title "Employee Satisfaction · dumbbell-basic · plotly · pyplots.ai" is dark (#1A1A17), 28px, centered and clearly readable. X-axis label "Satisfaction Score (out of 100)" and Y-axis label "Department" in dark text at 22px. Tick labels in secondary ink (#4A4A44) at 18px — all readable. Horizontal legend above the plot in an elevated (#FFFDF6) box shows green (#009E73) "Before" and vermillion (#D55E00) "After" entries. Data shows 9 horizontal dumbbell entries sorted by improvement magnitude: Customer Support at top (largest gap: 45→69), Legal at bottom (only regression: 70→67). All Before dots are Okabe-Ito green with PAGE_BG-colored borders; After dots are Okabe-Ito vermillion with the same borders. Connecting lines are thin and use INK_SOFT. All text is clearly readable against the light background — no light-on-light failures.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background — correct. Title in light #F0EFE8, axis labels in #F0EFE8, tick labels in #B8B7B0. Legend box uses elevated dark (#242420) with light text. No dark-on-dark text failures anywhere — all text is clearly readable against the dark background. Data colors are IDENTICAL to the light render: green (#009E73) Before dots and vermillion (#D55E00) After dots unchanged. Connecting lines flip to light gray (#B8B7B0) as expected from INK_SOFT in dark mode. Brand green #009E73 remains clearly visible on the dark surface.

Both paragraphs confirm: theme adaptation is correct, legibility passes in both renders.

Score: 87/100

Category	Score	Max
Visual Quality	30	30
Design Excellence	11	20
Spec Compliance	14	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=28, axis=22, tick=18, legend=16px. Readable in both themes.
• VQ-02: No Overlap (6/6) — 9 categories well-spaced, no label or element overlap.
• VQ-03: Element Visibility (6/6) — Markers size=18 clearly visible; connecting lines at width=2 subtle but visible.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito green and vermillion are CVD-safe and distinguishable without hue alone.
• VQ-05: Layout & Canvas (4/4) — 4800×2700px, generous margins (l=170, r=60, t=110, b=90), nothing cut off.
• VQ-06: Axis Labels & Title (2/2) — "Satisfaction Score (out of 100)" with units; "Department" on y-axis.
• VQ-07: Palette Compliance (2/2) — First series #009E73, second #D55E00. Backgrounds #FAF8F1 / #1A1A17. Both renders theme-correct.

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) — Above defaults: Okabe-Ito applied correctly, marker edge borders adapt to PAGE_BG for clean definition, clean legend placement. Professional but not publication-extraordinary — no delta annotations, no conditional coloring for regression vs. improvement.
• DE-02: Visual Refinement (3/6) — Custom margins, subtle 10% opacity grid, theme-adaptive connecting lines. Y-axis horizontal gridlines shown unnecessarily (add noise for this chart type). No explicit spine removal.
• DE-03: Data Storytelling (3/6) — Sorted by improvement magnitude reveals the pattern well. Deliberate regression case (Legal: -3 pts) adds narrative interest. No visual emphasis distinguishing the extreme outlier (Customer Support: +24 pts) or the regression row from mid-range entries.

Spec Compliance (14/15)

• SC-01: Plot Type (5/5) — Correct horizontal dumbbell chart with two dots per category connected by a thin line.
• SC-02: Required Features (4/4) — Distinct colors for start/end, horizontal orientation, sorted by difference, connecting lines.
• SC-03: Data Mapping (3/3) — Categories on y-axis, values on x-axis. All 9 departments visible.
• SC-04: Title & Legend (2/3) — Title uses "pyplots.ai" instead of "anyplot.ai". Legend "Before"/"After" labels are correct.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows all aspects: multiple categories, before/after values, sorted order, includes a negative change case for full range.
• DQ-02: Realistic Context (5/5) — Employee satisfaction scores before/after policy changes — realistic, neutral, comprehensible.
• DQ-03: Appropriate Scale (4/4) — Scores 45–85 on a 100-point scale; realistic range for employee surveys.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat structure: tokens → data → sort → figure → traces → layout → save.
• CQ-02: Reproducibility (2/2) — Fully deterministic hand-picked data, no RNG.
• CQ-03: Clean Imports (2/2) — Only os and plotly.graph_objects imported; both used.
• CQ-04: Code Elegance (2/2) — Clean iteration over categories for connecting lines. Pythonic sorted() with lambda. Appropriate complexity.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html. No bare plot.png. Current API.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — go.Figure() with explicit trace management per Plotly idiom. Proper update_layout. showlegend=False on connecting-line traces. Good but could use Plotly shapes for the connecting lines instead of Scatter for a cleaner approach.
• LM-02: Distinctive Features (3/5) — hovertemplate with formatted tooltips showing department and score; hoverinfo="skip" on connecting lines prevents hover clutter; HTML export alongside PNG leverages Plotly's interactive nature.

Score Caps Applied

• None applied.

Strengths

• Full theme adaptation: #FAF8F1 / #1A1A17 backgrounds with all chrome tokens (INK, INK_SOFT, GRID, ELEVATED_BG) correctly propagated through title, axes, ticks, grid, and legend
• Correct Okabe-Ito palette with #009E73 (Before) and #D55E00 (After) in canonical order
• All font sizes explicitly set and scaled for 4800×2700px canvas
• Data sorted by improvement magnitude with a deliberate regression case (Legal) for narrative interest
• Clean KISS code structure with deterministic data and no RNG
• Marker edge borders use PAGE_BG to adapt to both themes for clean dot definition

Weaknesses

• Title domain is "pyplots.ai" instead of "anyplot.ai" — fix: change to anyplot.ai in the title string
• Y-axis horizontal gridlines shown unnecessarily (showgrid=True on yaxis) — remove them; only x-axis vertical gridlines are needed to trace values on a dumbbell chart
• No visual emphasis for extreme cases — the regression row (Legal) and the largest-gap row (Customer Support) are visually indistinguishable from mid-range entries; add conditional coloring for negative vs. positive changes, or vary connecting-line width/color by magnitude
• DE-01 not exceptional: consider adding delta value annotations (e.g., "+24" next to the largest gap) or highlighting the regression row with a different connecting-line color

Issues Found

1. SC-04 FAIL: Title says "pyplots.ai" — should be "anyplot.ai"
   • Fix: Change title text to "Employee Satisfaction · dumbbell-basic · plotly · anyplot.ai"
2. DE-02 LOW: Y-axis gridlines add visual noise to this chart type
   • Fix: Set yaxis={"showgrid": False} — horizontal gridlines are not needed for a dumbbell chart where the rows already encode the categories
3. DE-01/DE-03 LOW: No visual distinction for positive vs. negative changes, no emphasis for extreme values
   • Fix: Color the connecting lines by direction (green-tinted for improvements, red/orange-tinted for regressions), or add small delta labels (+24, +19, -3) next to the After dots

AI Feedback for Next Attempt

Three concrete improvements: (1) Fix title domain from "pyplots.ai" to "anyplot.ai". (2) Remove y-axis gridlines (yaxis showgrid: False) — they add noise without value on a horizontal dumbbell chart. (3) Add a design storytelling layer: conditionally color the connecting lines by direction (e.g., use INK_SOFT for improvements but AFTER_COLOR or a warning amber for the regression row), or add compact delta annotations (+24, -3) next to the After dots. These changes will bring DE-01 to 6+ and DE-03 to 5+.

Verdict: REJECTED