Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」

1,104 views

Published on

発表日:2015年7月18日 AITC女子会
イベント名:最新技術を学ぶ~Web編~
タイトル:D3.js/Highchartsによるデータの可視化
発表者:アドソル日進株式会社 荒本道隆
案内URL:http://aitc.jp/events/20150718-Women/info_v2.html

Published in: Internet
  • Be the first to comment

2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」

  1. 1. D3.js /Highcharts によるデータの可視化 2015年7月18日 先端IT活用推進コンソーシアム クラウド・テクノロジー活用部会 リーダー 荒本道隆
  2. 2. 最初に  データを分析するためには、可視化が必須 ◦ オープンデータやIoTのデータ活用の最初の一歩  Excel や R もいいけど、WebならD3.js を使ってみよう  Web なら、作ったものをそのまま公開できる ◦ 可視化する過程で、色々と発見があるかも ◦ 工夫次第で、特殊効果も可能  絵を描くセンスが無くても ◦ データがあれば、格好良いものが作れる  参考動画 ◦ http://matome.naver.jp/odai/2137432558736685501 『統計をエンターテインメントに変えた天才ハンス・ロスリング のTED動画をランキングにしてみた』 動画内のアプリはFlashだけど、データがあれば D3.js でも作れる 2
  3. 3. 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
  4. 4. SVG(ScalableVector 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
  5. 5. SVG(ScalableVector 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
  6. 6. D3.js の動作概要-Step1 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/
  7. 7. D3.js の動作概要-Step2 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", :
  8. 8. D3.js の動作概要-Step3 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);"/> :
  9. 9. D3.js の動作概要-Step4 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);"/> :
  10. 10. D3.js の動作概要-Step5 10  地図の上に重ねて表示  map.selectAll('path').data(json.features).enter().append('path')…… D3.jsのprojection() で、地図データに 合わせてCSVデータの緯度・経度が自 動的に変換できる
  11. 11. D3.js の動作概要-Step6 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. 12. 応用例 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/ 興味のある人は、 ソースコードをダウンロード して改造してみてください
  13. 13. D3.js まとめ  実は、簡単に同じ事を出来る方法もあるけど、 ◦ Google Maps API  https://developers.google.com/maps/?hl=ja ◦ Microsoft Excel の PowerView  http://office.microsoft.com/ja-jp/excel-help/HA102899553.aspx  D3.js で実装することで、 ◦ 思い通りの表現・拡張ができる ◦ 地図以外にも活用できる ◦ 外部に持ち出せないデータも扱うことができる  使い方を覚えると、他のデータでも出来る ◦ 住所しか無い→緯度・経度に変換するサービスを使う  http://newspat.csis.u-tokyo.ac.jp/geocode/ ◦ データの加工は、Excelでやってしまえば簡単 13
  14. 14. Highcharts とは  http://www.highcharts.com/  インタラクティブなグラフ作成JavaScriptライブラリ  古いブラウザでも結構動く  jQueryが必要  商用利用に限り、有料  様々なグラフが作成可能で、細かいカスタマイズも出来る ◦ http://www.highcharts.com/demo  今回は一番基本の折れ線グラフを紹介 14http://www.highcharts.com/demo/line-basic
  15. 15. 時系列データを折れ線グラフにする時に困る事  データが等間隔ではなく、抜けている部分もある ◦ 年月日時分秒を正確に描画したい  拡大表示や、ポップアップで詳細表示をしたい  項目の表示/非表示を動的に変えたい  異なる単位のデータをまとめて描画したい  土日、祭日、イベント日を分かるようにしたい 15
  16. 16. 時系列データを折れ線グラフにする時に困る事  データが等間隔ではなく、抜けている部分もある ◦ 年月日時分秒を正確に描画したい ◦ type: 'datetime',  拡大表示や、ポップアップで詳細表示をしたい ◦ zoomType:"x", ◦ tooltip:{formatter:function () {}},  項目の表示/非表示を動的に変えたい ◦ 標準機能  異なる単位のデータをまとめて描画したい ◦ series[i] = {name:key,yAxis:yAxis,data:content,color:color,};  土日、祭日、イベント日を分かるようにしたい ◦ plotLines : xPlotLines, 16
  17. 17. Highchartsでの作図例 17 土曜日:青 日曜日:赤 範囲指定した領域 を拡大表示 表示/非表示を 切り替え 詳細表示 この辺は欠測だけど、 1日の幅は均等 左右で単位が違う
  18. 18. Highcharts まとめ  とても便利で、綺麗なグラフを作れるけど… ◦ 複雑なグラフは、結構JavaScriptを書く必要がある  JavaScriptでのデータ操作に慣れていないと大変かも ◦ 想定外のデータがあると、想定外の動きをする  グラフ作成の基本は抑えておく(最大値・最小値を固定、など)  データが貯まってみないと分からない事も多い  Excelのグラフ作成機能に満足できなければ ◦ Highcharts を試してみてください 18
  19. 19. まとめ  データの可視化で、得意技を身につけよう ◦ D3.js/Highcharts/Excel/R  Webで公開するなら、D3.js/Highcharts で ◦ ExcelやRでグラフ化すると、変換が必要 ◦ Webなんだから、インタラクティブなものを ◦ JavaScriptを得意言語にすると、とても便利  開発時は、Webサーバは不要 ◦ 必要なのは、テキストエディタ、ブラウザ、データ ◦ データが静的、もしくはAPIで公開されている事 ◦ 良いものができたら、Webサーバに置いて公開  まずは ◦ サンプルや、気に入ったサイトのソースコードを参照 19

×