feat(altair): implement lollipop-basic

[github-actions]

Implementation: lollipop-basic - python/altair

Implements the python/altair version of lollipop-basic.

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

Parent Issue: #934

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The plot displays on a warm off-white background (~#FAF8F1). The title "Product Sales by Category · lollipop-basic · altair · anyplot.ai" appears in bold dark text at the top-left, clearly readable. The Y-axis is labeled "Sales (USD)" with dollar-formatted tick labels from $0 to $440,000; the X-axis is labeled "Category" with 10 category names rotated at −35°. Ten lollipop stems in brand green (#009E73) extend from the baseline to circular markers (also brand green, with a light-background ring stroke for definition). Categories are sorted descending — Electronics towers at $425,000, Pet Supplies bottoms at $95,000. Subtle horizontal grid lines are visible on the Y-axis only. All text is readable against the light background — no light-on-light failures.

Dark render (plot-dark.png): The plot renders on a warm near-black background (~#1A1A17). The title and all axis labels/tick labels appear in light-colored text, clearly readable against the dark surface — no dark-on-dark text failures. The brand green (#009E73) stems and markers are identical in color to the light render, as required. Grid lines appear as subtle lighter lines. Overall theme adaptation is correct and complete.

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

Score: 91/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title=28px, axis titles=22px, tick labels=18px — matches style guide requirements exactly; readable in both themes
• VQ-02: No Overlap (6/6) — Category labels rotated at −35°, no collisions visible
• VQ-03: Element Visibility (6/6) — Stems at strokeWidth=4 and dots at size=550 are clearly visible at 4800×2700
• VQ-04: Color Accessibility (2/2) — Single series in Okabe-Ito #009E73; CVD-safe, good contrast on both backgrounds
• VQ-05: Layout & Canvas (4/4) — 1600×900 @ scale_factor=3.0 = correct 4800×2700 target; balanced margins
• VQ-06: Axis Labels & Title (2/2) — "Sales (USD)" with unit on Y-axis, "Category" on X-axis
• VQ-07: Palette Compliance (2/2) — First series uses BRAND=#009E73; backgrounds #FAF8F1 (light) / #1A1A17 (dark); all chrome tokens theme-adaptive

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Above defaults: dot stroke uses PAGE_BG for clean definition, dollar-formatted Y-axis ticks, left-anchored title with offset. Not quite FiveThirtyEight-level — no focal-point emphasis on the top performer
• DE-02: Visual Refinement (4/6) — X-axis grid disabled, Y-axis grid at 10% opacity, no view border stroke, titlePadding=18 — several thoughtful refinements above library defaults
• DE-03: Data Storytelling (4/6) — Descending sort creates clear ranking hierarchy; Electronics immediately reads as dominant. Visual hierarchy is achieved through lollipop heights, though no additional emphasis technique (color variation, size, annotation) highlights the leader

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct lollipop chart: mark_rule stems + mark_circle dots in vertical orientation
• SC-02: Required Features (4/4) — Thin stems from baseline, circular markers at values, vertical orientation, sorted by value
• SC-03: Data Mapping (3/3) — X=category (Nominal), Y=value (Quantitative), all 10 categories visible
• SC-04: Title & Legend (3/3) — Title contains spec-id, library, and anyplot.ai; no legend (single series — correct omission)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — 10 categories spanning $95K–$425K show good value variation; all lollipop aspects demonstrated
• DQ-02: Realistic Context (5/5) — E-commerce product categories with plausible sales figures — real, neutral, business scenario
• DQ-03: Appropriate Scale (4/4) — Sales values in the $95K–$425K range are realistic for product category sales data

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear flow: imports → tokens → data → stems → dots → layer → save
• CQ-02: Reproducibility (2/2) — Fully deterministic hardcoded data; no random seed needed
• CQ-03: Clean Imports (2/2) — Only os, altair, pandas imported and all used
• CQ-04: Code Elegance (2/2) — Clean layer composition pattern, no over-engineering
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html correctly

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — Layer composition via stems + dots, declarative encodings with alt.X/alt.Y, sort="-y", configure_* for global theming — exemplary Altair patterns
• LM-02: Distinctive Features (3/5) — Layer composition and tooltip encoding are Altair-distinctive; HTML output leverages interactive capabilities. Does not use selection-based interactivity or other advanced Vega-Lite features that would push this further

Score Caps Applied

• None

Strengths

• Perfect Visual Quality (30/30): all font sizes explicitly set to spec, correct canvas dimensions, fully readable in both light and dark themes
• Complete spec compliance: correct lollipop chart with sorted data, stems, and markers as specified
• Excellent theme adaptation: PAGE_BG dot stroke is a subtle but effective refinement; both renders pass readability checks with no chrome failures
• Idiomatic Altair layer composition pattern (stems + dots) with proper declarative encodings

Weaknesses

• DE-01 moderate: No focal-point emphasis on the top-performing category (Electronics); a different marker color, size, or subtle annotation would elevate storytelling
• LM-02 moderate: Implementation doesn't leverage Altair's interactive selection features (e.g., point selection to highlight/dim lollipops) which would be distinctively Altair in the HTML output

Issues Found

1. DE-01 MODERATE: No visual emphasis on the standout data point (Electronics at $425K is 4.5× the smallest category)
   • Fix: Consider slightly larger marker for top performer, or a subtle accent color using Okabe-Ito position 2 for the leader
2. LM-02 MODERATE: Tooltip is present but no Altair-specific interactive selection used
   • Fix: Add alt.selection_point() to highlight hovered lollipop (dim others) in the HTML output

AI Feedback for Next Attempt

The implementation is clean and scores well across most categories. To push above 90, focus on two things: (1) add a visual emphasis on the top-ranked category — this could be a slightly larger dot or a subtle secondary color using Okabe-Ito position 2 — to improve DE-01/DE-03 storytelling; (2) leverage Altair's selection API to add hover-based highlighting in the HTML output for a more distinctively Altair experience (LM-02). The theming, layout, and spec compliance are already excellent.

Verdict: APPROVED