2015年7月期aitc女子会「d3.js/highchartsによるデータの可視化」
TRANSCRIPT
D3.js /Highcharts
によるデータの可視化
2015年7月18日
先端IT活用推進コンソーシアム
クラウド・テクノロジー活用部会
リーダー 荒本道隆
最初に データを分析するためには、可視化が必須
◦ オープンデータやIoTのデータ活用の最初の一歩
Excel や R もいいけど、WebならD3.js を使ってみよう
Web なら、作ったものをそのまま公開できる
◦ 可視化する過程で、色々と発見があるかも
◦ 工夫次第で、特殊効果も可能
絵を描くセンスが無くても
◦ データがあれば、格好良いものが作れる
参考動画
◦ http://matome.naver.jp/odai/2137432558736685501
『統計をエンターテインメントに変えた天才ハンス・ロスリングのＴＥＤ動画をランキングにしてみた』
動画内のアプリはFlashだけど、データがあれば D3.js でも作れる
2
D3.js とは
http://d3js.org/
Webで、データをSVGに変換するライブラリ
◦ アニメーション効果を付けられる
◦ 地図が簡単に描け、緯度・経度の扱いも簡単
AITCオープンラボでのD3.jsハンズオン
◦ http://cloud.aitc.jp/20140627_D3js/
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]
ウィキペデアより
3
SVG(Scalable Vector Graphics)について
Wikipedia ◦ http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
SVG仕様 ◦ http://www.hcn.zaq.ne.jp/___/SVG11-2nd/
使用上の注意
◦ 順番通りに上に重ねて描画
◦ 未対応ブラウザ（IE8以前）だと、何も表示されない
◦ ブラウザによって、微妙に見え方が違うこともある
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。
4
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>
5
D3.js の動作概要－Step１
6
表示したいCSVファイルを探す
point_id,pointname,office_id,latitude,longitude,address
1,稲取,43,347786,1390528,賀茂郡東伊豆町稲取
2,天城,43,348136,1389364,賀茂郡河津町梨本
3,南伊豆,43,346494,1388611,賀茂郡南伊豆町下賀茂
4,門野,43,347738,1388208,賀茂郡松崎町門野
5,婆娑羅,43,347266,1388675,下田市加増野
6,下田,43,346791,1389533,下田市中
11,松崎,43,347555,1387825,賀茂郡松崎町江奈
12,仁科峠,43,348533,1388422,賀茂郡西伊豆町宇久須
13,椎原,43,347194,1389297,下田市椎原
14,湯ヶ野,43,347730,1389583,賀茂郡河津町湯ケ野
：
『ふじのくにオープンデータカタログ』 静岡県のリアルタイム河川情報 →雨量観測所、水位観測所の位置情報及びデータの解説→雨量観測局情報
http://sipos.shizuoka2.jp/rain-river/
D3.js の動作概要－Step２
7
CSVファイルを読み込んで、JSONに変換
d3.csv(url, function(csv) {});
point_id,pointname,office_id,latitude,longitude,address
1,稲取,43,347786,1390528,賀茂郡東伊豆町稲取
2,天城,43,348136,1389364,賀茂郡河津町梨本
3,南伊豆,43,346494,1388611,賀茂郡南伊豆町下賀茂
4,門野,43,347738,1388208,賀茂郡松崎町門野
5,婆娑羅,43,347266,1388675,下田市加増野
6,下田,43,346791,1389533,下田市中
11,松崎,43,347555,1387825,賀茂郡松崎町江奈
12,仁科峠,43,348533,1388422,賀茂郡西伊豆町宇久須
13,椎原,43,347194,1389297,下田市椎原
14,湯ヶ野,43,347730,1389583,賀茂郡河津町湯ケ野
：
[
{
"point_id": "1",
"pointname": "稲取",
"office_id": "43",
"latitude": "347786",
"longitude": "1390528",
"address": "賀茂郡東伊豆町稲取"
},
{
"point_id": "2",
"pointname": "天城",
"office_id": "43",
：
D3.js の動作概要－Step３
8
JSONをSVGに変換 svg.selectAll(".node").data(points).enter().append("circle")....
[
{
"point_id": "1",
"pointname": "稲取",
"office_id": "43",
"latitude": "347786",
"longitude": "1390528",
"address": "賀茂郡東伊豆町稲取"
},
{
"point_id": "2",
"pointname": "天城",
"office_id": "43",
：
<svg width="900" height="650">
<circle class="node" cx="640.0184105462031"
cy="402.13758316153144" r="5" style="stroke: rgb(0, 0, 0);
stroke-width: 1px; fill: rgb(255, 255, 255);"/>
<circle class="node" cx="609.5449618063794"
cy="390.9793852272778" r="5" style="stroke: rgb(0, 0, 0);
stroke-width: 1px; fill: rgb(0, 0, 255);"/>
：
D3.js の動作概要－Step４
9
ブラウザで表示
<svg width="900" height="650">
<circle class="node" cx="640.0184105462031"
cy="402.13758316153144" r="5" style="stroke: rgb(0, 0, 0);
stroke-width: 1px; fill: rgb(255, 255, 255);"/>
<circle class="node" cx="609.5449618063794"
cy="390.9793852272778" r="5" style="stroke: rgb(0, 0, 0);
stroke-width: 1px; fill: rgb(0, 0, 255);"/>
：
D3.js の動作概要－Step５
10
地図の上に重ねて表示 map.selectAll('path').data(json.features).enter().append('path')……
D3.jsのprojection() で、地図データに合わせてCSVデータの緯度・経度が自動的に変換できる
D3.js の動作概要－Step６
11
クリックイベントで、どのデータが対象かが分かる
.on('click', function(d) {});
[
{
"point_id": "1",
"pointname": "稲取",
"office_id": "43",
"latitude": "347786",
"longitude": "1390528",
"address": "賀茂郡東伊豆町稲取"
},
{
"point_id": "2",
"pointname": "天城",
"office_id": "43",
：
応用例
12
クリックしたcircleの詳細表示
http://cloud.aitc.jp/20140717_D3js/tv/
http://cloud.aitc.jp/20140717_D3js/step5example.html
ちょっと凝ったアニメーション
.transition().duration(500) を追加
http://cloud.aitc.jp/20140717_D3js/tv/step6example.html
気象庁APIを参照し、日本地図を使用
http://api.aitc.jp/jmardb/help
http://cloud.aitc.jp/20140927_D3js/step5EX.html
http://cloud.aitc.jp/20140927_D3js/step5EX2.html
インタラクティブなもの
http://aramoto.sakura.ne.jp/sparql/
興味のある人は、
ソースコードをダウンロードして改造してみてください
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 で実装することで、
◦ 思い通りの表現・拡張ができる
◦ 地図以外にも活用できる
◦ 外部に持ち出せないデータも扱うことができる
使い方を覚えると、他のデータでも出来る
◦ 住所しか無い→緯度・経度に変換するサービスを使う
http://newspat.csis.u-tokyo.ac.jp/geocode/
◦ データの加工は、Excelでやってしまえば簡単 13
Highcharts とは http://www.highcharts.com/
インタラクティブなグラフ作成JavaScriptライブラリ
古いブラウザでも結構動く
jQueryが必要
商用利用に限り、有料
様々なグラフが作成可能で、細かいカスタマイズも出来る
◦ http://www.highcharts.com/demo
今回は一番基本の折れ線グラフを紹介
14 http://www.highcharts.com/demo/line-basic
時系列データを折れ線グラフにする時に困る事
データが等間隔ではなく、抜けている部分もある
◦ 年月日時分秒を正確に描画したい
拡大表示や、ポップアップで詳細表示をしたい
項目の表示／非表示を動的に変えたい
異なる単位のデータをまとめて描画したい
土日、祭日、イベント日を分かるようにしたい
15
時系列データを折れ線グラフにする時に困る事
データが等間隔ではなく、抜けている部分もある
◦ 年月日時分秒を正確に描画したい
◦ type: 'datetime',
拡大表示や、ポップアップで詳細表示をしたい
◦ zoomType: "x",
◦ tooltip: {formatter: function () {}},
項目の表示／非表示を動的に変えたい
◦ 標準機能
異なる単位のデータをまとめて描画したい
◦ series[i] = {name:key, yAxis:yAxis, data:content, color:color, };
土日、祭日、イベント日を分かるようにしたい ◦ plotLines : xPlotLines,
16
Highchartsでの作図例
17
土曜日：青
日曜日：赤
範囲指定した領域を拡大表示
表示／非表示を切り替え
詳細表示
この辺は欠測だけど、
１日の幅は均等
左右で単位が違う
Highcharts まとめ とても便利で、綺麗なグラフを作れるけど…
◦ 複雑なグラフは、結構JavaScriptを書く必要がある
JavaScriptでのデータ操作に慣れていないと大変かも
◦ 想定外のデータがあると、想定外の動きをする
グラフ作成の基本は抑えておく（最大値・最小値を固定、など）
データが貯まってみないと分からない事も多い
Excelのグラフ作成機能に満足できなければ
◦ Highcharts を試してみてください
18
まとめ データの可視化で、得意技を身につけよう
◦ D3.js／Highcharts／Excel／R
Webで公開するなら、D3.js／Highcharts で
◦ ExcelやRでグラフ化すると、変換が必要
◦ Webなんだから、インタラクティブなものを
◦ JavaScriptを得意言語にすると、とても便利
開発時は、Webサーバは不要
◦ 必要なのは、テキストエディタ、ブラウザ、データ
◦ データが静的、もしくはAPIで公開されている事
◦ 良いものができたら、Webサーバに置いて公開
まずは
◦ サンプルや、気に入ったサイトのソースコードを参照
19