ITエンジニア/デザイナ向けにオープンソースを毎日紹介

データのビジュアル化を考えた場合、常に正確に出すのが最善とは限りません。トレンドを知りたい場合はその傾向を見るためにデータを無視したり、より特徴的なポイントに主眼を置いたりします。地図も同じです。

案内図などは正確性よりも直線や曲がり角を重視した図になっています。同様に路線図も駅の間隔や合流ポイントなどに主眼を置くでしょう。そんな分かりやすい路線図を生成できるのがtransitive.jsです。

transitive.jsの使い方

こちらがデモです。とても見やすい路線図ですね。
こちらがデモです。とても見やすい路線図ですね。

右側の路線をマウスオーバーすると、その路線だけがハイライト表示されます。
右側の路線をマウスオーバーすると、その路線だけがハイライト表示されます。

ズーム表示やマウスドラッグでの視点変更も可能です。
ズーム表示やマウスドラッグでの視点変更も可能です。

データを作るのが多少大変なように見えますが、一度作ってしまえば後はtransitive.jsが自動生成してくれるのが便利です。データ自体はデータベースに保存しておいてスクリプトで生成する形でも良いでしょう。

データはCanvas上に書き出されていますので、スマートフォンなどでも扱いが容易というのが特徴です。駅データが自由に使えるようになると、道案内システムなどでも活躍できそうです。

transitive.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

conveyal.com/transitive.js/

conveyal/transitive.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2