feat(bokeh): implement network-bipartite

[github-actions]

Implementation: network-bipartite - python/bokeh

Implements the python/bokeh version of network-bipartite.

File: plots/network-bipartite/implementations/python/bokeh.py

Parent Issue: #5247

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1) — correct. Title "Student-Course Enrollment · network-bipartite · bokeh · anyplot.ai" renders in dark ink at 28pt in Bokeh's toolbar area (top-left). Column headers "Students" (green #009E73) and "Courses" (orange #D55E00) at 24pt bold are prominently visible. Fifteen green circles (students, left column) and twelve orange circles (courses, right column) vary in size by degree — Emma, James, and Noah have visibly larger green nodes; CS101 has the largest orange circle. Student name labels are right-aligned at 18pt in #4A4A44 (INK_SOFT); course code labels are left-aligned at the same size. Gray semi-transparent edge lines (alpha=0.30) cleanly handle the dense connection set. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17) — correct. Title text switches to light #F0EFE8 (INK token) and remains readable. Column headers retain their Okabe-Ito data colors (green #009E73, orange #D55E00) — identical to the light render as required. Student name and course code labels render in lighter #B8B7B0 (INK_SOFT dark token) and are clearly readable against the near-black background. No dark-on-dark failures observed. Data node colors are identical between renders — only chrome flips. Edge lines appear appropriately lighter gray against the dark surface.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 88/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	13	20
Spec Compliance	14	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	8	10
Total	88	100

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (title 28pt, column headers 24pt bold, labels 18pt). Readable in both themes. Node labels at 18pt are at minimum for data labels.
• VQ-02: No Overlap (6/6) — No overlapping text elements in either render; student and course labels are well-spaced.
• VQ-03: Element Visibility (6/6) — Nodes clearly visible with good degree-based size variation. Edge alpha=0.30 appropriate for connection density.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito, CVD-safe. Green and orange have sufficient luminance contrast.
• VQ-05: Layout & Canvas (3/4) — Good bipartite two-column layout. Some unused horizontal space between columns reduces canvas utilization slightly.
• VQ-06: Axis Labels & Title (2/2) — No traditional axes needed. Column headers serve as descriptive group labels; title present.
• VQ-07: Palette Compliance (2/2) — First set #009E73 (Okabe-Ito pos 1), second set #D55E00 (pos 2). Light background #FAF8F1, dark #1A1A17. Both renders theme-correct.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Above generic defaults: node sizes encode degree, colored column headers match node palette, clean bipartite structure. Missing: emphasis on hub nodes, no annotation of key insight, no visual focal point.
• DE-02: Visual Refinement (4/6) — No axes/grid/spines, white-edge node outlines for definition, appropriate edge alpha. Clean and refined, but not fully polished.
• DE-03: Data Storytelling (4/6) — Node size variation by degree creates visual hierarchy — most-connected students and courses stand out. Bipartite structure tells the enrollment story. Missing: explicit emphasis on specific insights (e.g., annotating top hub or most popular course).

Spec Compliance (14/15)

