feat(plotly): implement lollipop-basic

[github-actions]

Implementation: lollipop-basic - python/plotly

Implements the python/plotly version of lollipop-basic.

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

Parent Issue: #934

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The plot displays a vertical lollipop chart on a warm off-white #FAF8F1 background. Ten product categories (Electronics through Health) are sorted descending by sales value, shown on the x-axis with labels angled at -35°. The y-axis displays dollar-formatted tick labels ($0 to $120,000). All stems and circular markers are rendered in Okabe-Ito brand green #009E73 — stems are thin vertical lines, markers are circular dots (size 22) with a background-colored border ring. The title "Product Sales by Category · lollipop-basic · plotly · anyplot.ai" appears in dark ink at the top center. Axis labels "Product Category" and "Sales ($)" are clearly visible. All text is readable against the light background. Subtle horizontal grid lines (y-axis only) are visible. Legibility verdict: PASS.

Dark render (plot-dark.png): The same chart renders on a warm near-black #1A1A17 background. The title, axis labels, and y-axis tick labels appear in light/off-white text; x-axis category labels appear in lighter gray — both are clearly readable against the dark surface. Data colors are identical to the light render: stems and markers remain #009E73. The marker border adapts to the dark background color (the PAGE_BG token). Grid lines are extremely subtle against the dark surface. No dark-on-dark text failures observed. Legibility verdict: PASS.

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

Score: 87/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — Title 28px, axis labels 22px, tick labels 18px — all explicitly set to match style guide spec; fully readable in both themes
• VQ-02: No Overlap (6/6) — 10 angled x-axis labels at -35° have no collisions; y-axis ticks are well-spaced
• VQ-03: Element Visibility (6/6) — Markers at size 22 with background-toned border ring; stems at width 3; clearly visible in both renders
• VQ-04: Color Accessibility (2/2) — Single Okabe-Ito brand color, no red-green dependency, high contrast in both themes
• VQ-05: Layout & Canvas (4/4) — 4800×2700px canvas with balanced margins (l=110, r=60, t=110, b=160); plot fills canvas well, nothing cut off
• VQ-06: Axis Labels & Title (2/2) — "Product Category" (x), "Sales ($)" (y) with currency unit; descriptive and correct
• VQ-07: Palette Compliance (2/2) — First series #009E73 ✓; light background #FAF8F1 ✓; dark background #1A1A17 ✓; all chrome tokens (INK, INK_SOFT, GRID) correctly adapted in both renders

Design Excellence (9/20)

• DE-01: Aesthetic Sophistication (4/8) — Clean, well-configured default look. Custom font family (Inter) and styled hover labels are nice touches, but design doesn't rise above "well-applied style guide compliance" — no intentional visual hierarchy, no focal point emphasis, single monotone color treatment
• DE-02: Visual Refinement (3/6) — X-axis grid removed (clean), y-axis has subtle grid with GRID token, zero-line styled. Above default, but no explicit top/right spine removal coded; some default Plotly chrome behaviors relied upon
• DE-03: Data Storytelling (2/6) — Sorted descending order is a spec requirement, not an additional storytelling choice. All lollipops share identical color with no emphasis; viewer must find their own insight. No focal point on highest/lowest performer

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct vertical lollipop chart with thin stems from baseline and circular markers at each data value
• SC-02: Required Features (4/4) — Stems, circular markers, vertical orientation, sorted-by-value ordering all present
• SC-03: Data Mapping (3/3) — Categories on x-axis, dollar values on y-axis, all 10 categories displayed
• SC-04: Title & Legend (3/3) — Title "Product Sales by Category · lollipop-basic · plotly · anyplot.ai" contains required {spec-id} · {library} · anyplot.ai format; no legend needed (single series)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows stems and markers across a wide value range ($31k–$125k), demonstrating the chart type's strength in value comparison
• DQ-02: Realistic Context (5/5) — E-commerce product category sales is a genuine, neutral business scenario; realistic category names
• DQ-03: Appropriate Scale (4/4) — Sales values ($31k–$125k) are realistic for mid-size retail categories; sensible spread

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat structure: theme tokens → data → figure → traces → layout → save; no functions or classes
• CQ-02: Reproducibility (2/2) — Fully deterministic hardcoded data; no randomness
• CQ-03: Clean Imports (2/2) — Only os (for ANYPLOT_THEME) and plotly.graph_objects (for plotting); both actively used
• CQ-04: Code Elegance (2/2) — Single-trace None-separator stem technique is efficient and Pythonic; marker border adapts to PAGE_BG; strict=True in zip is a quality touch
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html with CDN; no bare plot.png

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — None-separator technique for multi-segment stems in a single trace is genuinely idiomatic Plotly; cliponaxis=False, hovertemplate, and include_plotlyjs='cdn' all demonstrate library expertise
• LM-02: Distinctive Features (3/5) — Interactive hover tooltips with formatted template ($%{y:,.0f}) and theme-styled hover labels (bgcolor/bordercolor/font) exploit Plotly's core interactive advantage; HTML output preserved. Basic but correctly executed.

Score Caps Applied

• None — all caps check out (DE-01=4 > 2, so "correct but boring" cap does not apply)

Strengths

• Perfect theme adaptation: both light and dark renders are fully correct, with all chrome tokens (backgrounds, text, grid, hover labels) properly threaded through
• Single-trace None-separator stem technique is an efficient, idiomatic Plotly pattern
• All spec requirements met perfectly with correct data, axis mapping, and title format
• Marker border matching PAGE_BG is a thoughtful refinement that makes markers pop cleanly on both backgrounds
• Font sizes match the style guide's pixel-based recommendations exactly

Weaknesses

• Design Excellence is the primary gap (9/20): the plot is technically correct but visually generic — no emphasis on any performer, no visual hierarchy, all lollipops share identical color with no focal point
• DE-03: No data storytelling — consider highlighting the top performer (Electronics) with a distinct color or annotation, or grouping categories with color bands to create a narrative
• DE-01: Aesthetic sophistication could be elevated — for instance, use color gradient from bottom to top, or accent the highest value with a contrasting Okabe-Ito color, to create intentional visual emphasis
• DE-02: Spines not explicitly managed — explicit showline=False for y-axis right mirror or axis border cleanup would make the code's intent clear

Issues Found

1. DE-01/DE-03 LOW: All 10 lollipops share the same brand green with no differentiation or emphasis
   • Fix: Highlight the top 1-3 performers with a distinct Okabe-Ito color (e.g., #D55E00 for Electronics) or use a gradient from green to a lighter tint to create visual rank encoding
2. DE-02 MODERATE: Visual refinement relies on Plotly's default behavior for spine handling
   • Fix: Explicitly set showline=False on axes where borders should be hidden, or add mirror=False to both xaxis and yaxis to make the clean look intentional

AI Feedback for Next Attempt

Improve Design Excellence to reach 90+: (1) Add visual hierarchy — highlight the top performer (Electronics) in a contrasting Okabe-Ito color like #D55E00 to create a clear focal point, or use a graduated color encoding where lollipop color intensity encodes rank; (2) explicitly set xaxis.showline=False/yaxis.showline=False and mirror=False to make the L-shaped frame intentional rather than relying on defaults; (3) consider adding a subtle data label on the tallest lollipop to anchor the viewer's attention. All other aspects are well-executed — focus changes exclusively on DE-01, DE-02, and DE-03.

Verdict: REJECTED