feat(plotly): implement network-weighted

[github-actions]

Implementation: network-weighted - plotly

Implements the plotly version of network-weighted.

File: plots/network-weighted/implementations/plotly.py

Parent Issue: #3290

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a weighted network graph showing international trade relationships between 15 countries. Nodes are rendered as yellow circles with blue borders, sized proportionally to their weighted degree (total trade volume). The USA and China nodes are the largest, indicating their central roles in global trade. Edges vary in thickness based on trade volume in billions USD - the thickest connections are USA-Canada ($620B), USA-Mexico ($550B), and USA-China (~$580B). The layout uses a force-directed algorithm that positions strongly connected nodes closer together. Labels appear above each node in gray text. The title 'network-weighted · plotly · pyplots.ai' is centered at the top. An annotation explaining the edge thickness scale appears in the bottom-right corner but is partially cut off.

Quality Score: 81/100

Criteria Checklist

Visual Quality (31/40)

• VQ-01: Text Legibility (7/10) - Title and most labels readable, but some labels are small relative to the canvas size
• VQ-02: No Overlap (4/8) - Japan and S. Korea labels overlap; Italy/France labels are very close
• VQ-03: Element Visibility (8/8) - Nodes and edges well-sized for the data density, clear visual hierarchy
• VQ-04: Color Accessibility (5/5) - Blue edges with yellow nodes provide good contrast; colorblind-safe
• VQ-05: Layout Balance (3/5) - Network is positioned in upper-right quadrant leaving large empty space in lower-left; annotation cut off
• VQ-06: Axis Labels (2/2) - N/A for network graphs, axes correctly hidden
• VQ-07: Grid & Legend (2/2) - No grid (appropriate), annotation explains weight scale

Spec Compliance (23/25)

• SC-01: Plot Type (8/8) - Correct weighted network graph with edge thickness encoding
• SC-02: Data Mapping (5/5) - Edges correctly map weight to thickness, nodes sized by weighted degree
• SC-03: Required Features (5/5) - All spec features present: weighted edges, node sizing, force-directed layout, weight annotation
• SC-04: Data Range (3/3) - All nodes and edges visible within canvas
• SC-05: Legend Accuracy (0/2) - Weight scale annotation is partially cut off (shows '$35B → Thick:' instead of full text)
• SC-06: Title Format (2/2) - Uses correct format 'network-weighted · plotly · pyplots.ai'

Data Quality (18/20)

• DQ-01: Feature Coverage (7/8) - Shows strong vs weak connections, hub nodes, geographic clustering; could show more isolated nodes
• DQ-02: Realistic Context (7/7) - Trade network with real country names and plausible trade volumes
• DQ-03: Appropriate Scale (4/5) - Trade values are realistic (35B-620B USD range), though some smaller routes may be underrepresented

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Follows imports → data → plot → save structure, no functions/classes
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - Only numpy and plotly 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)

• LF-01: Uses distinctive library features (4/5) - Good use of Plotly's hover tooltips, trace-based rendering, and HTML export; could leverage more interactive features

Strengths

• Excellent implementation of force-directed layout algorithm from scratch
• Good visual encoding with edge thickness proportional to trade weight
• Node sizing by weighted degree adds additional information layer
• Hover tooltips provide interactive detail on trade volumes
• Clean, professional color scheme (Python-branded yellow/blue)
• Realistic trade data scenario with plausible values

Weaknesses

• Weight scale annotation in bottom-right is cut off, making it unreadable
• Some node label overlap (Japan/S. Korea region)
• Network positioned asymmetrically with large empty space in lower-left quadrant
• Could center the network better within the canvas

Verdict: REJECTED

