wikipedia map

ウィキペディアマップ

ウィキペディアページ間の接続を視覚化するためのWebアプリ。 wikipedia.luk.keでお試しください。

使用法

テキストボックス、たとえばCATSにトピックを入力することから始めます。単一の「ノード」が生成され、グラフ上の円として表示されるCATとラベル付けされます。このノードをクリックして展開します。

ノードを展開すると、クリックした記事の最初の段落にリンクされた各ウィキペディア記事の新しいノードが作成されます。これらの新しいノードは、拡張されたノードに接続されます。たとえば、 CATを拡張すると、毛皮、哺乳類、肉食動物、家畜を含む8つのノードが作成され、それぞれがCATに接続されます。これらの新しいノードも同じ方法で拡張できます。ノードを拡張し続けることにより、関連するトピックの複雑なWebを構築できます。

また、複数の記事を入力して、コンマ、タブを押したり、入力した後に入力して「比較」することもできます。

それがどのように機能するか

API

クリックしてノードを展開すると、ウィキペディアAPIにリクエストが行われ、そのノードに対応するウィキペディア記事の完全なコンテンツをダウンロードします。 Wikipedia Mapは、このデータを使用して、記事の最初の段落でリンクを見つけます。

HTML解析

wikipedia_parse.js 、 DOMParser APIを使用して、Wikipedia PagesのHTML（WikipediaのAPIへの通話から取得）を解析します。パーサーは、記事の最初の段落に対応する<p>タグを探し、この段落内のすべての<a>タグリンクを抽出します。次に、リンクをフィルタリングして、他のウィキペディアの記事にリンクするリンクのみを含みます。

これをブラウザのコンソールで自分で動作していることがわかります。 Wikipediaマップを開いている場合は、ブラウザの開発者ツールを開き、 await getSubPages('Cat') 。 1秒後、他の関連記事の名前が付いた配列が表示されます。

グラフ

フロントエンドでは、 vis.jsを使用してグラフを表示します。ノードがクリックされるたびに、アプリはnode.jsサーバーにXMLHttpRequestを作成します。結果のリンクは、中央ノードからの距離に応じて色付けされた新しいノードとして追加されます（上記のように）。

クローニング

アプリをローカルに使用するには、簡単に使用します

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

Webブラウザでindex.htmlを開きます。フロントエンドを実行するためにコンピレーションやサーバーは必要ありません。

デザインの選択

機能的

ノードを展開すると、展開するノードの記事の最初の段落にリンクされた各記事のノードが作成されます。 2つの理由で、記事の最初の段落からのみリンクを使用することを選択しました。

1. 通常、これらのリンクには管理可能な数があり、1ページあたり約5〜10です。
2. これらのリンクは、ページのさらに下のリンクよりも、記事に直接関連する傾向があります。

ビジュアル

ノードは、中央ノードから遠く離れている場合、色が明るくなります。ペンギンから古代ギリシャ語に到達するために5つのステップを要した場合、バードウォッチングのようなノードよりも軽い色になり、到達するのに2つのステップしかかかりませんでした。したがって、ノードの色は、記事が中心的なトピックにどれだけ密接に関連しているかを示します。

ノードの上にマウスをホバリングすると、中央ノードに戻るパスを強調表示します。 これは必ずしも最短のパスではありません。それはあなたがノードに到達するために取った道です。

ロードマップ

すぐに実装したいもの（ish）

インタフェース

• GUIを構築します
  • 入力方法をプロンプト以外のものに変更します
  • 更新せずに新たに始めることを許可します
  • プロジェクト、コントロールなどを説明する小さな情報ボタンを作成します。
    • このreadmeを[ヘルプ]ダイアログにレンダリングします
    • ネットワークのあるエリアには、空白の場合は指示を含める必要があります
    • コントロールなどを説明するより徹底的なヘルプのダイアログを作成します。これにはreadmeも含まれます
  • 「ランダムな記事」ボタンを追加します
  • ユーザーが最初にアクセスしたときにポップアップするより良いヘルプメニューを作成します。
  • ツアーを改善します
    • ノードを拡張して追跡する方法をユーザーに示します。これを行うには、開始ノードに浮かぶ目に見えないDivを作成します。次に、羊飼いのステップをこのdivにピン留めします。
    • ユーザーが指示に従うまで次のステップに進むことを許可しないでください（記事を入力し、GOを押します）
    • ツアーが開始されたら、情報ボックスを消します
• 複数のスタートの入力を許可します
  • このためのインターフェイスを作成します
• 保存 +共有を実装します
  • グラフを保存します
  • IDからグラフを読み込む
  • URLパラメーターからグラフをロードします
  • 共有UIを実装します

交流

• ノードの上にホバリングすると、そのノードに到着した方法のトレースバックが表示されます。
• モバイル最適化：タッチデバイスに個別のコントロールセットを実装する
• デスクトップとモバイルの両方で、ノードをダブルクリック（またはタップ）して、新しいタブで対応するウィキペディアページを開きます
• ノードを強調表示する効率を向上させます

テクニカル

• .gitignoreライブラリディレクトリを確認してください。私がそのようなものを書かなかったときにここにある理由はありません
• 一部の外部ライブラリへの依存関係を削除します。
  • jquery
  • ワードラップ
  • Tinycolor
• JavaScriptをHTMLから分離するように移動します
• API要求を非同期にします
• ある種のビルドシステムを追加して、ローカルのコピーを構築し、貢献しやすいものにします

ものは、遠い将来にいつか実装するのがいいかもしれません

• トップバーにあるウィキペディアの記事のオートコンプリート名
• ノードのサイズがバックリンクの数を反映する
• 他の言語のサポート
• 他のメディアウィキウィキのサポート

クレジット

このプロジェクトはウィキペディアを搭載しており、その豊富な情報がこのプロジェクトを可能にしています。

グラフのプレゼンテーションは、 vis.jsを搭載しています。