feat(plotly): implement pie-drilldown

[github-actions]

Implementation: pie-drilldown - plotly

Implements the plotly version of pie-drilldown.

File: plots/pie-drilldown/implementations/plotly.py

Parent Issue: #3072

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a donut-style pie chart showing "Company Budget FY 2024" with four department slices: Engineering (blue, 37.1%), Sales (orange, 22.6%), Operations (green, 20.5%), and Marketing (yellow, 19.8%). The title "pie-drilldown · plotly · pyplots.ai" appears at the top. A breadcrumb "📍 All Departments" is shown in the upper left corner with a red pin emoji. The center of the donut contains "Company Budget FY 2024" text. An instruction "👆 Click any slice to drill down into subcategories" appears at the bottom. Labels with percentages are positioned outside each slice. A legend titled "Departments" appears on the right side. The slices have slight separation (pull effect) and white borders between them.

Quality Score: 87/100

Criteria Checklist

Visual Quality (35/40 pts)

• VQ-01: Text Legibility (9/10) - Title 28pt, labels 20pt, all readable. Slightly smaller than optimal for some elements.
• VQ-02: No Overlap (8/8) - No overlapping text, labels positioned outside cleanly
• VQ-03: Element Visibility (8/8) - Pie slices well-sized with good separation, donut hole appropriate
• VQ-04: Color Accessibility (4/5) - Good distinct colors (blue, orange, green, yellow) but yellow/orange could be difficult for some colorblind users
• VQ-05: Layout Balance (4/5) - Good use of canvas, pie is well-centered, but legend has some extra whitespace
• VQ-06: Axis Labels (N/A) - Not applicable for pie chart (0/0)
• VQ-07: Grid & Legend (2/2) - Legend well-placed on right, titled appropriately

Spec Compliance (21/25 pts)

• SC-01: Plot Type (8/8) - Correct pie chart with hierarchical structure for drilldown
• SC-02: Data Mapping (5/5) - Values correctly mapped to slice sizes
• SC-03: Required Features (3/5) - Has breadcrumb text, click instruction, and JS for HTML drilldown. BUT: static PNG cannot show animated transitions or actual drilldown; the JS is only functional in HTML output
• SC-04: Data Range (3/3) - All categories shown, percentages sum to ~100%
• SC-05: Legend Accuracy (0/2) - Legend shows departments but order doesn't match visual ordering (Engineering, Sales, Operations, Marketing in legend vs clockwise from top)
• SC-06: Title Format (2/2) - Correct format: "pie-drilldown · plotly · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows hierarchical structure with 4 departments, each having 3-4 subcategories. Good variety but static PNG can't demonstrate the drilldown feature
• DQ-02: Realistic Context (7/7) - Company budget breakdown is an excellent, neutral, realistic scenario
• DQ-03: Appropriate Scale (4/5) - Budget values are realistic ($180K-$850K range), though exact figures are somewhat arbitrary

Code Quality (8/10 pts)

• CQ-01: KISS Structure (1/3) - Code is relatively clean but has some complexity with hierarchy pre-computation and JS injection
• CQ-02: Reproducibility (3/3) - Deterministic data (no random seed needed)
• CQ-03: Clean Imports (2/2) - Only necessary imports
• 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: Distinctive Features (5/5) - Excellent use of Plotly's interactive capabilities: hover templates, donut hole annotation, HTML output with custom JavaScript for drilldown functionality

Strengths

• Excellent choice of realistic budget data context with clear hierarchy (All → Departments → Teams)
• Good use of Plotly's donut style with center annotation for context
• Well-implemented breadcrumb and click instruction UI elements
• Colorblind-friendly palette with distinct hues for main categories
• Includes both PNG (static) and HTML (interactive with drilldown JS) outputs
• Clean hover templates showing value, percentage, and drill-down hint

Weaknesses

• Legend order doesn't match the visual clockwise ordering of slices
• Yellow (Marketing) and orange (Sales) colors are somewhat close for certain colorblind types
• The JS drilldown implementation is injected as a string which is fragile; minor syntax issues could break functionality

Verdict: REJECTED

