D3.jsを使ったデータビジュアライズ勉強会

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
2014年7月17日
先端IT活用推進コンソーシアム
クラウド・テクノロジー活用部会
D3.jsを使った
データビジュアライズ勉強会

タイムスケジュール
• 19:30～20:10
– オープンデータから表示用ファイルを準備
• 20:10～21:30
– D3.jsで可視化しよう

本日の目標
• D3.jsを使ってデータを可視化してみる
– 数値を眺めているだけでは見えなかったものが、
可視化によって何かが見えてきたらステキ
• 本日の内容を別の方法でも実現できるけど
– Google Maps API
• https://developers.google.com/maps/?hl=ja
– Microsoft Excel の Power View
• http://office.microsoft.com/ja-jp/excel-help/HA102899553.aspx
• D3.jsで実装することで
– 思い通りの表現・拡張ができる
• SVG（Scalable Vector Graphics）のスキルも自然に身に付く
– 地図以外にも活用できる
– ほとんどローカルで出来るので
• 業務データなどでも安心してトライする事ができる

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

Ｗｉｎｄｏｗｓ
コンソーシアム
日本経営協会
ＸＭＬフェスタ
Ｊａｖａ
コンソーシアム
ＸＭＬ部会
2000/07 設立宣言 2001/06~2010/03実活動 2010/03~2010/09 2010/09/08設立
先端ＩＴ活用推進コンソーシアム
Advanced IT Consortium
to Evaluate, Apply and Drive

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

第4期活動対象分野
realvirtual
コンテキスト
人
メタデータ
モノコト
コンテキストコンピューティング
クラウドコンピューティング
AR
ナチュラルユーザー
インターフェース
ユーザーエクスペリエンス
ソーシャル

部会部会
プロジェクト
発表会・シンポジウム
セミナー・勉強会
部会
部会へ
フィードバック
部会の
ノウハウを展開
部会・プロジェクトの成果を発信
部会横断・外部との連携
部会のシーズ
月1回程度の開催
スキルと知見の伝播
AITC
オープンラボ
活動の種類と関係性

オープンデータから
表示用ファイルを準備

横浜市のオープンデータ
• 横浜オープンデータポータル
– http://data.yokohamaopendata.jp/
• ヨコハマ・アート・LOD
– http://fp.yafjp.org/yokohama_art_lod
• よこはまオープンデータカタログ（試行版）
– http://www.city.yokohama.lg.jp/seisaku/seisaku/opendata/
catalog.html
• 2014年7月14日オープン
オープンデータじゃないけど
• 横浜市統計情報ポータルサイト
– http://www.city.yokohama.lg.jp/ex/stat/
SPARQLによるクエリが可能

その他のオープンデータ
• Open DATA METI
– http://datameti.go.jp/data/ja/dataset
• データカタログサイト（試行版）
– http://www.data.go.jp/
• オープンデータプラットフォーム
– http://odp.jig.jp/
• 気象庁XML公開サイト
– http://api.aitc.jp/
• 鯖江市
– http://www.city.sabae.fukui.jp/pageview.html?id=12768
SPARQLによるクエリが可能SPARQLによるクエリが可能

SPARQLによるクエリ例
• オープンデータプラットフォーム http://odp.jig.jp/
– SPARQLで横浜市に関する登録を検索
• http://sparql.odp.jig.jp/sparql.html
• 神奈川県横浜市：http://odp.jig.jp/jp/jig/opendatacity/13
• 神奈川県横浜市金沢区：http://odp.jig.jp/jp/jig/opendatacity/5
select * where {
?id ?t <http://odp.jig.jp/odp/1.0#OpenDataCity> .
?id ?p ?o .
filter(regex(?o, "横浜市"))
} limit 10
敷居はかなり高いけど、慣れたら「RDBを公開してくれている」感覚

データを準備する上での注意－１
• 文字コード
– CSVはShift-JISで公開されているものが多い
– JavaScriptで読み込む場合
• とりあえず「UTF-8」に変換すれば、トラブルは起こりにくい
• ライセンス
– データを公開しているサイトの利用規約を参照
• http://data.yokohamaopendata.jp/dataset/kanazawa_kz-
opendata_2013_35-child-care-event
→リソース→ライセンスを参照

データを準備する上での注意－２
• 他サイト上のデータを直接参照したい
– 常に最新データを表示できる
• 今日やるようなデータ加工をJavaScriptで実装
– CORS（Cross-Origin Resource Sharing）
• データの公開サイトが、他サイトから直接参照を許可しているか？
• 確認方法
– HTTPヘッダに「 Access-Control-Allow-Origin: *」があればOK
• 開発時に、全部ローカルでやる場合は
– Chromeは起動オプション「--allow-file-access-from-files」
– Firefox, Safariは、特に何もしなくてもOK
– IEはうまく動作しない
• ファイルアクセス部分にjQueryを使う事で回避可能

