Phase 5: Visualization¶

Module: src/visualize.py
Estimated Time: ~1 day

Objective¶

Generate three complementary interactive HTML visualizations from the knowledge graph.

An interactive force-directed graph powered by Pyvis (vis.js):

Node colors by type:
- 🟡 Gold = Laureate
- 🔵 Light blue = Work (paper)
- 🟢 Green = Concept
- 🟠 Orange = Award
- 🟣 Purple = Field
Edge styles:
- 🔴 Red thick lines = CROSS_INSPIRED (cross-disciplinary migration)
- Gray lines = other relationships
Interactions:
- Drag nodes to rearrange
- Zoom in/out
- Hover for details
- Click to highlight connections

A Plotly scatter plot showing concepts distributed across time:

A Plotly heatmap showing cross-field migration intensity:

net = Network(height="900px", width="100%", directed=True, ...)
net.barnes_hut(gravity=-5000, spring_length=200)

The graph includes an HTML legend overlay showing node type colors.

fig = go.Figure()
fig.add_trace(go.Scatter(
    x=years, y=fields,
    mode='markers+text',
    marker=dict(size=sizes, color=colors)
))

Annotations are added for each CROSS_INSPIRED edge as arrow lines.

fig = go.Figure(data=go.Heatmap(
    z=matrix, x=fields, y=fields,
    colorscale='YlOrRd'
))

Start a local server:

python3 -m http.server 8765 --directory output/viz

Open in browser:

# Via pipeline
uv run python main.py --phase 5

# Standalone
uv run python -m src.visualize