Skip to content

Phase 5: Visualization

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

Objective

Generate three complementary interactive HTML visualizations from the knowledge graph.

Visualizations

1. Network Graph (network.html)

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

2. Timeline (timeline.html)

A Plotly scatter plot showing concepts distributed across time:

  • X-axis: Year (1920–2025)
  • Y-axis: Scientific field
  • Points: Concepts sized by connection count
  • Red arrows: Cross-disciplinary migration events
  • Hover: Concept name, year, field, and description

3. Heatmap (heatmap.html)

A Plotly heatmap showing cross-field migration intensity:

  • Rows: Source fields
  • Columns: Target fields
  • Color intensity: Number of cross-disciplinary migrations
  • Hover: Exact count and field pair

4. Concept Network (concept_network.html)

An interactive force-directed graph showing the concept-only graph (from the simplified concept graph data):

  • Nodes: Concepts, sized by total_citations
  • Edges: CONCEPT_CITES relationships, weighted by citation count
  • Colors: Mapped by scientific field
  • Interactions:
    • Drag nodes to rearrange
    • Zoom in/out
    • Hover for concept details (paper count, total citations)
    • Click to highlight connections

This visualization is generated from the concept_graph_simplified.json output and provides a focused view of how scientific concepts relate to each other, without the additional laureate/award/work nodes present in the full network graph.

Technical Details

Network Graph (Pyvis)

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.

Timeline (Plotly)

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.

Heatmap (Plotly)

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

Viewing

Start a local server:

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

Open in browser:

  • Network: http://localhost:8765/network.html
  • Timeline: http://localhost:8765/timeline.html
  • Heatmap: http://localhost:8765/heatmap.html
  • Concept Network: http://localhost:8765/concept_network.html

Running

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

# Standalone
uv run python -m src.visualize

The run() function accepts an optional mode parameter (full, concept, or both) to control which visualizations are generated. When run via the CLI, this is determined by the --graph-mode flag:

# Generate visualizations for concept graph only
uv run python main.py --phase 5 --graph-mode concept

# Generate all visualizations (default)
uv run python main.py --phase 5 --graph-mode both