使用するデータを選択
• 使用するデータの選択条件
– 住所もしくは緯度経度と、数値があるもの
– 時間とともに変化すると、さらに面白い
• 今回使用するデータ
– 横浜市総務局防災関連データ
• http://www.city.yokohama.lg.jp/somu/org/kikikanri/data/
→「地域防災拠点」 ※注：XMLファイル
クリエイティブコモンズ「表示」(CC BY)
– 二次著作物を作成する場合は、利用するデータの出典（データのタイトルと著作
権者名など）の表示をお願いします。
• 使用するツール
– Excel で編集を行います
– ExcelとJavaScriptに自信があれば、他データに挑戦してもOK
– Excelを持っていない人は
• Sample ディレクトリ以下からコピーしてください

データ準備－１
• XML→CSVに変換する
– Excel で対象URLを開く
• 「XMLテーブルとして開く」を選択
• １回目はちょっと時間がかかります
– 「名前を付けて保存」でCSVを選択
• ファイル名は「shelter.csv」
• CSVを加工
– Excelを再起動し、「shelter.csv」を開きなおす
– フルの住所のカラムをCとDの間に追加
• タイトルは「住所」
• =“神奈川県横浜市” & B2 & C2
– 他のデータを使う場合も
• CSVとして正しい形式で、住所が入っていれば、だいたいOK

データ準備－１－最終形

データ準備－２
• 住所を緯度経度に変換する
– http://newspat.csis.u-tokyo.ac.jp/geocode/
– 「今すぐサービスを利用する」をクリック
– 各パラメータを設定
• 住所を含むカラム番号：4
• 変換したいファイル名： shelter.csv
– 「送信」を押すと、変換結果のCSVが落ちてくる
• ダウンロード後、Excelで開いて内容を確認
• 取得した緯度経度をGoogleMapsで確認
– 「fY fX」の順で検索

データ準備－３
• 文字コード変換
• テキストエディタで開き、文字コードを「UTF-8」に変更し保存
• ファイル名は、「shelter_utf8.csv」を指定
Windowsのメモ帳
「ファイル」→「名前を付けて保存」
Macのテキストエディット
「テキストエディット」→「環境設定」

データ準備－４（余裕のある人だけ）
• 他のデータに対しても、同様の手順を行う
– 「住所を含むカラム番号」に注意
• 改行が正しく表示されない場合
– 住所→緯度経度変換時に、UNIX改行に変わった
– 心配なら、別のエディタでCR+LFに変換
• 変換しなくても、特に問題はない

D3.jsで可視化しよう

D3.js とは
• データをドキュメント化して、関係も保持
– SVGを効率良く生成するためのライブラリです
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]
ウィキペデアより
データ
JSON, CSV, e.t.c.
ドキュメント
SVG
function
IE8以前や
SVGに対応していな
いブラウザは
特別な対応が必要
SVG化
イベント処理
イベントが起こっ
たデータを識別

D3.jsを使ってビジュアライズ
• 今回は地図を軸に可視化してみる
– D3.js は、地図描画の機能が充実
• 注意：地図は楽だけど、グラフを描くのは意外に面倒
– 必要な部品がそろっているだけ
– D3.js Examples → 各グラフを描くためのソースを参照
• https://github.com/mbostock/d3/wiki/Gallery
– 参考URL http://postd.cc/what-d3js-is-not/
• 参考書籍
エンジニアのためのデータ可視化[実践]入門
~D3.jsによるWebの可視化
• http://www.amazon.co.jp/dp/4774163260
• D3.js はほとんど出てこないけど、「可視化」の理解が深まります

緯度・経度を扱う上での注意
0 , 0
136.09, 36.77
900 , 600
140.18, 34.36
スクリーン
経度・緯度
画面内に描画するため
・スクリーンの原点と、緯
度・経度の原点が違う
・表示スケールの調整
900 , 0
140.18, 36.77
0 , 600
136.09, 34.36
0, 0
136.09, 34.36

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

