feat(altair): implement network-directed

[github-actions]

Implementation: network-directed - altair

Implements the altair version of network-directed.

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

Parent Issue: #2858

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a directed network graph of software package dependencies. Nodes are colored circles representing different module types: blue (main: App), yellow (core: Router, Middleware, API, Auth, Database), cyan (service: Cache), gray (util: Utils, Logger, Config), and coral/red (data: Models, Schemas). Each node has a label positioned above it. Directed edges are shown as gray lines with triangular arrowheads indicating dependency direction. The layout is hierarchical from left (App) to right (Config). The title reads "network-directed · altair · pyplots.ai" with subtitle "Software Package Dependencies". A legend in the top-right shows Module Type categories. The overall layout is clean with good use of the canvas space.

Quality Score: 87/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (8/10) - Text is readable but labels could be larger for optimal clarity at full resolution
• VQ-02: No Overlap (8/8) - No overlapping text or elements
• VQ-03: Element Visibility (8/8) - Nodes and arrows are well-sized and clearly visible
• VQ-04: Color Accessibility (5/5) - Good colorblind-safe palette with distinct hues
• VQ-05: Layout Balance (4/5) - Good layout but some empty space on right side
• VQ-06: Axis Labels (2/2) - N/A for network graph, axes correctly hidden
• VQ-07: Grid & Legend (1/2) - Legend well-placed but could be closer to the graph

Spec Compliance (23/25 pts)

• SC-01: Plot Type (8/8) - Correct directed network graph
• SC-02: Data Mapping (5/5) - Nodes and edges correctly mapped
• SC-03: Required Features (4/5) - Has direction arrows, node groups, labels; could use curved edges for bidirectional clarity
• SC-04: Data Range (3/3) - All nodes and connections visible
• SC-05: Legend Accuracy (2/2) - Legend correctly shows module types
• SC-06: Title Format (2/2) - Correct format: network-directed · altair · pyplots.ai

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (6/8) - Shows hierarchical dependencies well, but no bidirectional edges to demonstrate curved edge feature mentioned in spec
• DQ-02: Realistic Context (7/7) - Excellent realistic software package dependency scenario
• DQ-03: Appropriate Scale (5/5) - 12 nodes is appropriate for clear visualization

Code Quality (10/10 pts)

• CQ-01: KISS Structure (3/3) - Clean linear structure with data, layout calculation, and chart creation
• CQ-02: Reproducibility (3/3) - np.random.seed(42) present
• CQ-03: Clean Imports (2/2) - Only necessary imports
• CQ-04: No Deprecated API (1/1) - Using current Altair 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) - Excellent use of Altair's declarative grammar: layered charts, mark_rule for edges, mark_point with angle encoding for arrows, color scales with legends

Strengths

• Excellent implementation of directed network graph using Altair's declarative approach with layered charts
• Smart hierarchical layout algorithm that positions nodes based on dependency depth
• Clean arrow implementation using triangular points with angle encoding
• Good color scheme with distinct colors for each module type
• Proper use of tooltips for interactivity

Weaknesses

• Node labels (fontSize=14) could be slightly larger (16-18) for better legibility at full resolution
• Data does not include bidirectional edges to demonstrate curved edge handling mentioned in spec

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 directed network graph visualizing software package dependencies. The layout is hierarchical, flowing left-to-right with "App" on the far left as the root node, progressing through middleware/router/api layers to utility nodes like "Logger" and "Config" on the right. There are 12 circular nodes color-coded by module type: blue (main: App), yellow (core: Router, API, Auth, Database, Middleware), cyan (service: Cache), gray (util: Utils, Logger, Config), and red (data: Models, Schemas). Directed edges are drawn as gray lines with triangular arrow heads indicating dependency direction. The title reads "network-directed · altair · pyplots.ai" with a subtitle explaining "Software Package Dependencies (curved edges show bidirectional dependencies)". A legend labeled "Module Type" appears in the upper right showing the 5 category colors. Node labels appear above each circle in bold black text.

Quality Score: 90/100

Criteria Checklist

Visual Quality (35/40 pts)

• VQ-01: Text Legibility (9/10) - Title (28pt), subtitle (18pt), and node labels (18pt) are clearly readable. Legend text is appropriately sized.
• VQ-02: No Overlap (8/8) - No overlapping text; labels positioned above nodes with good spacing
• VQ-03: Element Visibility (7/8) - Nodes are appropriately sized (800), arrows visible with triangular markers (size 150). Edge lines slightly thin but visible.
• VQ-04: Color Accessibility (5/5) - Five distinct colors that are colorblind-safe (blue, yellow, cyan, gray, red) - no red-green confusion issues
• VQ-05: Layout Balance (4/5) - Good hierarchical layout utilizing ~60% of canvas, slight imbalance with more whitespace at bottom
• [N/A] VQ-06: Axis Labels (2/2) - N/A for network graphs (no axes)
• VQ-07: Grid & Legend (2/2) - No grid (appropriate for network), legend well-placed in upper right with clear labels

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct directed network graph with nodes and directed edges
• SC-02: Data Mapping (5/5) - Nodes correctly represent entities, edges show directed dependencies from source to target
• SC-03: Required Features (5/5) - Has directed arrows, node grouping by color, hierarchical layout, curved edges for bidirectional connections as spec suggests
• SC-04: Data Range (3/3) - All 12 nodes and 24 edges visible and within bounds
• SC-05: Legend Accuracy (2/2) - Legend correctly maps Module Type categories to colors
• SC-06: Title Format (2/2) - Uses correct format: "network-directed · altair · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows directed edges, bidirectional pairs with curves, hierarchical structure, node grouping. Minor: could show edge weights via thickness
• DQ-02: Realistic Context (7/7) - Software package dependencies is a perfect, realistic, neutral example for directed graphs
• DQ-03: Appropriate Scale (4/5) - 12 nodes is appropriate for static visualization (spec says 10-50). Good number of edges (24) showing realistic dependency patterns

Code Quality (9/10 pts)

• CQ-01: KISS Structure (2/3) - Follows imports → data → plot → save pattern, but has significant computation logic for layout/curves (necessary for network graphs)
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - Only altair, numpy, pandas imported and all used
• CQ-04: No Deprecated API (1/1) - Uses current Altair 5.x/6.x API
• CQ-05: Output Correct (1/1) - Saves as plot.png and plot.html

Library Features (3/5 pts)

• LF-01: Distinctive Features (3/5) - Uses Altair's declarative encoding, layered charts, tooltips, and angle encoding for arrow rotation. However, doesn't leverage Altair's interactivity (selection, zoom/pan) which would enhance network exploration.

Strengths

• Excellent hierarchical layout algorithm that calculates node depths based on topological ordering
• Clever handling of bidirectional edges using curved bezier paths to avoid overlap
• Clean color palette with five distinct, colorblind-safe colors for module groupings
• Proper use of Altair's layered chart composition (edges + curved edges + arrows + nodes + labels)
• Thoughtful arrow positioning using angle encoding for correct orientation along edges
• Interactive tooltips showing node label and group on hover

Weaknesses

• Edge lines are relatively thin (strokeWidth=2) making some dependency paths harder to follow in the dense central area
• Layout results in vertical clustering at certain depth levels (e.g., 5 nodes at depth 2) creating visual congestion
• Does not utilize Altair's built-in interactivity features like selection highlighting or zoom/pan that would help explore the network

Verdict: APPROVED