feat(plotly): implement circos-basic

[github-actions]

Implementation: circos-basic - plotly

Implements the plotly version of circos-basic.

File: plots/circos-basic/implementations/plotly.py

Parent Issue: #3005

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot shows a Circos-style circular visualization displaying regional trade flows between 8 world regions. The outer ring consists of colored arc segments representing each region: North America (dark blue), Europe (golden yellow), East Asia (red), South America (green), Africa (purple), Middle East (orange), South Asia (teal), and Oceania (light blue). Each segment is proportionally sized based on economic importance. Inside the outer ring, there is an inner track showing GDP index values as bar heights in matching colors. Curved ribbons connect different segments through the center, representing trade flow relationships between regions, with ribbon widths proportional to trade volume. The title "Regional Trade Flows · circos-basic · plotly · pyplots.ai" appears at the top. A horizontal legend at the bottom identifies all 8 regions with their colors.

Quality Score: 88/100

Criteria Checklist

Visual Quality (35/40 pts)

• VQ-01: Text Legibility (8/10) - Title is clear at size 28, segment labels readable but some labels (Middle East, South America) are slightly cramped due to rotation
• VQ-02: No Overlap (8/8) - No overlapping text, all labels positioned outside the ring with proper spacing
• VQ-03: Element Visibility (7/8) - Segments, ribbons, and inner track bars are all visible; some smaller ribbons could be slightly more prominent
• VQ-04: Color Accessibility (4/5) - Good distinct colors, though Africa (purple) and South Asia (teal) could have slightly more contrast
• VQ-05: Layout Balance (5/5) - Plot is well-centered, uses canvas space effectively, legend positioned cleanly at bottom
• VQ-06: Axis Labels (2/2) - N/A for circos plots; segment labels are descriptive and clear
• VQ-07: Grid & Legend (1/2) - Legend is well-placed horizontally; no grid needed but legend font could be slightly larger

Spec Compliance (23/25 pts)

• SC-01: Plot Type (8/8) - Correct Circos plot with circular layout, segments, and ribbons
• SC-02: Data Mapping (5/5) - Source/target relationships properly shown via ribbons, segment sizes proportional to data
• SC-03: Required Features (4/5) - Has outer segments, connecting ribbons, and inner track; gaps between segments present; ribbon width proportional to values
• SC-04: Data Range (3/3) - All 8 regions visible with appropriate proportions
• SC-05: Legend Accuracy (2/2) - Legend correctly identifies all 8 regions with matching colors
• SC-06: Title Format (1/2) - Title includes spec-id, library, and pyplots.ai but adds "Regional Trade Flows" prefix instead of using spec-id as title

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows segments of varying sizes, multiple connection strengths, inner track variation; could show more bidirectional flow distinction
• DQ-02: Realistic Context (7/7) - Trade flows between world regions is an excellent, realistic application
• DQ-03: Appropriate Scale (4/5) - Values are plausible; segment sizes and connection strengths are reasonable

Code Quality (9/10 pts)

• CQ-01: KISS Structure (3/3) - Linear script 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 imported, both used
• CQ-04: No Deprecated API (1/1) - Uses current Plotly API
• CQ-05: Output Correct (0/1) - Saves as plot.png but also saves plot.html (acceptable for plotly)

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Uses go.Scatter with fill, annotations, and saves interactive HTML; however, could better leverage Plotly's hover customization or animation capabilities

Strengths

• Excellent implementation of Circos visualization using only basic Plotly primitives (Scatter with fill)
• Creative use of Bezier curves for ribbon connections through the center
• Includes both outer ring segments and inner track for additional data layer (GDP index)
• Good color palette with 8 distinct colors for regions
• Proper proportional sizing of segments based on economic importance
• Interactive HTML output included alongside PNG

Weaknesses

• Title format should be "{spec-id} · {library} · pyplots.ai" not "Regional Trade Flows · circos-basic · plotly · pyplots.ai"
• Some segment labels appear slightly cramped due to text rotation (especially Middle East, South America)
• Ribbon colors only use source segment color; could blend source/target colors for better visual connection indication

