feat(altair): implement bar-grouped

[github-actions]

Implementation: bar-grouped - python/altair

Implements the python/altair version of bar-grouped.

File: plots/bar-grouped/implementations/python/altair.py

Parent Issue: #1822

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The grouped bar chart displays quarterly revenue (Q1–Q4) across three product lines (Software, Hardware, Services) using Okabe-Ito colors: green (#009E73) for Software, orange (#D55E00) for Hardware, and blue (#0072B2) for Services. The plot background is a warm off-white (#FAF8F1). The title "bar-grouped · altair · anyplot.ai" is clearly visible in dark text at the top. Both axis labels are descriptive: "Quarter" (X-axis) and "Revenue (thousands USD)" (Y-axis with units). Tick labels and legend text are dark and legible. Grid lines are subtle (opacity 10%), providing guidance without dominating the visualization. The legend displays at the bottom in horizontal orientation with the title "Product Line". All elements—title, axis labels, ticks, legend—are readable against the light background with no legibility issues.

Dark render (plot-dark.png): The same grouped bar chart renders on a warm near-black background (#1A1A17). The data colors (green, orange, blue) remain identical to the light render, confirming proper theme separation between data and chrome. All text (title, axis labels, ticks, legend) switches to light colors (light text against dark background) and is clearly readable with no dark-on-dark failures. The grid remains subtle and visible. The legend and callout elements use the appropriate elevated background color (#242420). Both renders meet legibility standards: the light render uses dark text on light surface; the dark render uses light text on dark surface—no readability problems in either theme.

Score: 88/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All text explicitly sized: title 28px, labels 22px, ticks 18px; perfectly readable in both themes
• VQ-02: No Overlap (6/6) — No overlapping text; axis labels and legend labels all clearly visible
• VQ-03: Element Visibility (6/6) — Bars are optimally sized and well-adapted to 12-point dataset; grouping is clear
• VQ-04: Color Accessibility (2/2) — Okabe-Ito palette is colorblind-safe; good contrast throughout
• VQ-05: Layout & Canvas (4/4) — Plot fills ~65% of canvas with balanced margins; nothing cut off
• VQ-06: Axis Labels & Title (2/2) — Y-axis includes units ("thousands USD"); title format correct
• VQ-07: Palette Compliance (2/2) — First series is #009E73; multi-series follows Okabe-Ito order; backgrounds are correct (#FAF8F1 light, #1A1A17 dark); theme chrome is flawless in both renders

Design Excellence (10/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured defaults with Okabe-Ito palette and intentional typography; rounded bar corners add subtle polish. However, design is competent rather than exceptional—lacks distinctive visual personality or publication-level sophistication
• DE-02: Visual Refinement (4/6) — Subtle grid (10% opacity), clean axes, generous whitespace; good attention to detail but minimal customization beyond standard practices
• DE-03: Data Storytelling (2/6) — Data is displayed clearly but without visual hierarchy or emphasis; viewer finds their own narrative rather than being guided to a specific insight

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct grouped bar chart with side-by-side bars using xOffset encoding
• SC-02: Required Features (4/4) — All spec requirements present: multiple bars per category, color-coded groups, legend, clear axes
• SC-03: Data Mapping (3/3) — X-axis (Quarter/O), Y-axis (Revenue/Q), color (Product/N) all correctly mapped; all data visible
• SC-04: Title & Legend (3/3) — Title format "{spec-id} · {library} · anyplot.ai" correct; legend labels match data exactly

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows all aspects: multiple groups, trend variation across quarters, realistic revenue proportions
• DQ-02: Realistic Context (5/5) — Real business scenario (quarterly revenue by product line); neutral, comprehensible context
• DQ-03: Appropriate Scale (4/4) — Revenue values (45–168 thousands) are factually plausible; proportions and trends are logical

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear: imports → tokens → data → chart → save; no functions or classes
• CQ-02: Reproducibility (2/2) — Static data definition; fully deterministic
• CQ-03: Clean Imports (2/2) — Only necessary imports used (os, sys, pandas, altair)
• CQ-04: Code Elegance (2/2) — Clean, Pythonic, appropriate complexity; no fake functionality
• CQ-05: Output & API (1/1) — Saves as plot-{THEME}.png and plot-{THEME}.html; current API

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — Expert use of Altair's Chart → mark → encode → properties → configure pattern; xOffset for grouping is idiomatic
• LM-02: Distinctive Features (3/5) — Uses xOffset (grouping technique) and rounded corners; solid features but standard patterns for Altair

Score Caps Applied

• None / [describe cap if applied]

Strengths

• Perfect visual quality with zero readability issues in both light and dark themes
• Flawless theme-adaptive chrome (background, text, grid, legend box) in both renders
• Strong palette compliance: first series is #009E73, multi-series follows canonical Okabe-Ito order
• All typography explicitly sized for large canvas; all text legible
• Excellent data quality with realistic business context
• Clean, reproducible code following KISS principles

Weaknesses

• DE-01 modest (4/8): plot follows library defaults competently but lacks distinctive aesthetic sophistication or publication-level design
• DE-03 low (2/6): no visual storytelling; data is displayed clearly but doesn't guide viewer toward insights or emphasize key patterns

Issues Found

1. DE-01 MODEST (4/8): Generic styling with default Altair configuration
   • Fix: Add custom color refinement, subtle visual effects, or intentional whitespace hierarchy
2. DE-03 LOW (2/6): No visual hierarchy or data storytelling
   • Fix: Use color contrast, size variation, or strategic data emphasis to create focal point

AI Feedback for Next Attempt

The implementation is technically excellent and readable across themes, but lacks design distinction. To improve Design Excellence, consider: (1) adding subtle visual emphasis through color contrast or size variation to guide viewer attention to key pattern; (2) refining whitespace and margins for intentional hierarchy; (3) exploring Altair-specific styling to create publication-level sophistication.

Verdict: APPROVED

[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): Warm off-white background (#FAF8F1) with subtle grid lines at 10% opacity. Title 'bar-grouped · altair · anyplot.ai' prominently displayed in dark text at 28px. X-axis 'Quarter' and Y-axis 'Revenue (thousands USD)' clearly readable at 22px. Tick labels (Q1-Q4, 0-180) in secondary color at 18px with full legibility. Legend 'Product Line' at bottom with three product entries (Software, Hardware, Services) using Okabe-Ito colors: green (#009E73), orange (#D55E00), blue (#0072B2). Bars have subtle rounded corners with appropriate spacing between groups. All text is clearly readable against the light background with no collisions. Data density is ideal for visual comparison.

Dark render (plot-dark.png): Warm near-black background (#1A1A17) with matching grid opacity. Title in light text (#F0EFE8) at 28px, clearly visible. Axis labels and tick labels properly lightened for contrast (#B8B7B0 for secondary). The three Okabe-Ito data colors are IDENTICAL to the light render, ensuring visual consistency. Legend maintains dark background with light text. All bars are clearly distinguishable from the dark background with no dark-on-dark text issues. Brand green (#009E73) is vibrant and distinct. Both renders are properly theme-adapted with chrome flipping appropriately while data colors remain constant.

Score: 86/100

Category	Score	Max
Visual Quality	30	30
Design Excellence	10	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	6	10
Total	86	100

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) - All text readable at full resolution in both themes. Title 28px, axis labels 22px, tick labels 18px. Proper use of INK and INK_SOFT tokens.
• VQ-02: No Overlap (6/6) - Bars properly spaced with xOffset encoding. No text collisions. Legend well-separated.
• VQ-03: Element Visibility (6/6) - All 12 bars clearly visible. Rounded corners provide subtle definition. Data density appropriate.
• VQ-04: Color Accessibility (2/2) - Okabe-Ito palette inherently CVD-safe. Adequate contrast in both themes. Distinct colors.
• VQ-05: Layout & Canvas (4/4) - Canvas 1600×900 with scale_factor=3.0 = 4800×2700px. Good proportions. No cut-off elements.
• VQ-06: Axis Labels & Title (2/2) - X-axis 'Quarter', Y-axis 'Revenue (thousands USD)', title format matches spec.
• VQ-07: Palette Compliance (2/2) - Software=#009E73, Hardware=#D55E00, Services=#0072B2. Backgrounds #FAF8F1/#1A1A17. Theme-correct.

Design Excellence (10/20)

• DE-01: Aesthetic Sophistication (4/8) - Clean professional design but uses default styling patterns. Okabe-Ito palette (not custom). Rounded bar corners show subtle thought. No dramatic visual hierarchy.
• DE-02: Visual Refinement (3/6) - Grid configured with opacity=0.10. Legend background uses ELEVATED_BG. Whitespace adequate. Modest customization level.
• DE-03: Data Storytelling (3/6) - Grouped bar arrangement naturally guides comparison. Software (green) shows clear dominance. Good structure but could be more intentional.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - Correct grouped bar chart with xOffset encoding for side-by-side positioning.
• SC-02: Required Features (4/4) - 3 product lines displayed with clear legend, proper labels, and tooltips.
• SC-03: Data Mapping (3/3) - X: Quarter (ordinal), Y: Revenue (quantitative), Color: Product (categorical, Okabe-Ito).
• SC-04: Title & Legend (3/3) - Title 'bar-grouped · altair · anyplot.ai'. Legend labeled 'Product Line' with correct entries.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Demonstrates grouped bar feature with 3 products × 4 quarters. Clear differentiation and trends.
• DQ-02: Realistic Context (5/5) - Realistic quarterly revenue scenario. Product categories appropriate. Data relationships authentic.
• DQ-03: Appropriate Scale (4/4) - Y-axis range (0-180) proportional to data. No compression. Well-distributed values.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Direct DataFrame and chart building. No unnecessary abstractions.
• CQ-02: Reproducibility (2/2) - Data hardcoded deterministically. No randomness.
• CQ-03: Clean Imports (2/2) - Only necessary imports: os, sys, pandas, altair.
• CQ-04: Code Elegance (2/2) - Appropriate altair patterns. No fake interactivity. Clean theme logic.
• CQ-05: Output & API (1/1) - Correct naming: plot-{THEME}.png and plot-{THEME}.html. Current Altair 6.1.0 API.

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) - Grammar of graphics pattern. Proper encodings. xOffset grouping is idiomatic. Missing advanced interactive patterns.
• LM-02: Distinctive Features (2/5) - Basic tooltips and color encoding (standard). Rounded corners show detail but minimal. Could use selection/pan/zoom.

Score Caps Applied

• None applied

Strengths

• Perfect technical execution across core categories (VQ 30/30, SC 15/15, DQ 15/15, CQ 10/10)
• Excellent theme-adaptive implementation with proper INK/INK_SOFT token usage
• Clean, professional grouped bar chart with correctly applied Okabe-Ito palette
• Proper data selection (realistic quarterly revenue scenario)
• Idiomatic altair usage with correct encodings and configuration
• All text properly sized and readable in both themes
• Effective xOffset grouping with appropriate spacing

Weaknesses

• DE-01 and DE-02 could be elevated: consider more sophisticated design elements (custom typography hierarchy, visual emphasis through color intensity, layered storytelling)
• LM-02 (Distinctive Features) at 2/5: could leverage altair's interactive capabilities (selection, pan/zoom, brushing)
• DE-03 relies on natural structure rather than intentional emphasis: consider color dominance patterns or strategic annotation

Issues Found

1. Design Excellence MODERATE: Solid execution but uses default styling patterns
   • Fix: Add more sophisticated design elements beyond the basic grouped bar structure. Consider custom typography hierarchy, layered color intensity, or strategic visual emphasis.
2. Library Mastery MODERATE: Minimal use of altair's distinctive capabilities
   • Fix: Explore interactive selections, pan/zoom interactivity, or more complex encodings that showcase what makes altair distinctive.

AI Feedback for Next Attempt

This is a solid, production-ready implementation with perfect technical execution. The 86/100 score reflects excellent fundamentals but moderate design sophistication. To reach 90+, consider adding more intentional visual hierarchy through color emphasis, custom typography weights, or leveraging altair's interactive features (selection, brushing) to create more engagement beyond the basic grouped bar structure.

Verdict: APPROVED