feat(plotly): implement bar-basic

[github-actions]

Implementation: bar-basic - python/plotly

Implements the python/plotly version of bar-basic.

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

Parent Issue: #612

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Vertical bar chart on a warm off-white (#FAF8F1) background. Eight bars represent product sales by category in descending order (Electronics: 5,200 → Health: 5,400). The first bar (Electronics) is rendered in brand green #009E73; the remaining seven bars use anyplot blue #4467A3. Dollar-formatted value labels appear above each bar (e.g., "$45,200"). A horizontal dashed average line at ~$27,925 crosses the chart with an "Avg $27,925" text annotation at the left margin. An arrow callout box labeled "Top seller / 17% ahead of #2" with a green border points to the Electronics bar. Y-axis grid lines are subtle (rgba(26,26,23,0.15)), x-axis grid is hidden. Title, axis labels, and tick labels are all dark and clearly readable. Minor crowding: "Avg $27,925" text is positioned close to the "$30,000" y-tick label on the left margin. All text is readable against the light background — no light-on-light failures.

Dark render (plot-dark.png): Identical layout on a warm near-black (#1A1A17) background. Bar colors are unchanged from light — Electronics in #009E73, remaining bars in #4467A3 (data colors correctly preserved). Title, axis labels, and tick labels have all flipped to light cream/soft values (INK = #F0EFE8, INK_SOFT = #B8B7B0) — no dark-on-dark failures observed. The "Top seller" callout box retains its green border and is clearly readable. The average line annotation is visible in muted light gray. Brand green #009E73 remains clearly visible on the dark surface. Y-axis grid lines have adapted to light-on-dark GRID token. All text is readable against the dark background.

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

Score: 90/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	14	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total	90	100

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set (title 16px, axis labels 12px, tick labels 10px, value labels 10px). Well-proportioned in both themes, title fills expected 70–85% width for mandated format.
• VQ-02: No Overlap (5/6) — Minor crowding: "Avg $27,925" annotation (annotation_position="top left") sits close to the "$30,000" y-tick label; "$45,200" value label and annotation arrow origin occupy the same tight vertical space above the Electronics bar. Not severe but visible.
• VQ-03: Element Visibility (6/6) — All 8 bars, value labels, average line, and callout arrow clearly visible in both themes.
• VQ-04: Color Accessibility (2/2) — Green and blue are CVD-distinguishable. Bar edge outlines add definition. No red-green-only encoding.
• VQ-05: Layout & Canvas (4/4) — Canvas confirmed 3200×1800. Balanced margins, good canvas utilization, nothing cut off.
• VQ-06: Axis Labels & Title (2/2) — X: "Product Category", Y: "Sales ($)" with unit. Title in correct required format.
• VQ-07: Palette Compliance (2/2) — First bar #009E73, rest #4467A3 (anyplot palette). Backgrounds #FAF8F1/#1A1A17. Data colors identical across both renders; all chrome theme-adaptive.

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Strong design clearly above defaults: intentional green highlight on top performer, styled annotation callout with arrow and branded border, average reference line with annotation. Well above "well-configured default" (4pt) but not yet FiveThirtyEight publication-ready.
• DE-02: Visual Refinement (4/6) — Y-axis grid only (x showgrid=False), 15%-opacity GRID token, spines managed via plotly_white template (L-shaped frame), generous whitespace, subtle bar edge outlines. Good refinement.
• DE-03: Data Storytelling (4/6) — Clear focal point: green-highlighted Electronics bar with arrow callout "17% ahead of Add Claude Code GitHub Workflow #2" delivers immediate insight. Average reference line adds comparative context. Descending sort reinforces the ranking narrative.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct vertical bar chart via go.Bar().
• SC-02: Required Features (4/4) — Consistent bar widths (bargap=0.3), value labels above bars, color highlight on top performer, adequate spacing between bars.
• SC-03: Data Mapping (3/3) — X: categories, Y: sales values. All 8 data points visible.
• SC-04: Title & Legend (3/3) — Title "bar-basic · python · plotly · anyplot.ai" matches exact required format. showlegend=False appropriate for this highlighted single-color-scheme design.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — 8 categories with 5,400–$45,200 range; shows full bar chart capability: ranking, value labels, reference line, color emphasis.
• DQ-02: Realistic Context (5/5) — Product sales by department (Electronics, Clothing, Home & Garden, Sports, Books, Toys, Automotive, Health) — realistic, neutral business scenario.
• DQ-03: Appropriate Scale (4/4) — Values plausible for retail sales. Electronics ranking first is realistic; proportional differences are believable.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear: imports → theme tokens → data → figure → annotations → layout → save. No functions or classes.
• CQ-02: Reproducibility (2/2) — All data is hardcoded lists — fully deterministic.
• CQ-03: Clean Imports (2/2) — Only os, sys, plotly.graph_objects — all used.
• CQ-04: Code Elegance (2/2) — Clean, Pythonic. No fake UI elements. sys.path guard is a standard codebase pattern.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html. write_image with scale=4 produces correct 3200×1800 output.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — go.Figure() + go.Bar() is appropriate for this customization level (add_annotation, add_hline). Idiomatic use of update_layout(), write_image(), write_html().
• LM-02: Distinctive Features (3/5) — Uses Plotly-distinctive capabilities: hovertemplate (interactive hover formatting), texttemplate (dollar-formatted bar labels), add_hline() convenience function, write_html() with CDN-hosted JS. Interactive HTML output is genuinely Plotly-distinctive.

Score Caps Applied

• None — DE-01=6 and DE-02=4 (both above 2), no other caps triggered.

Strengths

• First bar correctly uses brand green #009E73 as focal point; remaining bars use anyplot palette blue #4467A3 — consistent color strategy that serves the ranking narrative
• Arrow annotation callout with quantitative insight ("17% ahead of Add Claude Code GitHub Workflow #2") adds genuine data storytelling beyond spec requirements
• Excellent theme adaptation: all chrome tokens (PAGE_BG, INK, INK_SOFT, INK_MUTED, GRID) correctly applied in both renders with zero dark-on-dark failures
• Clean code structure: deterministic hardcoded data, all font sizes explicitly set, appropriate complexity
• Full Plotly feature showcase: formatted hovertemplate, texttemplate value labels, write_html() HTML export

Weaknesses

• Minor text proximity: the add_hline annotation "Avg $27,925" (annotation_position="top left") lands close to the "$30,000" y-tick label — consider annotation_position="bottom right" or increasing the ay offset to move the label away from the y-axis tick area
• The "$45,200" value label above the Electronics bar and the annotation arrow origin coexist in tight vertical space — consider increasing the ax offset or shifting the callout further right so the arrow head clears the value label

Issues Found

1. VQ-02 MINOR: "Avg $27,925" annotation text crowded against "$30,000" y-tick label
   • Fix: Change annotation_position to "bottom right" or adjust ax/ay offsets (e.g., ax=200, ay=-20) to place the label in less congested whitespace
2. VQ-02 MINOR: "$45,200" value label and arrow head occupy same vertical space above Electronics bar
   • Fix: Increase ax offset (e.g., ax=350) to push callout further from bar top, or adjust ay to separate the arrow origin from the value label

AI Feedback for Next Attempt

The implementation is strong. Address the two minor text-crowding issues: (1) move the avg line annotation label away from the y-axis tick area — use annotation_position="bottom right" or adjust ay to negative so it drops below the line; (2) increase the ax offset on the Electronics arrow annotation so the callout box sits further from the "$45,200" value label. These are purely positioning tweaks; no design or color changes needed.

Verdict: APPROVED