阶段 5：可视化

模块： src/visualize.py
预计耗时： ~1 天

目标

从知识图谱生成三种互补的交互式 HTML 可视化。

可视化类型

1. 网络图（network.html）

基于 Pyvis (vis.js) 的交互式力导向图：

• 节点颜色按类型区分：
  • 🟡 金色 = 得主
  • 🔵 浅蓝色 = 论文
  • 🟢 绿色 = 概念
  • 🟠 橙色 = 奖项
  • 🟣 紫色 = 领域
• 边样式：
  • 🔴 红色粗线 = CROSS_INSPIRED（跨学科迁移）
  • 灰色线条 = 其他关系
• 交互操作：
  • 拖动节点重排
  • 缩放
  • 悬停查看详情
  • 点击高亮连接

2. 时间轴（timeline.html）

展示概念时间分布的 Plotly 散点图：

• X 轴： 年份（1920–2025）
• Y 轴： 科学领域
• 散点： 概念，大小按连接数缩放
• 红色箭头： 跨学科迁移事件
• 悬停： 概念名称、年份、领域和描述

3. 热力图（heatmap.html）

展示跨领域迁移强度的 Plotly 热力图：

• 行： 源领域
• 列： 目标领域
• 颜色强度： 跨学科迁移次数
• 悬停： 精确计数和领域对

技术细节

网络图（Pyvis）

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

图谱包含显示节点类型颜色的 HTML 图例叠加层。

时间轴（Plotly）

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

为每条 CROSS_INSPIRED 边添加箭头线注释。

热力图（Plotly）

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

查看

启动本地服务器：

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

在浏览器中打开：

• 网络图：http://localhost:8765/network.html
• 时间轴：http://localhost:8765/timeline.html
• 热力图：http://localhost:8765/heatmap.html

运行

# 通过流水线
uv run python main.py --phase 5

# 独立运行
uv run python -m src.visualize