以前、東洋経済ブランドスタジオのウェブサイトで3D地球儀を使ったデータ可視化を公開した。

日本のパスポートは世界的に見ても「強い」＝ビザなしで渡航できる国が多いことで知られているが、このビジュアルは実際に渡航できる国々を地球儀で表現したものだ。たとえばアメリカをクリックすると、アメリカのパスポートを持つ人がビザなしでどの国に渡航できるか一覧できる。青い線は逆に「こちらからはビザが必要だが、相手国からはビザなしで渡航できる」ケースを表す。

これを見ると、日本や欧米、特に北欧諸国の渡航範囲が広いことがわかる。一方で政情の不安定な国、たとえばシリアや北朝鮮からはごく一部の国しかビザなし渡航ができない。また、タイやインドなど各国から観光客を広く受け入れている国は、自国からビザなしで渡航できる国（＝赤い線）は少ないものの、多くの国の観光客を歓迎しているため青い線が多い。

この実装に使ったのがGio.jsと呼ばれるJavaScriptライブラリだ。これを使うと、シンプルなコードで3Dの地球儀上に国同士のつながりを表現することができる。

まず、ライブラリの読み込み。Gio.jsはThree.jsというWebGLを扱うライブラリに依存しているので、公式サイトからコードをダウンロードして一緒に読み込む。

<script src="three.min.js"></script>
<script src="gio.min.js"></script>

データは以下のように、e: 元の国、i: 行き先の国、v: 値、からなる関係性のデータを読み込ませる。国の表記にはいずれもISO 3166-1国名コード（２桁）を使う。たとえば以下は、日本から米国に20、イギリスから中国に30、のデータを示す。

var data = [
	{"e":"JP","i":"US","v":20},
	{"e":"GB","i":"CN","v":30}
];

ライブラリとデータを読み込んだら、実装に最低限必要なのは以下の記述のみ（データをdata変数に格納していること、HTMLにid="globe"要素が存在することが前提）。

var container = document.getElementById("globe");
var controller = new GIO.Controller(container);
controller.addData(data);
controller.init();

非同期でデータを読み込んだり、地球儀の外見を設定したり、初期状態からある国を選択させたい場合には以下のように記述を変更する（上の例でいうと下２行を入れ替える）。

// データを非同期で読み込む
controller.addDataAsync('data/data.json', function(data) {
 controller.setBackgroundColor("#123");	// 背景色を#123に設定
 controller.setInitCountry("JP");	// 初期状態で日本を選択
 controller.init();
});

外見を細かく設定したい場合は、公式サイトのPlaygroundからGUIで調整することも可能だ。

国が選択されたときに何らかのイベントを起こしたい場合はonCountryPickedを使う。

controller.onCountryPicked(function(select, relate) {
    // ここにイベントを記述
});

Gio.jsは外見をほぼ初期設定のままにしてもクールに見せられるのがいいところ。今回はパスポートのデータを使ったが、他にも輸出・輸入データや留学生の行き来など、国同士の関係に関するデータを可視化するのに向いている。