地図データの準備
• 地図データ
– 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_14_GML.zip
• このサイトで10%に圧縮＋GeoJSONに変換
– http://www.mapshaper.org/
– 10%というのはShapefileでの比（1,191KB→131KB）
– Shapefile→GeoJSONに変換すると大きくなる（131KB→514KB）
– 変換結果（GeoJSON形式、514KB）
• http://cloud.aitc.jp/20140717_D3js/gis/kanagawa.json

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>を対象
• セレクション
– 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(function(d, i) { return i; } );
• データの結合
– 更新：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");
signal = [
{ “cx”: 100, “cy”: 100, “color”: “#0000ff”, “title”:”青”,},
{ “cx”: 200, “cy”: 100, “color”: “#ffff00”, “title”:”黄”,},
{ “cx”: 300, “cy”: 100, “color”: “#ff0000”, “title”:”赤”,},
];

その他の今回使用するメソッド
• ファイルの読み込み
– d3.json(), d3.text(), d3.csv()
• 地図描画
– d3.geo.mercator()
– d3.geo.path().projection(projection);

SVG(Scalable Vector Graphics)について
• Wikipedia
– http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
• SVG仕様
– http://www.hcn.zaq.ne.jp/___/SVG11-2nd/
• 使用上の注意
– 順番通りに上に重ねて描画
– 対応していないブラウザだと、何も表示されない
– ブラウザによっては、微妙に見え方が違う
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）
は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。
アニメーションやユーザインタラクションもサポートしている。SVGの仕様は
W3Cによって開発され、オープン標準として勧告されている。

SVG(Scalable Vector Graphics)について
• 代表的な図形
– パス
<path d=“M 100 100 L 300 100 L 200 300 z” fill=“red”
stroke=“blue” stroke-width="3" />
– 円
<circle cx=“600” cy=“200” r=“100” fill=“red” stroke=“blue”
stroke-width="10" />
– 線
<line x1=“100” y1=“300” x2=“300” y2=“100” stroke=“green”
stroke-width="5" />
– テキスト
<text x=“250” y=“150” font-family=“Verdana” font-size=“55”
fill="blue" >
Hello, out there
</text>

以降は、サンプルコードを見ながら解説
• http://cloud.aitc.jp/20140717_D3js/
• D3.jsでデータとSVGが連動するサンプル
– step1_1.html + js, step1_2.html + js
• D3.jsで地図を描画する
– step2.html + js
• D3.jsでデータを取得する
– step3.html + js
• 取得したデータをsvgで可視化する
– step4.html + js
• 十分な量のデータがあれば、地図無しでもいけるかも
• 地図に重ねてデータを描画する
– step5.html + js 金沢区内公園を描画する

step5.js を改造し、「地域防災拠点」に対応
ファイル名を「./shelter_utf8.csv」にし、
csvファイルを同ディレクトリにコピー
csvのタイトルに合わせる
とりあえず固定で「white」を返す
csvのタイトルに合わせるcsvのタイトルに合わせる

余裕のある人用の、機能追加案
• Nameによって、色を変える
– 小学校、中学校、その他
• 他の情報も合わせて表示
– 津波非難施設、応急給水拠点、帰宅困難者一時滞在施設
– D3.js の更新＋アニメーション機能
.transition(). duration(ミリ秒).変化後のスタイル()
– JavaScriptのsetInterval()
• 静岡県雨量を使った例
– http://cloud.aitc.jp/20140627_D3js/sample6.html
• 自分の現在位置を表示
– HTML5のGeolocation API

今後の拡張の方向
• 付加情報を表示
– clickかmouseoverで、詳細情報を表示
• 地名・住所・関連情報など
– 文字をもっと見易くする（白抜き文字、など）
• http://www.slideshare.net/kadoppe/inline-svg/53
• 他のデータも合わせて表示
– 他のオープンデータ
– 社内の業務データなど
– 「もう１つ軸を足したい」時など
• 拡大／縮小
– 特定の区を詳細に見たい
– 倍率に合わせて、円の大きさや文字サイズを調整

Q&A
• 時間があれば、紹介
• 「地域防災拠点」を使った実装例
• step5example. js
• 横浜市統計情報ポータルサイトのデータを使った例
• http://www.city.yokohama.lg.jp/ex/stat/index2.html#24
• 「テレビ放送受信契約数」平成18年から24年の推移
• ライセンス
http://www.city.yokohama.lg.jp/front/aboutweb.html
> 私的使用のための複製や引用など著作権法上認められた場
合を除き、無断で複製・転用をすることはできません。
横浜市に勉強会での使用について問い合わせた結果
> 「横浜市統計書」からの出典を明らかにしていただければ、
> 著作権法上認められた場合に該当すると判断します。

D3.jsを使ったデータビジュアライズ勉強会

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to D3.jsを使ったデータビジュアライズ勉強会 (20)

More from aitc_jp (20)

D3.jsを使ったデータビジュアライズ勉強会