Verdict: REJECTED

The implementation is very good overall at 88/100, just 2 points below the 90 threshold. The main issues are the title format deviation and minor visual polish items that can be easily addressed in the repair cycle.

[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

The plot displays a Circos visualization showing regional trade flows between 8 world regions. The outer ring contains colored arc segments for North America (dark blue), Europe (golden yellow), East Asia (red), South America (green), Africa (purple), Middle East (orange), South Asia (teal), and Oceania (light blue). Each segment is proportionally sized based on economic importance. Curved ribbon connections pass through the center, using blended colors from source and target segments (addressing the previous feedback). An inner track displays GDP index values as bar heights using the same color scheme. Labels are positioned around the outer edge with adaptive text anchoring. A horizontal legend at the bottom identifies all regions. The title reads "Regional Trade Flows · circos-basic · plotly · pyplots.ai" - note this still includes an extra descriptor before the spec-id.

Quality Score: 90/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (9/10) - Title and labels readable, font size adequate at 16pt for segment labels
• VQ-02: No Overlap (7/8) - Minor cramping on "Middle East" and "Africa" labels due to proximity, but still readable
• VQ-03: Element Visibility (8/8) - Segments, ribbons, and inner track all clearly visible with good sizing
• VQ-04: Color Accessibility (5/5) - 8 distinct colors, well differentiated, no red-green confusion
• VQ-05: Layout Balance (5/5) - Good canvas utilization, plot fills substantial area, balanced margins
• VQ-06: Axis Labels (0/2) - N/A for circular plot, no axis labels needed (deducting 0 as circular plots don't have axes)
• VQ-07: Grid & Legend (2/2) - Legend well positioned horizontally at bottom, clean without grid

Spec Compliance (24/25 pts)

• SC-01: Plot Type (8/8) - Correct Circos plot with segments, ribbons, and inner track
• SC-02: Data Mapping (5/5) - Source/target connections correctly mapped as ribbons, values determine width
• SC-03: Required Features (5/5) - Has segments, ribbons, inner track, gaps, proportional sizing
• SC-04: Data Range (3/3) - All 8 segments visible with all connections shown
• SC-05: Legend Accuracy (2/2) - All 8 regions correctly listed with matching colors
• SC-06: Title Format (1/2) - Title includes extra "Regional Trade Flows" prefix, should be just "circos-basic · plotly · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows segment sizing, ribbons, inner track; ribbon widths vary appropriately
• DQ-02: Realistic Context (7/7) - Trade flows between world regions is excellent real-world application
• DQ-03: Appropriate Scale (4/5) - Trade values reasonable; segment sizes proportional to economic importance

Code Quality (8/10 pts)

• CQ-01: KISS Structure (1/3) - Has helper function blend_colors() which deviates from pure KISS style
• CQ-02: Reproducibility (3/3) - np.random.seed(42) set properly
• CQ-03: Clean Imports (2/2) - Only numpy and plotly.graph_objects imported
• 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 (4/5 pts)

• LF-01: Uses distinctive library features (4/5) - Good use of Scatter with fill='toself' for shapes, interactive HTML output, but could leverage more Plotly-specific features

Strengths

• Excellent implementation of Circos visualization using Plotly Scatter with fill='toself' for complex shapes
• Ribbon colors now properly blend source and target segment colors (addressed previous feedback)
• Includes inner track for additional data layer (GDP index) as specified
• Good interactive HTML output alongside PNG export
• Well-chosen color palette with 8 distinct, accessible colors
• Proper proportional sizing of segments based on economic importance
• Adaptive label positioning based on angle to minimize overlap

Weaknesses

• Title format still includes extra descriptor: should be "circos-basic · plotly · pyplots.ai" not "Regional Trade Flows · circos-basic · plotly · pyplots.ai"
• Helper function blend_colors() violates strict KISS principle (imports → data → plot → save)

Verdict: APPROVED