wikipedia map

Wikipedia地图

一个用于可视化Wikipedia页面之间连接的Web应用程序。在wikipedia.luk.ke上尝试一下。

用法

首先将主题输入到文本框中，例如猫。将生成一个单个“节点”，标记为CAT ，该cat在图上显示为圆。单击此节点将其展开。

扩展节点为您点击的文章的第一段中链接的每个Wikipedia文章创建一个新节点。这些新节点将连接到它们扩展的节点。例如，扩展的猫将创建八个节点，包括毛皮，哺乳动物，食肉动物和驯化，每个节点都将连接到猫。这些新节点也可以以相同的方式扩展。通过继续扩展节点，您可以构建复杂的相关主题网络。

您还可以输入多个文章以“比较”，然后按逗号，选项卡或输入您输入的每个文章。

它如何工作

API

当您单击以展开节点时，向Wikipedia API提出了请求，以下载与该节点相对应的Wikipedia文章的全部内容。 Wikipedia地图使用此数据在文章的第一段中找到链接。

HTML解析

wikipedia_parse.js使用DOMParser API解析Wikipedia页面的HTML（从呼叫Wikipedia的API中检索）。解析器查找与文章第一段相对应的<p>标签，然后在本段中提取所有<a>标签链接。然后，它将链接过滤以仅包括与其他Wikipedia文章链接的链接。

您可以在浏览器的控制台中自己看到这一点。如果您打开了Wikipedia地图，请打开浏览器的开发人员工具并键入await getSubPages('Cat') 。一秒钟后，您应该看到一个带有其他相关文章名称的数组。

图

前端使用vis.js显示图形。每次单击节点时，该应用程序都会将XMLHttpRequest用于node.js服务器。所得链接添加为新节点，根据其距中央节点的距离（如上所述）颜色。

克隆

要在本地使用该应用，只需

git clone https://github.com/controversial/wikipedia-map/

并在Web浏览器中打开index.html 。运行前端不需要汇编或服务器。

设计选择

功能

扩展节点为您展开的节点的第一段中链接的每个文章创建节点。我选择仅在文章的第一段中使用链接，原因有2个：

1. 通常有可管理的这些链接，每页约为5-10个。
2. 这些链接往往与文章更直接相关，而不是在页面中的进一步链接。

视觉的

当节点离中心节点较远时，它们的颜色较浅。如果从企鹅那里走了5个步骤才能到达古希腊，那将比像观鸟这样的节点较浅，该节点只需2步即可到达。因此，节点的颜色表明文章与中心主题的关系程度如何。

将鼠标悬停在节点上，将突出显示回中心节点的路径：这不一定是最短的道路。这是您到达节点的道路。

路线图

我想尽快实施的东西（ish）

界面

• 建造一个GUI
  • 将输入方法更改为提示以外的其他方法
  • 允许重新开始而无需刷新页面
  • 创建说明项目，控制等的小信息按钮。
    • 将此读数渲染到“帮助对话框”中
    • 带网络的区域应包含指令，当它空白时
    • 创建一个更彻底的帮助对话框，以解释控件等，其中还包括读书文件
  • 添加“随机文章”按钮
  • 创建一个更好的帮助菜单，当用户首次访问时会弹出。
  • 使游览变得更好
    • 向用户展示如何扩展和跟踪回到节点。为此，请在启动节点上创建一个浮动的隐形div。然后，将牧羊人的步骤固定到此Div。
    • 在遵循指令之前，不要允许用户进入下一步（输入文章，按下）
    • 巡回演出开始时消失了信息框
• 允许多个开始
  • 为此构建接口
• 实施保存 +共享
  • 保存图
  • 从ID加载图
  • 从URL参数加载图
  • 实施共享UI

相互作用

• 悬停在节点上会显示您如何到达该节点的回忆，有点像面包屑
• 移动优化：为触摸设备实现一组单独的控件
• 在台式机和移动设备上，双击（或点击）节点在新标签中打开相应的Wikipedia页面
• 提高突出节点的效率

技术的

• .gitignore
• 删除对某些外部库的依赖性：
  • jQuery
  • WordWrap
  • 微小的
• 将JavaScript移至HTML分离文件
• 使API请求异步
• 添加某种构建系统以使构建本地副本并更容易贡献

东西可能很高兴在未来的某个时候实施

• Wikipedia文章的自动完整名称在顶级酒吧
• 使节点的大小反映了反向链接的数量
• 支持其他语言
• 支持其他Mediawiki Wiki

学分

该项目由Wikipedia提供支持，Wikipedia的丰富信息使该项目成为可能。

该图的表示由vis.js提供动力。