【JavaScript】モダンな3D地球モデルでデータを可視化しよう!「Gio.js」の基本的な使い方を解説!

プログラミングのKnow-howを共有しましょう

【JavaScript】モダンな3D地球モデルでデータを可視化しよう!「Gio.js」の基本的な使い方を解説!

スポンサーリンク

JavaScriptのライブラリで、3Dの地球モデルを使ってデータの可視化をすることができる「Gio」についてその基本的な使い方を解説していきます。

※この記事で扱うGio,jsのバージョンは2.0.0です。

Gio.jsとは?

Gio.js

Gio.jsとはThree.jsをベースに構築された3Dの地球儀データビジュアライゼーションライブラリです。

  • シンプルな導入

3Dの地球儀で構成されたモデルを最低たった4行で作成することができます。

  • カスタマイズが容易

Gio.jsの使いやすいAPIを使用して3Dの地球儀をカスタマイズすることができます。

  • モダンなデザイン

Gio.jsを使うとレスポンシブルで双方向、リッチな3Dフロントサイドアプリケーションを作成することができます。

Three.jsとは?

three.jsは、ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリ及びアプリケーションプログラミングインタフェースである。

ー参照元:https://ja.wikipedia.org/wiki/Three.js(ウィキペディア)

作業用ディレクトリの準備

以下のようなファイルが存在するディレクトリを作成しておきましょう。

ファイル名 説明
giojs-train.html 画面表示用のテンプレートHTMLファイル
giojs-train.js 処理記述用のJavaScriptファイル
giojs-train.css スタイル記述用のCSSファイル
contry-list.js 国別の2文字表記のリスト返す関数を持つJavaScriptファイル(※サンプルの実装に使用します)
jquery-3.3.1.min.js jqueryライブラリのソースファイル。こちらはjqueryの公式サイトよりダウンロードしてください。

インストール方法

インストール方法大きく分けてnpm、yarn、CDN経由、ダウンロードの4つがありますが
今回は作業ディレクトリの構成上、ダウンロードによるインストールの方法を解説します。

CDNとは違い、こちらはオフラインでも使用することができます。
まずはGio.jsのjsファイルをダウンロードしましょう。

公式サイトへ行き、下の「Download」内にある「v2.0.zip」をクリックしてダウンロードします。

 

解凍したら「gio.min.js」と「three.wx.min.js」を作業ディレクトリにコピーしましょう。

 

 

その後、作業ディレクトリ内の「giojs-train.html」に以下のような<script>タグを記述しましょう。

この時<script>タグの順番を変えると正常に動作しない場合があるのでこの順番の通りに記述してください。
また、HTMLファイルへJavaScriptのソースを読み込む方法について、詳しくは以下の記事で解説しているのでよろしければご覧ください。

基本的な使い方

 

それでは早速使ってみましょう。用意した作業ディレクトリの内容を順に見ていきます。

HTMLファイル(giojs-train.html)とCSSファイル(giojs-train.css)

 

HTMLファイルには先ほどのjsファイルに加えて、これから処理を記述する
「giojs-train.js」、「contry-list.js」、「giojs-train.css」
をそれぞれ<head>タグに加えています。

また、bodyにはGio.jsによる3Dモデル表示用の<div id=”globalArea”>タグが記述されています。

CSSファイルではbodyやdivタグのスタイルを設定しています。

JavaScriptファイル

少しずつ見ていきましょう。

ここが初期設定の部分です。

2行目で先ほどHTMLファイルに記述した<div id=”globalArea”>タグをdocument.getElementByIdで取得し、container変数に格納します。

5行目ではGio.jsのクラスからインスタンスを作成しています。この時、3Dモデルを表示する場所としてcontainer(<div>タグ)を指定しています。
以降、このインスタンスはcontrollerと定義して使用していきます。

7、8行目はそれぞれモデルの設定APIです。

7行目でモデル表示時にフォーカスを当てる国(この例ではJP、つまり日本)を設定しています。
Gio.jsでは国の指定にアルファベットの2文字表記を用いるので注意しましょう。
実はその2文字表記をまとめたリストとしてcontry-list.jsを定義しているのですが、それは後ほど紹介します。

8行目で地球モデルのデザインを設定しています。
今回は”magic”を指定していますが、他にも様々なテンプレートがある上に自分で細かくデザインを定義できるAPIも存在しています。

詳細はこちらのページを御覧ください。

 

この部分ではモデルに表示するデータを定義しています。

3行目ではcontry-list.jsから国を表す2文字のアルファベットが定義されたリストを取得しています。
contry-list.jsは以下のようになっています。
別ファイルにしても、このgiojs-train.js内に定義してもどちらでも構いません。

これは国を表す2文字のアルファベットをキーに、国が所属する地域(EU、AF)を値としています。
今回の例ではキーしか使っていませんが、Gio.jsでは地域の設定もできるので色々変えてみるのもいいかもしれません。

4行目では国から国へ伸びていくリンクに色をつけるために、カラーコードを配列形式で定義しています。

8〜23行目で地球モデルに表示させるデータの作成処理です。
この例では「ランダムに10カ国選択し、日本と繋がる」ようなデータを作成しています。データは以下のようなプロパティを持つオブジェクト形式で作成します。

このオブジェクトを要素とした配列を定義すればデータの完成です。

さて、いよいよGio.jsにデータをセットし、地球モデルを表示させてみましょう。

3D地球モデルを表示する

ソースが完成したので、先程作成した「giojs-train.html」をダブルクリックorブラウザにドラッグしてみましょう!

こちらで実際に動かせるでデモも用意したので、とにかく動かしてみたい!という方はどうぞ。

Giojsの実装結果

機械学習、ディープラーニング等のデータ活用も盛んですが、
最近はナレッジグラフなどデータのビジュアライゼーション技術も盛り上がってきています。
今回はその手段の1つとしてGio.jsを紹介しました。

また、データのビジュアライゼーション技術の1つとして、d3.jsというライブラリについても
紹介しているので、よろしければどうぞ。

ここまで読んでいただき、ありがとうございます。
よろしければ他の記事もごらんください。