feat(plotly): implement area-stacked-percent

[github-actions]

Implementation: area-stacked-percent - plotly

Implements the plotly version of area-stacked-percent.

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

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a 100% stacked area chart showing energy source market share evolution from 2015 to 2024. Five energy sources are represented: Coal (dark blue, bottom), Natural Gas (yellow/gold), Wind (bright green), Solar (magenta/pink), and Hydro (olive green, top). The chart clearly shows Coal declining from ~40% to ~22%, while renewable sources (Wind, Solar) grow over time. Natural Gas remains relatively stable around 30-32%. The title "area-stacked-percent · plotly · pyplots.ai" is centered at the top. A horizontal legend sits above the plot area. The Y-axis shows "Market Share (%)" with percentage suffixes (0%-100%), and the X-axis shows "Year" (2015-2024). The layout uses a clean white background with subtle gridlines.

Quality Score: 92/100

Criteria Checklist

Visual Quality (37/40 pts)

• VQ-01: Text Legibility (10/10) - Title at 28pt, axis labels at 22pt, ticks at 18pt - all perfectly readable
• VQ-02: No Overlap (8/8) - No overlapping text elements anywhere
• VQ-03: Element Visibility (8/8) - Stacked areas are clearly visible with good fill colors
• VQ-04: Color Accessibility (4/5) - Colors are distinguishable but the olive green (Hydro) and bright green (Wind) could be confused by some colorblind users
• VQ-05: Layout Balance (5/5) - Plot fills canvas well with balanced margins, legend positioned cleanly above
• VQ-06: Axis Labels (2/2) - Y-axis has "Market Share (%)" with units, X-axis has "Year"
• VQ-07: Grid & Legend (0/2) - Grid is subtle (alpha 0.1), but legend order is reversed from visual stacking order (Hydro shown first in legend but appears at top of stack)

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct 100% stacked area chart
• SC-02: Data Mapping (5/5) - X=time (years), Y=percentages correctly stacked
• SC-03: Required Features (5/5) - Normalized to 100%, shows proportional changes over time
• SC-04: Data Range (3/3) - Y-axis 0-100%, X-axis covers all years
• SC-05: Legend Accuracy (2/2) - All 5 categories correctly labeled
• SC-06: Title Format (2/2) - Uses exact format: "area-stacked-percent · plotly · pyplots.ai"

Data Quality (20/20 pts)

• DQ-01: Feature Coverage (8/8) - Shows multiple categories with varying trends (declining Coal, growing renewables, stable Gas)
• DQ-02: Realistic Context (7/7) - Energy source market share is a real, neutral, comprehensible scenario
• DQ-03: Appropriate Scale (5/5) - Percentages are realistic for energy mix evolution

Code Quality (10/10 pts)

• CQ-01: KISS Structure (3/3) - Simple linear structure: imports → data → plot → save
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - Only numpy and plotly.graph_objects used
• CQ-04: No Deprecated API (1/1) - Uses current Plotly API
• CQ-05: Output Correct (1/1) - Saves as plot.png and plot.html

Library Features (5/5 pts)

• LF-01: Uses distinctive library features (5/5) - Uses stackgroup with groupnorm="percent", hovertemplate for custom tooltips, update_layout with comprehensive styling, and generates interactive HTML output

Strengths

• Excellent use of Plotly's stackgroup with groupnorm="percent" for proper 100% stacking
• Clean, professional visual appearance with well-sized fonts
• Realistic energy market share scenario that tells a coherent story (energy transition)
• Good use of hovertemplate for informative tooltips
• Both PNG and HTML outputs generated for interactivity
• Proper normalization logic in the data preparation

Weaknesses

• Legend order is reversed from the visual stacking order (Hydro appears first in legend but is at the top of the stack visually) - minor UX issue
• Two green shades (Hydro olive #66A61E and Wind bright #4DAF4A) may be difficult to distinguish for some colorblind users

Verdict: APPROVED