[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 weighted network graph representing international trade flows between 15 countries. Nodes are rendered as yellow circles with blue (#306998) outlines, sized proportionally to their weighted degree (total trade volume). USA and China appear as the largest nodes, correctly reflecting their status as major trade hubs. Edges connecting countries vary in thickness and opacity based on trade volume in billions USD - the thickest, darkest edges connect USA-Canada, USA-Mexico, and USA-China, representing the highest trade volumes. The layout uses a force-directed algorithm positioning countries with strong trade links closer together. Labels are placed around nodes using smart positioning logic. The title "network-weighted · plotly · pyplots.ai" is centered at the top. An annotation box in the bottom-right corner attempts to explain the edge thickness scale but is partially cut off, showing only "35B → Thick:" instead of the full legend text.

Quality Score: 81/100

Criteria Checklist

Visual Quality (32/40 pts)

• VQ-01: Text Legibility (8/10) - Most text readable, but some labels could be larger for optimal viewing
• VQ-02: No Overlap (4/8) - Minor overlap between "Japan" and "S. Korea" labels; "Italy" and "France" labels are very close
• VQ-03: Element Visibility (8/8) - Node sizes and edge thicknesses well differentiated, alpha blending helps with edge overlap
• VQ-04: Color Accessibility (5/5) - Yellow nodes with blue edges are colorblind-safe, edge opacity gradient is distinguishable
• VQ-05: Layout Balance (3/5) - Network is somewhat right-heavy with most nodes clustered on right side; annotation box is cut off on the right edge
• VQ-06: Axis Labels (2/2) - N/A for network graphs, but annotation provides context - awarded full points
• VQ-07: Grid & Legend (2/2) - Clean white background, no distracting grid (appropriate for network graph)

Spec Compliance (23/25 pts)

• SC-01: Plot Type (8/8) - Correct weighted network graph with edge thickness representing weight
• SC-02: Data Mapping (5/5) - Countries as nodes, trade relationships as edges, volume as weight
• SC-03: Required Features (4/5) - Has weighted edges, node sizing by degree, legend annotation. Missing: legend is cut off so scale is not fully visible
• SC-04: Data Range (3/3) - All 15 countries and 29 edges visible
• SC-05: Legend Accuracy (2/2) - Annotation attempts to explain the scale
• SC-06: Title Format (2/2) - Correctly uses "network-weighted · plotly · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (6/8) - Shows major trade hubs (USA, China), varying edge weights, different connection densities. Could show more isolated/peripheral nodes
• DQ-02: Realistic Context (7/7) - International trade network with plausible trade volumes in billions USD
• DQ-03: Appropriate Scale (5/5) - Trade values ($35B-$620B) are realistic for major trading partners

Code Quality (10/10 pts)

• CQ-01: KISS Structure (3/3) - Clean linear structure: imports → data → layout calculation → plotting → save
• CQ-02: Reproducibility (3/3) - np.random.seed(42) set at the beginning
• 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: Distinctive Features (4/5) - Uses Plotly's interactive hover tooltips, HTML export. Could leverage more advanced features like animated transitions

Strengths

• Excellent implementation of force-directed layout algorithm with weight-influenced attraction
• Smart label positioning algorithm to minimize overlaps
• Good use of alpha blending for edges to show overlap
• Hover tooltips provide detailed trade information
• Node sizing by weighted degree adds information density
• Clean, professional color scheme (yellow/blue Python colors)
• Both PNG and HTML outputs generated

Weaknesses

• Annotation box is cut off on the right edge - the legend explaining edge thickness scale is truncated, showing only partial text "35B → Thick:" instead of the full explanation
• Minor label overlaps between Japan/S. Korea and Italy/France areas
• Network layout is asymmetric with most nodes clustered on the right side

Verdict: APPROVED

[github-actions]

🔧 Repair Attempt 2/3

Applied fixes based on AI review feedback.

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

---

🤖 impl-repair

[claude]

AI Review - Attempt 3/3

Image Description

The plot displays a weighted network graph of international trade relationships between 15 countries. Nodes are represented as yellow circular markers with dark blue (#306998) borders, sized proportionally to their weighted degree (total trade volume). USA and China appear as the largest nodes, reflecting their position as major trade hubs.

Edges connect trading partners with varying thickness representing trade volume in billions of USD. The thickest edges (dark blue, high opacity) connect USA-Canada (~620B), USA-Mexico (~550B), and USA-China (~580B), clearly visible as prominent thick lines. Thinner, more transparent edges represent smaller trade relationships like Spain-Italy (50B) and India-UK (35B).

The title "network-weighted · plotly · pyplots.ai" is centered at the top in dark gray text (size 28). A legend box in the top-left corner explains "Edge Thickness = Trade Volume" with the range "35B USD (thin) to 620B USD (thick)" on a white background with subtle border.

Country labels are displayed in dark gray (#333333) with size 16 font, positioned intelligently around each node to avoid overlap. The layout uses a force-directed algorithm where high-trade partners are pulled closer together, creating a visible USA-China-Mexico-Canada cluster. European countries form a cluster on the left-center. Background is clean white with no grid lines (appropriate for network graphs).

Quality Score: 92/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (10/10) - Title at 28pt, node labels at 16pt, annotation text at 18pt - all clearly readable
• VQ-02: No Overlap (8/8) - Smart label positioning with explicit handling for close pairs prevents all text overlap
• VQ-03: Element Visibility (8/8) - Node sizes appropriately scaled by weighted degree; edge widths provide clear visual differentiation
• VQ-04: Color Accessibility (5/5) - Single blue color scheme for edges with alpha variation; yellow nodes with blue borders
• VQ-05: Layout Balance (3/5) - Network fills ~60-70% of canvas but positioned slightly right of center
• VQ-06: Axis Labels (0/2) - N/A for network graph - axes correctly hidden
• VQ-07: Grid & Legend (2/2) - No grid (appropriate for network); annotation box well-positioned

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct weighted network graph with edge thickness mapping
• SC-02: Data Mapping (5/5) - Nodes=countries, edges=trade relationships, weight=trade volume correctly mapped
• SC-03: Required Features (5/5) - All spec features present: edge thickness, node sizing by weighted degree, weight scale annotation, force-directed layout
• SC-04: Data Range (3/3) - All 15 nodes and 29 edges visible within plot bounds
• SC-05: Legend Accuracy (2/2) - Weight scale annotation accurately describes edge thickness range
• SC-06: Title Format (2/2) - Uses exact format: network-weighted · plotly · pyplots.ai

Data Quality (20/20 pts)

• DQ-01: Feature Coverage (8/8) - Shows full range: high-weight edges, medium, and low; large hubs vs peripheral nodes
• DQ-02: Realistic Context (7/7) - International trade network is real-world relevant with realistic trade relationships
• DQ-03: Appropriate Scale (5/5) - Trade values in billions USD (35B-620B) are realistic for major bilateral trade flows

Code Quality (10/10 pts)

• CQ-01: KISS Structure (3/3) - Follows imports → data → layout → traces → figure → save structure
• CQ-02: Reproducibility (3/3) - np.random.seed(42) ensures reproducible layout

Library Features (5/5 pts)

• LF-01: Uses distinctive Plotly features - hover tooltips, individual edge traces, annotations, HTML export

Strengths

• Clear edge thickness differentiation showing varying trade volumes from thin (35B) to thick (620B USD)
• Well-implemented force-directed layout with weight-influenced attraction keeping high-trade partners close
• Effective node sizing based on weighted degree - USA and China correctly appear as the largest hubs
• Smart label positioning avoids overlap through explicit handling of problematic pairs (Japan/S.Korea, Italy/France)
• Informative weight scale annotation box explaining edge thickness interpretation
• Clean data representing a realistic international trade network scenario

Weaknesses

• The network is positioned more toward the right side of the canvas, leaving significant whitespace on the left - better centering would improve layout balance

Verdict: APPROVED