2014年6月26日
先端IT活用推進コンソーシアム
クラウド・テクノロジー活用部会
荒本 道隆
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

はじめに• 2014/05/28と出てくる技術はほぼ同じ– https://www.facebook.com/events/582797525151372/• D3.jsでオープンデータをビジュアライズしてみよう！（ハンズオン勉強会）– クラウド活用部会内の勉強会の再演• コードの解説をメインに行います– コードを色々と改造して、理解を深める

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

ちょっとだけ先端IT活用推進コンソーシアム
AITC
ご紹介

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

先端ＩＴ活用推進コンソーシアム
Advanced IT Consortium
to Evaluate, Apply and Drive

Ｊａｖａ
コンソーシアム

ＸＭＬ部会
Ｗｉｎｄｏｗｓ
コンソーシアム日本経営協会
ＸＭＬフェスタ2000/07 設立宣言

2001/06~2010/03実活動

2010/03~2010/09

2010/09/08設立

AITCとは：企業における先端ITの活用および先端ITエキスパート技術者の育成を目的とし、もって、社会に貢献することを目指す非営利団体
設 立： 2010年9月8日（会期： ～2016年8月31日）
会 長 ： 鶴保 征城 （IPA顧問、HAL校長）
会 員 ： 法人会員＆個人事業主、個人会員、学術会員
特別会員 （産業技術総合研究所、気象庁、消防研究センター、防災科学技術研究所）
顧 問 ： 稲見 昌彦 (慶応義塾大学大学院 教授）
和泉 憲明 (産業技術総合研究所 上級主任研究員)
萩野 達也 (慶応義塾大学 教授)
橋田 浩一 (東京大学大学院 情報理工学系研究科 教授)
丸山 不二夫(早稲田大学大学院 客員教授）
山本 修一郎(名古屋大学大学院 教授)
BizAR顧問：三淵 啓自 (デジタルハリウッド大学大学院 教授）
川田 十夢 (AR三兄弟 長男）

第4期活動対象分野
モノ ナチュラルユーザー コト
インターフェース

real

ユーザーエクスペリエンス

人AR

コンテキストvirtual

コンテキスト コンピューティング

クラウド コンピューティング
メタデータソーシャル活動の種類と関係性
部会のシーズ

部会へ
フィードバック

セミナー・勉強会

部会
部会
部会

AITC
オープンラボ
部会のノウハウを展開

プロジェクト
部会横断・外部との連携

発表会・シンポジウム
部会・プロジェクトの成果を発信

月1回程度の開催
スキルと知見の伝播

D3.jsでオープンデータを可視化しよう

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

D3.js とは
D3.js（またはD3:Data-Driven Documents、旧:Protovis[1]）は、 2011年に開発が始まった[2]ウェブブラウザで動的コンテンツを描画するJavaScriptライブ
ラリである。 World Wide Web Consortium準拠のデータ可視化ツールとして、
Scalable Vector Graphics（SVG）、JavaScript、HTML5、Cascading Style
Sheetsを最大限に活用している。 その他多くのライブラリとは対照的に、最終的に出力された結果に視覚的な調整ができる。[3]ウィキペデアより• データをドキュメント化して、関係も保持– SVGを効率良く生成するためのライブラリです
データ
JSON, CSV, e.t.c.

ドキュメント
SVG

SVG化

イベント処理イベントが起こったデータを識別

function
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

IE8以前やSVGに対応していないブラウザはそのままではダメD3.jsを使った開発の流れ• 使えそうなデータを発見– オープンデータ・API、社内システムのデータ・API– 必要に応じてフォーマット変換• そのデータに合った表現方法を探す– D3.js Examples• https://github.com/mbostock/d3/wiki/Gallery• サンプルのソースコードを流用して、改造• あっという間に完成

慣れればこんな感じ（きっと）Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

本日の目標• オープンデータを可視化する– ２つのデータをマッシュアップ– 地図と雨量：どちらも生活の中で身近なデータ• 地図を中心にビジュアライズ
– D3.js は、地図描画の機能も充実– 緯度・経度の扱いに注意

完成イメージ
さらに機能を追加して『シズッシュ』を目指す
http://sipos.shizuoka2.jp/sipos/index.html
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

緯度・経度を扱う上での注意
0,0136.09, 36.77
0, 0900 , 0140.18, 36.77

スクリーン

画面内に描画するため・スクリーンの原点と、緯度・経度の原点が違う・表示スケールの調整

経度・緯度136.09, 34.36

0, 600136.09, 34.36

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

900 , 600
140.18, 34.36

データの準備－１• ふじのくにオープンデータ– http://open-data.pref.shizuoka.jp/– 静岡県のリアルタイム河川情報• http://open-data.pref.shizuoka.jp/index.php?action=pages_view_main&act
ive_action=multidatabase_view_main_detail&content_id=526&multidatab
ase_id=82&block_id=139#_139• 10分ごとのデータが、過去24時間分取れる– 24時間以内に雨が降っていないと、何も表示されない• 何月何日に雨が降ったか確認– http://weather.yahoo.co.jp/weather/jp/past/22/5010.html?c=2014&m=3– 2014/4/28, 4/29, 5/5, ….

• 2014/04/26以降、10分ごとにwgetして蓄積しておいた– 雨量情報• http://aramoto.sakura.ne.jp/shizuoka2/Rain/– 水位情報• http://aramoto.sakura.ne.jp/shizuoka2/WaterLevel/– 観測局情報• http://aramoto.sakura.ne.jp/shizuoka2/– 文字コードを変換済み

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

データの準備－２• 地図データ– D3.js の geo パッケージで読めるデータ形式が必要• GeoJSON：地理情報用に規格されたJSONデータ形式• TopoJSON：GeoJSONの拡張形式。D3.jsではプラグインが必要– 冗長性を排するので、データサイズが20%程度になる– Shape形式で入手し、GeoJSONに変換• 入手元：国土交通省、国土数値情報– http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03.html– 静岡：N03-130401_22_GML.zip• このサイトでShapeを10%に圧縮（3,285KB→364KB）– http://www.mapshaper.org/– このサイトで直接GeoJSONをダウンロードしても、うまく表示できなかった• Shape→GeoJSONに変換– Linuxがあれば、コマンド一発– http://qiita.com/sawamur@github/items/ec32237bcbaaba94108d– 変換結果（GeoJSON形式、654KB）• http://aramoto.sakura.ne.jp/shizuoka2/gis/shizuoka_utf8.json
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

データの準備－３• JavaScriptからオープンデータにアクセスするために– ファイルの位置関係が重要• JavaScript：ローカルで編集し、そのままブラウザで表示– file:///C:/Users/.....

• 参照したいデータファイル：ネット上にある場合– http://aramoto.sakura.ne.jp/shizuoka2/.....

– JavaScriptとデータファイルが別ドメインの場合• そのままでは、クロスドメイン制約にひっかかる– 実際の挙動：通信がうまくいった後に、ブラウザがエラーを返す• 回避方法– データファイルを置いているWebサーバ側で、HTTPヘッダに追加» Header append Access-Control-Allow-Origin: *– 詳しくは、『ajax access control』でググってください– ちなみに、「ふじのくにオープンデータ」はこのヘッダが付いていない» アプリは利用できるけど、ブラウザのJavaScriptは利用できない– 全てローカルでやりたい場合• Chromeは起動オプション「--allow-file-access-from-files」が必要• Firefox, Safariは、特に何もしなくてもOK• IEはうまく動作しない

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

環境の準備• D3.js をダウンロード– http://d3js.org/• d3.zip をダウンロードし、d3.min.js を取り出す• js ディレクトリを作成し、格納• 今回は、すでに入っています• テキストエディタ• ブラウザ– [F-12]を押せば、開発ツールが起動する– Chrome：「ツール」→「デベロッパーツール」• ローカルのデータファイルを参照するためには、起動オプションを追加「--allow-file-access-from-files」– Firefox＋firebug：「ツール」→「Web開発」→「Firebug」→「Firebugを開く」– Safari：「環境設定」→「詳細」→「メニューバーに”開発”メニューを表示」– IE（9以降）：「F12 開発者ツール」• ローカルだとうまく動作しない– データにアクセスしている部分をjQueryにすれば、動くらしい

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

D3.jsの概要 http://ja.d3js.node.ws/•セレクタ（W3C Selectorsを参照）– d3.select(“#hoge”) → <xxx id=“hoge”> を対象– d3.select(“.hoge”) → <xxx class=“hoge”>を対象– d3.select(“hoge”) → <hoge>を対象•セレクション

signal = [{ “cx”: 100, “cy”: 100, “color”: “#0000ff”, “title”:”青”,},{ “cx”: 200, “cy”: 100, “color”: “#ffff00”, “title”:”黄”,},{ “cx”: 300, “cy”: 100, “color”: “#ff0000”, “title”:”赤”,},];– selectAll(), enter(), exit()– 繰り返し処理が楽に書ける• d3.select("#TEXT1").selectAll("p").style("color", “#000000");•動的プロパティ• svg.selectAll(".node").data(signal).text(function(d) { return d.title; } );•データの結合– 更新：svg.selectAll(".node").data(signal).text(“hogehoge”);– 追加：svg.selectAll(".node").data(signal).enter().append(“text").text(“piyopiyo”);– 削除：svg.selectAll(".node").data(signal).exit().remove();• アニメーション• d3.select("#TEXT4").transition().style("background-color", "black");
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

以降は、ソースコードを見ながら解説• D3.jsでデータとSVGが連動するサンプル– sample1_1.html– sample1_2.html• D3.jsで地図を描画する– sample2.html• D3.jsでデータを取得する– sample3.html• 取得したデータをsvgで可視化する– sample4.html• 緯度・経度の扱いに注意• 地図に重ねてデータ（10分雨量）を描画する– sample5.html• １日分のデータ（60分雨量）をアニメーションする– sample6.html
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

拡張案• 雨量に合わせて、色を変える– 淡→濃、青→黄→赤• 60分雨量を使用する– 10分雨量だと、差が分かりにくい• 表示する日時を選択可能にする• 地図の投影法を変える– サンプルはメルカトル図法を使用• 付加情報の表示– clickかmouseoverで、地名・住所・雨量などを重ねて表示– 文字をもっと見易くする（白抜き文字、など）• http://www.slideshare.net/kadoppe/inline-svg/53• 雨量の代わりに水位を描画• 別の県を描画– 雨量の代わりに、別のオープンデータを使用• jQueryを活用– 混在が可能、書き方も似ている
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.