The implementation is solid at 87/100 but falls short of the 90-point threshold for immediate approval. The main issues are the legend ordering mismatch and minor color accessibility concerns. The core visualization and interactive functionality are well-implemented.

[github-actions]

🔧 Repair Attempt 1/3

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

A donut-style pie chart displaying a company budget breakdown for FY 2024 across four departments. The chart uses a colorblind-safe palette: Engineering (blue, 37.1%), Marketing (purple, 19.8%), Operations (green, 20.5%), and Sales (red-orange, 22.6%). The title "pie-drilldown · plotly · pyplots.ai" appears centered at the top. A breadcrumb indicator "📍 All Departments" is positioned in the top-left corner. Each slice is slightly pulled out with white borders separating them. Labels with department names and percentages are positioned outside the slices using connector lines. The center displays "Company Budget FY 2024". A legend titled "Departments" is placed on the right side. At the bottom, instructional text "👆 Click any slice to drill down into subcategories" guides users on interaction.

Quality Score: 91/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (9/10) - Title 28pt, labels 20pt, all clearly readable. Minor: annotation text could be slightly larger
• VQ-02: No Overlap (6/8) - Minor overlap between "All Departments" breadcrumb and "Marketing" label at top-left
• VQ-03: Element Visibility (8/8) - Pie slices well-sized, donut hole appropriate, slight pull effect enhances visibility
• VQ-04: Color Accessibility (5/5) - Excellent colorblind-safe palette (blue, purple, green, red-orange) with good contrast
• VQ-05: Layout Balance (5/5) - Chart well-centered, good use of canvas space, legend properly positioned
• VQ-06: Axis Labels (N/A for pie) - Using percentage labels on slices (2/2)
• VQ-07: Grid & Legend (1/2) - Legend well placed but no grid (expected for pie charts)

Spec Compliance (23/25 pts)

• SC-01: Plot Type (8/8) - Correct pie/donut chart with drilldown concept
• SC-02: Data Mapping (5/5) - Values correctly mapped to slice sizes
• SC-03: Required Features (4/5) - Has breadcrumb, click instruction, animated transitions (in HTML), but static PNG shows only top level. Missing visual indicator (cursor change) shown only in HTML
• SC-04: Data Range (3/3) - All data visible, percentages sum to ~100%
• SC-05: Legend Accuracy (2/2) - Legend correctly matches slice colors and labels
• SC-06: Title Format (1/2) - Correct format but lowercase "plotly" (minor)

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows hierarchical budget data with 4 departments and subcategories defined. Static image only shows top level
• DQ-02: Realistic Context (7/7) - Company budget breakdown is a perfect real-world scenario for drilldown charts
• DQ-03: Appropriate Scale (4/5) - Budget values are realistic ($180K-$850K range), though some subcategory values seem slightly arbitrary

Code Quality (9/10 pts)

• CQ-01: KISS Structure (3/3) - Clean linear structure: imports → data → plot → save
• CQ-02: Reproducibility (3/3) - Deterministic data (no randomness)
• CQ-03: Clean Imports (2/2) - Only json and plotly.graph_objects used
• CQ-04: No Deprecated API (1/1) - Using current Plotly API
• CQ-05: Output Correct (0/1) - Saves both plot.png and plot.html (correct for interactive library)

Library Features (5/5 pts)

• LF-01: Uses distinctive library features (5/5) - Excellent use of Plotly-specific features: hover templates, annotations, donut chart with hole, animated transitions via JavaScript injection, HTML export with interactivity

Strengths

• Excellent use of Plotly's interactive capabilities with custom JavaScript for drilldown navigation
• Professional colorblind-safe color scheme with consistent subcategory shades
• Robust JSON serialization for data passing to JavaScript (no fragile string replacement)
• Clear breadcrumb navigation and user instructions
• Clean donut style with center annotation adds modern aesthetic
• Dual output (PNG + HTML) maximizes utility

Weaknesses

• Minor text overlap between breadcrumb annotation and Marketing slice label in top-left area
• Static PNG cannot demonstrate the drilldown functionality - consider adjusting breadcrumb position to avoid overlap

Verdict: APPROVED