feat(plotly): implement bar-stacked

[github-actions]

Implementation: bar-stacked - python/plotly

Implements the python/plotly version of bar-stacked.

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

Parent Issue: #1947

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Stacked bar chart showing quarterly revenue (Q1-Q4 2024) across four product categories (Software, Hardware, Services, Support) with warm off-white background (#FAF8F1). The bars display Okabe-Ito colors with Software (green, #009E73) at the bottom, Hardware (orange, #D55E00), Services (blue, #0072B2), and Support (reddish purple, #CC79A7) stacked on top. Each segment shows its value in white text inside the bar. Total labels above each bar ($270K, $305K, $350K, $390K) are in dark text (INK token). Title "bar-stacked · plotly · anyplot.ai" is centered and clearly visible. Y-axis labeled "Revenue (Thousands USD)" with units, X-axis labeled "Quarter". Legend positioned on the right with styled background and border. All text is fully readable against the light surface; no overlap or legibility issues.

Dark render (plot-dark.png): Identical data and layout on warm near-black background (#1A1A17). All text is light-colored (title, labels, legend) and clearly visible with excellent contrast against the dark surface. The four data colors are identical to the light render — only the chrome (background, text, grid, legend box) has flipped to dark theme. Grid lines remain subtle and visible. Total annotations are light-colored, ensuring readability. No dark-on-dark failures detected. All elements perfectly readable in dark mode.

Score: 89/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) - All font sizes explicitly set: title 28px, axis labels 22px, tick labels 18px, data values 18px, annotations 20px. All perfectly readable at 4800×2700.
• VQ-02: No Overlap (6/6) - No overlapping text; all labels fully readable and well-spaced.
• VQ-03: Element Visibility (6/6) - Bars and stacked segments clearly visible and optimally sized. Data labels within segments are prominent.
• VQ-04: Color Accessibility (2/2) - Okabe-Ito palette is CVD-safe with strong contrast between segments.
• VQ-05: Layout & Canvas (4/4) - Plot occupies 65-70% of canvas with balanced margins and generous whitespace.
• VQ-06: Axis Labels & Title (2/2) - Descriptive with units: "Quarter" and "Revenue (Thousands USD)".
• VQ-07: Palette Compliance (2/2) - First series is #009E73 ✓; multi-series follows Okabe-Ito order; backgrounds are #FAF8F1 (light) and #1A1A17 (dark); text colors use INK and INK_SOFT tokens correctly in both themes.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (6/8) - Strong design with thoughtful color use and intentional hierarchy. Uses theme tokens and styled legend (elevated background, border). Clearly above library defaults but not publication-ready.
• DE-02: Visual Refinement (4/6) - Good refinement: subtle grid, L-shaped axis frame (top/right spines removed), generous whitespace. Legend styling is polished. Could be more sophisticated.
• DE-03: Data Storytelling (2/6) - Data is displayed clearly with visual progression (Q1→Q4 growth) and stacking order communicates product contribution. However, no exceptional visual emphasis or focal point to guide the viewer to a specific insight.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - Correct stacked bar chart with showing all four components properly stacked.
• SC-02: Required Features (4/4) - All spec features present: multiple series, stacking, legend, total value annotations above bars.
• SC-03: Data Mapping (3/3) - X-axis categories (quarters) and Y-axis values (revenue) correctly mapped. Axes show all data.
• SC-04: Title & Legend (3/3) - Title format correct: "bar-stacked · plotly · anyplot.ai". Legend labels match data series.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Shows all aspects of stacked bars: 4 categories with 4 components each; varying proportions across quarters showing different growth rates.
• DQ-02: Realistic Context (5/5) - Real, comprehensible business scenario: quarterly revenue breakdown by product category. Neutral and professional.
• DQ-03: Appropriate Scale (4/4) - Values are plausible and proportionally correct for a growing business. Relationships make sense.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Clean structure: imports → theme tokens → data arrays → figure creation → save. No functions/classes.
• CQ-02: Reproducibility (2/2) - Hardcoded deterministic data with no randomness.
• CQ-03: Clean Imports (2/2) - Only imports and , all used.
• CQ-04: Code Elegance (2/2) - Clean, Pythonic, proper plotly API. Uses idiomatically for annotations.
• CQ-05: Output & API (1/1) - Saves as and . Current plotly API.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (5/5) - Expertly uses plotly's high-level API (, , ). Proper use of theme tokens for adaptive styling.
• LM-02: Distinctive Features (2/5) - Uses interactive export (HTML) and annotation system, but these are not particularly distinctive to plotly.

Score Caps Applied

• None applied. All quality categories pass baseline thresholds.

Strengths

• Perfect visual quality: all text explicitly sized and readable in both themes
• Flawless palette compliance: Okabe-Ito colors identical across light/dark, perfect theme-adaptive chrome
• Excellent spec compliance: correct plot type with all required features
• Strong data: realistic business scenario with meaningful growth narrative
• Clean code: idiomatic plotly usage with proper theme-awareness architecture

Weaknesses

• Design Excellence below publication-ready tier: lacks visual sophistication beyond well-configured defaults
• No visual hierarchy or emphasis: data is displayed straightforwardly without storytelling technique (color contrast, size variation, focal points)
• Visual refinement is adequate but not exceptional: could benefit from removed spines, more sophisticated legend styling, or grid refinement

Issues Found

1. DE-01 MODERATE (6/8): While the implementation shows thoughtful design (theme tokens, styled legend), it reads as a well-configured library default rather than sophisticated design. The color harmony is correct but not intentional; the hierarchy is clear but not emphasized.

   • Fix: Add visual sophistication through design choices such as custom legend positioning, enhanced grid styling, or deliberate color emphasis to create hierarchy.

2. DE-03 LOW (2/6): Data is displayed but doesn't tell a compelling story. The quarterly growth is visible, but no visual technique (color intensity, size variation, annotations) guides the viewer's eye to the insight.

   • Fix: Add visual hierarchy through strategic color use, size variation in labels, or emphasis on key segments (e.g., larger font for Software which shows strongest growth).

AI Feedback for Next Attempt

Improve design excellence: consider removing all spines for a cleaner look, experiment with legend positioning (top or integrated), and create visual hierarchy through intentional emphasis (e.g., bold or larger font for the dominant segment). The palette and theme adaptation are excellent—now elevate the aesthetic sophistication and data storytelling to publication-ready quality.

Verdict: REJECTED

Reason: Score 89/100 falls short of Attempt 1/3 threshold (≥90). Implementation is technically excellent but requires design refinement to reach publication-ready quality.

[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): Background is the correct warm off-white (#FAF8F1). Title and all text (axis labels, tick labels) are dark (#1A1A17) and perfectly readable. X-axis shows quarters Q1-Q4 2024; Y-axis shows revenue scale. The four stacked components display Okabe-Ito colors correctly: Software (#009E73, green, base), Hardware (#D55E00, orange), Services (#0072B2, blue), Support (#CC79A7, purple). Component values are labeled inside segments with white text for contrast. Total annotations above bars show sum with growth rate in light boxes with dark text. Legend in top-right is clear. Y-axis grid is subtle and appropriate. All elements readable with no overlap.

Dark render (plot-dark.png): Background correctly switches to warm near-black (#1A1A17). All text becomes light (#F0EFE8 and #B8B7B0), maintaining perfect readability. Critically, the data colors (Software, Hardware, Services, Support) remain identical to light render—only chrome (text, background, legend) adapts. Total annotations use light text on dark boxes. The plot is equally readable in dark mode with no dark-on-dark failures. Both renders are professional and theme-correct.

Score: 93/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	10	10
Total	93	100

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — Title (28px), labels (22px), ticks (18px) all explicitly set and perfectly readable in both themes
• VQ-02: No Overlap (6/6) — No overlapping text; bars have subtle separators; annotations positioned clearly
• VQ-03: Element Visibility (6/6) — All 16 segments (4 bars × 4 components) clearly distinct and visible
• VQ-04: Color Accessibility (2/2) — Okabe-Ito palette is colorblind-safe; white text has good contrast on segments
• VQ-05: Layout & Canvas (4/4) — Plot fills 60-70% of canvas with balanced margins; legend and annotations well-positioned
• VQ-06: Axis Labels & Title (2/2) — Y-axis includes units; X-axis is descriptive
• VQ-07: Palette Compliance (2/2) — First series #009E73; subsequent colors follow Okabe-Ito order; backgrounds correct; chrome theme-correct in both renders

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Professional color palette, thoughtful annotations with growth rates, subtle bar borders. Well-crafted but not extraordinary.
• DE-02: Visual Refinement (4/6) — Subtle Y-axis grid, styled bar edges, generous whitespace, legend with border/background. Good refinement but could be slightly more polished.
• DE-03: Data Storytelling (4/6) — Meaningful data (quarterly revenue composition), annotations emphasize progression, stacking naturally tells composition story. Good visual hierarchy but could emphasize key insights more.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct stacked bar chart; bars properly stacked
• SC-02: Required Features (4/4) — All features present and working
• SC-03: Data Mapping (3/3) — X=quarters, Y=revenue; axes show all data
• SC-04: Title & Legend (3/3) — Correct format; legend labels correct

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows composition across quarters with varying component sizes
• DQ-02: Realistic Context (5/5) — Real business scenario; neutral and professional
• DQ-03: Appropriate Scale (4/4) — Values factually plausible; growth rates realistic; proportions logical

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear structure; no functions/classes
• CQ-02: Reproducibility (2/2) — All data hardcoded and deterministic
• CQ-03: Clean Imports (2/2) — Only used imports
• CQ-04: Code Elegance (2/2) — Clean, Pythonic; no over-engineering
• CQ-05: Output & API (1/1) — Saves correctly; uses current API

Library Mastery (10/10)

• LM-01: Idiomatic Usage (5/5) — Expert use of go.Figure(), add_trace(), custom hover templates, comprehensive update_layout()
• LM-02: Distinctive Features (5/5) — Custom hover templates with percentages, theme-adaptive styling, HTML export, creative annotation styling

Score Caps Applied

• None

Strengths

• Perfect visual quality with excellent readability in both light and dark themes
• Flawless palette compliance: Okabe-Ito colors identical across themes, theme-appropriate chrome
• Masterful Plotly usage: custom hover templates, theme-adaptive environment variables, rich interactive features
• Realistic, meaningful data showing revenue composition with growth insights
• Clean, maintainable code with clear structure
• All spec requirements met completely

Weaknesses

• Design Excellence solid but not exceptional—could elevate with more sophisticated annotation styling or refined visual hierarchy

Issues Found

• None — implementation is excellent across all dimensions

AI Feedback for Next Attempt (if needed)

This implementation exceeds expectations. If further refinement desired: consider more sophisticated annotation styling (e.g., subtle drop shadows, refined border treatments) or enhanced visual hierarchy through size/weight variation in component labels.

Verdict: APPROVED