D3.jsでオープンデータをビジュアライズ!ハンズオン勉強会

動的コンテンツを描画するJavaScriptライブラリ「D3.js」の勉強会が6月27日(金)エンジニアのための無料イベントスペース「21cafe」で開催されました。

20140624_1

▼21cafe<ニイイチカフェ>についてはこちら

勉強会を主催したのは、企業の垣根を越えIT知識の共有とその活動を推進している非営利団体「AITC(先端IT活用推進コンソーシアム)」さん。発足したのが2010年ということで昨今のように勉強会をたくさんやっているときよりも前からコミュニティ活動をされています。

勉強会のテーマはいつもメンバーの方たちが話しあって決めるそうで、その対象はクラウドからAR、インターフェース、ソーシャルなど“リアル”と“バーチャル”を横断的にカバーする幅広さ。

そんなAITCさんがテーマとして今回選んだのは「D3.js」と呼ばれるJavascriptのライブラリ。World Wide Web Consortium準拠のデータ可視化ツールとして、Scalable Vector Graphics(SVG)、JavaScript、HTML5、Cascading Style Sheetsを最大限に活用することで、その特徴である動的コンテンツの描画をブラウザ上で可能にしています。

20140710_1.5

「動的コンテンツの描画って聞くとたしかに面白そうだけど、実際なにに使うの?」という疑問をもつ方が必ずいるであろう今回のテーマ。
勉強会では、生活する上で身近なオープンデータを可視化しよう!ということで静岡県の地図をビジュアライズ化し、さらに機能追加で降雨情報を地図上に表示させるアメッシュならぬ「シズッシュ」を作りました。

こちらがハンズオンの講師を務められた荒本さん。勉強会のあいだ、コードの解説をしながらも「ここをいじるとこんな変化が起きて面白いです!」と終始、楽しそうに説明してくださいました。

20140710_2

まずはコンテンツ作成に必要なリソースの準備から。「ふじのくにオープンデータカタログ」というサイトで公開されている静岡県のリアルタイム河川情報を取得。
雨量、水位、観測局の3つの情報を講師の荒本さんが、あらかじめwgetして蓄積してくださっていたので今ハンズオンではそちらを使用しました。

また地図データに関しては国土交通省が公開している国土数値情報という地理データをShape形式で取得した後にD3.jsが読み取れるデータ形式(GeoJSON)に変換しておきます。

そしてさらに重要なのが保存するファイルの位置関係。ブラウザ上で上手くすべてのオープンデータが連携して動くためには大事な作業です。
全てローカル上で動かすことも可能ですが、ブラウザによって大きく差があるため注意しないといけませんね。ちなみに推奨ブラウザは、ChromeとSafariでした。

20140710_5

データが揃ったところで、D3.jsの設定にうつります。まずはダウンロード!
▼D3.js(3.4.9)のダウンロードはこちらのページから!

以降はソースコードの説明になりますので資料をご覧くださいね。
▼資料(2つあります)はこちらから!
1)http://cloud.aitc.jp/20140627_D3js/201406xx_D3js.pdf
2)http://cloud.aitc.jp/20140627_D3js/

地図を描く、データを取得する、データを地図の上に載せていく。この作業を綿密に組み合わせていくと下記のような図が完成します!

20140710_4

わかりにくいデータをよりわかりやすく。Webブラウザ上でよりインタラクティブに。
このようにしてアニメーションなどの“動き”が追加されることによって、表現できる次元が増えて伝達できる情報量が増えることがD3.js活用の最大のメリットと言えそうです。

20140710_3

AITC(先端IT活用推進コンソーシアム)さんでは、これからも業種やコミュニティの枠にとらわれることなく、積極的に活動していくとのこと!ご興味ある方はHPをご覧くださいね。

主催のAITCさん、講師を務められた荒本さん、ご参加された皆さま。ご来場誠にありがとうございました!次回の勉強会でもぜひ21cafeにお越しください。


最新情報はFacebook/Twitterをフォロー!


関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。