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提供動力。