feat(plotly): implement network-directed

[github-actions]

Implementation: network-directed - plotly

Implements the plotly version of network-directed.

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

Parent Issue: #2858

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a directed network graph showing software module dependencies. 13 nodes are arranged in a circular layout, each containing a module name (main, api, auth, database, models, utils, config, logging, cache, router, middleware, validators, schemas). Nodes are color-coded by group: Python Blue (#306998) for Entry (main), Python Yellow (#FFD43B) for Core modules (api, auth, database, cache, router, middleware), Teal (#4ECDC4) for Data modules (models, validators, schemas), and Gray (#95A5A6) for Helpers (utils, config, logging). Directed edges connect nodes with gray lines and visible arrowheads pointing toward the target node. The title reads "Software Module Dependencies · network-directed · plotly · pyplots.ai" at the top. A legend titled "Module Groups" appears on the right side listing Entry, Core, Data, and Helpers with their respective colors.

Quality Score: 91/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (9/10) - Title and legend text are clear and readable; node labels are legible but some ("middleware", "validators", "schemas") are slightly cramped within nodes
• VQ-02: No Overlap (8/8) - No overlapping text; nodes well-spaced in circular layout
• VQ-03: Element Visibility (7/8) - Nodes and edges are clearly visible; arrows are appropriately sized; some edges cross through center making paths harder to trace
• VQ-04: Color Accessibility (5/5) - Four distinct colors (blue, yellow, teal, gray) are colorblind-safe with good contrast
• VQ-05: Layout Balance (5/5) - Circular layout is centered, good use of canvas space, legend positioned appropriately
• VQ-06: Axis Labels (0/2) - Not applicable for network graphs (no axes)
• VQ-07: Grid & Legend (2/2) - No grid (appropriate), legend is well-styled with title and clear entries

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct directed network graph with visible arrow direction
• SC-02: Data Mapping (5/5) - Nodes and edges correctly mapped; arrows point from source to target
• SC-03: Required Features (5/5) - Has nodes with IDs/labels, directed edges with arrows, group coloring
• SC-04: Data Range (3/3) - All 13 nodes visible, all 19 edges displayed
• SC-05: Legend Accuracy (2/2) - Legend correctly shows all four module groups
• SC-06: Title Format (2/2) - Correctly formatted as "Software Module Dependencies · network-directed · plotly · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows directed edges, node grouping, and asymmetric relationships; could benefit from bidirectional edges to demonstrate the curved edge handling mentioned in spec
• DQ-02: Realistic Context (7/7) - Software module dependency is a perfect real-world scenario matching spec example
• DQ-03: Appropriate Scale (4/5) - 13 nodes is within recommended 10-50 range; dependency relationships are realistic

Code Quality (9/10 pts)

• CQ-01: KISS Structure (3/3) - Clean linear structure: imports → data → layout → figure → traces → save
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• 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 (0/1) - Saves as plot.png but also creates plot.html (which is fine for plotly)

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Uses go.Scatter and annotations for arrows; could leverage hover interactivity more; HTML export demonstrates interactive capability

Strengths

• Excellent circular layout algorithm that positions nodes evenly and prevents overlap
• Clear arrow direction implementation using Plotly annotations with appropriate sizing
• Well-chosen color scheme that distinguishes module groups effectively and is colorblind-accessible
• Good use of Plotly's hover template for interactive exploration
• Title follows the exact spec-id format required
• Realistic software dependency scenario that matches the spec example perfectly

Weaknesses

• Some longer node labels (middleware, validators, schemas) appear slightly cramped within their circular markers
• The graph does not include bidirectional edges to demonstrate curved edge handling mentioned in spec notes

Verdict: APPROVED