feat(altair): implement area-stacked-percent

[github-actions]

Implementation: area-stacked-percent - altair

Implements the altair version of area-stacked-percent.

File: plots/area-stacked-percent/implementations/altair.py

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a 100% stacked area chart showing energy source mix evolution from 2015 to 2024. Four colored areas are stacked from bottom to top: Coal (steel blue), Natural Gas (golden yellow), Nuclear (medium slate blue/purple), and Renewables (sea green). The Y-axis shows "Share of Energy Mix (%)" ranging from 0% to 100% with percentage formatting. The X-axis displays years from 2015 to 2024. The title "area-stacked-percent · altair · pyplots.ai" is centered at the top. A legend on the right identifies the four energy sources with colored circular markers. The chart clearly illustrates the energy transition narrative with Coal declining from ~45% to ~16%, Renewables growing from ~18% to ~44%, while Natural Gas and Nuclear remain relatively stable. Subtle dashed grid lines provide reference. The areas have slight transparency (0.85 opacity) with visible boundary lines.

Quality Score: 92/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (10/10) - Title at 28pt, axis labels at 22pt, tick labels at 18pt, all perfectly readable
• VQ-02: No Overlap (8/8) - No overlapping text elements, all labels clearly separated
• VQ-03: Element Visibility (8/8) - Area fills are clearly visible with good opacity (0.85), boundary lines enhance distinction
• VQ-04: Color Accessibility (4/5) - Colors are distinguishable but blue/purple could be closer for some colorblind users
• VQ-05: Layout Balance (5/5) - Good canvas utilization, plot fills appropriate space with balanced margins
• VQ-06: Axis Labels (1/2) - Y-axis has descriptive label with unit indication (%), X-axis just "Year" without additional context
• VQ-07: Grid & Legend (0/2) - Grid is subtle with dashed style and 0.3 opacity, BUT legend is positioned outside the plot area creating extra whitespace

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct 100% stacked area chart
• SC-02: Data Mapping (5/5) - X is time (Year), Y is percentage contribution correctly assigned
• SC-03: Required Features (5/5) - Shows percentage stacking, multiple categories, temporal progression
• SC-04: Data Range (3/3) - Y-axis shows full 0-100% range, all years visible
• SC-05: Legend Accuracy (2/2) - Legend labels match data categories correctly
• SC-06: Title Format (2/2) - Uses exact required format: area-stacked-percent · altair · pyplots.ai

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows proportion changes over time well, demonstrates both increasing and decreasing trends, but all changes are gradual (no dramatic shifts shown)
• DQ-02: Realistic Context (7/7) - Energy source mix evolution is a perfect real-world scenario, neutral topic
• DQ-03: Appropriate Scale (4/5) - Percentages are realistic for energy mix, though nuclear staying exactly flat at 12% for 10 years is slightly artificial

Code Quality (10/10 pts)

• CQ-01: KISS Structure (3/3) - Clean imports → data → plot → save structure, no functions/classes
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42) (though data is manually specified, seed is set)
• CQ-03: Clean Imports (2/2) - Only used imports: altair, numpy, pandas
• CQ-04: No Deprecated API (1/1) - Modern Altair API usage
• CQ-05: Output Correct (1/1) - Saves as plot.png and plot.html

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Uses Altair's declarative encoding with proper stacking (stack="normalize"), tooltips, and interactive() for HTML export. However, could leverage more Altair-specific features like selections or more sophisticated interactivity.

Strengths

• Excellent use of Altair's declarative grammar with stack="normalize" for proper 100% stacking
• Clear, compelling real-world narrative (energy transition) that perfectly demonstrates the spec
• Clean code structure following KISS principles with well-organized long-format data
• Good typography sizing making all text highly readable
• Appropriate use of tooltips and interactive HTML export
• Proper stacking order using explicit order encoding

Weaknesses

• Legend positioned outside creates slight whitespace imbalance; consider moving inside plot area
• Nuclear data staying perfectly flat at 12% for all 10 years feels artificially constant

Verdict: APPROVED