• SC-01: Plot Type (5/5) — Correct bipartite network with two-column layout; edges only cross sets.
• SC-02: Required Features (4/4) — Color by set, node size by degree, labels, edges between sets only, separated columns all present.
• SC-03: Data Mapping (3/3) — Students left, courses right, all edges correctly mapped.
• SC-04: Title & Legend (2/3) — Title "Student-Course Enrollment · network-bipartite · bokeh · anyplot.ai" has extra prefix before spec-id; should be exactly network-bipartite · bokeh · anyplot.ai. No formal legend box (colored column headers partially substitute but don't fully satisfy the criterion).

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Hub nodes, peripheral nodes, cross-set bipartite connections, degree variation in both sets all demonstrated.
• DQ-02: Realistic Context (5/5) — Student-course enrollment is a canonical, realistic, neutral bipartite use case.
• DQ-03: Appropriate Scale (4/4) — 15 students, 12 courses, 2–5 enrollments per student with weighted popular courses; realistic academic scale.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Clean imports → data → plot → save; no functions or classes.
• CQ-02: Reproducibility (2/2) — np.random.seed(42) set.
• CQ-03: Clean Imports (2/2) — All imports used.
• CQ-04: Code Elegance (2/2) — Clean, Pythonic, appropriate complexity.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.html and plot-{THEME}.png correctly.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — Correct use of figure(), segment(), scatter(), text(); Selenium-based PNG export per library guide; output_file + save pattern correct.
• LM-02: Distinctive Features (3/5) — HTML export, segment primitive for edges, vector text glyph with per-element alignment. Does not leverage HoverTool or ColumnDataSource, which would be more distinctively Bokeh.

Score Caps Applied

• None applied — all category caps clear.

Strengths

• Correct bipartite two-column layout with students on left and courses on right
• Node sizes elegantly encode degree — hubs immediately stand out visually
• Okabe-Ito correctly applied: #009E73 for set A (students), #D55E00 for set B (courses)
• Full theme adaptation: backgrounds, title, label colors all use correct theme tokens in both renders
• Reproducible with np.random.seed(42) and realistic weighted enrollment distribution
• Correct Bokeh export pattern: Selenium-based PNG screenshot as prescribed by library guide

Weaknesses

• Title format does not strictly follow {spec-id} · {library} · anyplot.ai — has "Student-Course Enrollment ·" prefix before spec-id
• No formal legend box — colored column headers partially substitute but don't fully satisfy SC-04
• No visual focal point or insight emphasis — annotating the top hub student or most popular course would raise DE-01 and DE-03
• Large unused horizontal space between node columns reduces canvas utilization (VQ-05)
• Bokeh distinctive features underused — HoverTool or ColumnDataSource would better showcase Bokeh's interactive strengths in the HTML output

Issues Found

1. SC-04 PARTIAL: Title has extra "Student-Course Enrollment ·" prefix — should be exactly network-bipartite · bokeh · anyplot.ai
   • Fix: Change title string to "network-bipartite · bokeh · anyplot.ai" and add a formal legend
2. DE-01 BELOW TARGET: No visual focal point; design is clean but flat
   • Fix: Add a Legend with two entries (Students / Courses), or annotate the single most-connected student/course node with a callout text glyph
3. LM-02 PARTIAL: Bokeh's ColumnDataSource and HoverTool not used
   • Fix: Wrap node/edge data in ColumnDataSource, add HoverTool with name and degree tooltip — this leverages Bokeh's interactive HTML artifact

AI Feedback for Next Attempt

Fix the title to "network-bipartite · bokeh · anyplot.ai" (remove the descriptive prefix). Add a formal Legend box with Students / Courses entries. Elevate design by annotating the most-connected student node and most popular course node with a brief callout (e.g., "Most enrolled" label near the largest node). Use ColumnDataSource for node data and add HoverTool showing node name and degree — this makes the HTML artifact interactive and scores LM-02 higher. These changes should push the score past 90.

Verdict: REJECTED

[github-actions]

🔧 Repair Attempt 1/4

Applied fixes based on AI review feedback.

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

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

Light render (`plot-light.png`): The plot renders on a warm off-white #FAF8F1 background. The bipartite network shows 15 student nodes (green, #009E73) on the left column and 12 course nodes (orange, #D55E00) on the right column. Nodes vary in size, encoding connection degree so hub nodes are visually prominent. Edges are drawn as thin semi-transparent gray lines (alpha ~0.30) connecting students to courses. Group headers "Students" (green) and "Courses" (orange) appear above each column in bold 24pt, matching their node colors. Student names (Alice through Olivia) are right-aligned beside their nodes; course codes (CS101 through MUSIC101) are left-aligned beside theirs. The title "Student-Course Enrollment · network-bipartite · bokeh · anyplot.ai" appears at top-left in dark ink. No axes, grid, or legend box is present. All text is clearly readable against the light background (dark text on warm off-white). Legibility verdict: PASS

Dark render (`plot-dark.png`): The same plot renders on a near-black #1A1A17 background. Data colors (green students, orange courses) are identical to the light render — only chrome flips. Labels and title switch to light ink (#F0EFE8 / #B8B7B0), remaining clearly readable against the dark surface. Node borders use the background color for clean visual separation. Edge lines remain visible as subtle lighter-gray strokes. No dark-on-dark text failures observed. The group headers "Students" and "Courses" retain their green and orange data colors, which both read well on dark surfaces. Legibility verdict: PASS

Score: 84/100

Category	Score	Max
Visual Quality	26	30
Design Excellence	12	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	6	10
Total	84	100

Visual Quality (26/30)

• VQ-01: Text Legibility (7/8) — Title 28pt, headers 24pt bold, node labels 18pt; all readable in both themes. Minor deduction: labels could be slightly bolder to stand out more against the busy edge layer.
• VQ-02: No Overlap (5/6) — Nodes evenly spaced in each column; label positions clear of nodes. Some edge-crossing is inherent to bipartite layouts and does not cause readability failures.
• VQ-03: Element Visibility (5/6) — Nodes clearly visible; degree-encoded sizing works well. Edge alpha (0.30) is appropriately subtle but a slight raise to 0.35–0.40 could improve readability for low-degree pairs.
• VQ-04: Color Accessibility (2/2) — Green/orange are CVD-safe Okabe-Ito colors; not a red-green encoding.
• VQ-05: Layout & Canvas (3/4) — 4800×2700 landscape, clean bipartite layout. The middle channel between columns could use slightly more whitespace breathing room.
• VQ-06: Axis Labels & Title (2/2) — Title correct; axes appropriately hidden for a network plot; column headers serve as semantic labels.
• VQ-07: Palette Compliance (2/2) — Students #009E73 (Okabe-Ito Add workflow diagram for new prototype discovery #1), Courses #D55E00 (Okabe-Ito Add Claude Code GitHub Workflow #2). Background #FAF8F1 light / #1A1A17 dark. Data colors identical across themes.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Color-coded group headers that mirror node colors is a polished touch. Node borders use PAGE_BG for a clean "floating" effect. Minimal chrome (no axes/grid) is appropriate. Falls short of top marks due to absence of any additional visual refinement (annotation callouts, subtle shadow, or edge curvature).
• DE-02: Visual Refinement (4/6) — All axes hidden, no grid, edge alpha carefully calibrated. Good discipline. Slight deduction: column separator or very faint vertical rule could improve the sense of structure without adding clutter.
• DE-03: Data Storytelling (3/6) — Degree-encoded node sizes allow the viewer to spot hubs. Color differentiates sets. However, no annotation highlights the top hub student or most popular course — there is no clear focal point guiding the viewer beyond the raw structure.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct bipartite network: two separated columns, edges only cross-set.
• SC-02: Required Features (4/4) — Nodes colored by set membership; size encodes degree; labels positioned beside nodes; edges connect cross-set pairs only.
• SC-03: Data Mapping (3/3) — 15 students (set A) left, 12 courses (set B) right; all nodes and edges present; weighted enrollment distribution implemented.
• SC-04: Title & Legend (3/3) — "Student-Course Enrollment · network-bipartite · bokeh · anyplot.ai"; color-coded column headers serve as a clear two-entry legend.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows bipartite structure, degree variation, set membership, and edge density patterns.
• DQ-02: Realistic Context (5/5) — Student-course enrollment at a university is real-world, neutral, and relatable. Diverse student names; realistic course codes.
• DQ-03: Appropriate Scale (4/4) — 15 students and 12 courses within the spec's 10–50-per-set guideline; edge density is realistic (2–5 courses per student).

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat script with no functions or classes.
• CQ-02: Reproducibility (2/2) — np.random.seed(42) ensures deterministic output.
• CQ-03: Clean Imports (2/2) — All imports are used; numpy, bokeh, selenium, os, time, pathlib.
• CQ-04: Code Elegance (2/2) — Appropriate complexity; clear variable names; no fake interactivity.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.html via output_file/save, then screenshots to plot-{THEME}.png via Selenium — matches library guide.

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) — Correct use of figure(), scatter(), segment(), text(); toolbar_location=None for clean static output; Selenium screenshot pattern per library guide. Deduction: no ColumnDataSource (Bokeh's recommended data pattern for scalability).
• LM-02: Distinctive Features (2/5) — Interactive HTML is generated (Bokeh's signature strength), but no interactive features are wired: no HoverTool to show student name/degree on hover, no TapTool to highlight a node's connections. For a graph that ships as HTML, these are the key Bokeh differentiators and are absent.

Score Caps Applied

• None

Strengths

• Perfect spec compliance: bipartite layout, degree-encoded node sizes, color-by-set, correct labeling
• Excellent code quality: seed, clean imports, KISS structure, correct output filenames
• Polished palette: Okabe-Ito positions 1 and 2 with color-coded column headers that mirror node colors
• Both themes pass legibility checks with no dark-on-dark or light-on-light failures
• Realistic and neutral student-course enrollment context

Weaknesses

• DE-03 (Storytelling): No annotation highlights the hub student or most popular course — add a p.text() callout on the highest-degree node in each set to create a focal point
• LM-02 (Distinctive Features): Interactive HTML is generated but unused — add HoverTool with tooltips showing node name and degree count; this is Bokeh's primary differentiator for network plots
• DE-01: Minor — no edge curvature or visual separator between the two node columns

Issues Found

1. LM-02 LOW: Bokeh's interactive HTML is produced but no tooltips or interaction is configured
   • Fix: Add HoverTool to the figure with a tooltip showing @name and @degree via ColumnDataSource; this alone would lift LM-02 to 4/5
2. DE-03 LOW: No focal point or annotation callout
   • Fix: Use p.text() to annotate the highest-degree node in each column (e.g., "Top connector" near the largest student node, "Most enrolled" near the largest course node)

AI Feedback for Next Attempt

Add HoverTool with name+degree tooltips via ColumnDataSource — this is Bokeh's signature and the single biggest quality gap. Also annotate the top hub in each column (one p.text() callout each) to create a visual focal point and lift DE-03. These two changes are sufficient to raise the score to ~91.

Verdict: APPROVED