データビジュアライゼーション dc.jsで遊ぼう - 清水
TRANSCRIPT
![Page 1: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/1.jpg)
データビジュアライゼーション-dc.jsで遊ぼう-
清水顕
株式会社ユーザベース エンジニア
![Page 2: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/2.jpg)
自己紹介• 清水顕(SPEEDA品質改善チーム:Bug-D)
• 最近興味のあるもの
Oculus Rift
・先週結婚しました
![Page 3: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/3.jpg)
「びじゅあらいぜーしょん」って?
![Page 4: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/4.jpg)
dc.jsとは• 多次元解析用に作られたJavascript
のチャートライブラリ。配列フィルタ処理ライブラリのCrossfilterとデータビジュアライゼーション作成用ライブラリのD3.jsの技術を使用して複数のチャートにまたがってデータのフィルタリングを可能にするうんぬんかんぬん・・・・
![Page 5: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/5.jpg)
わけがわからないよ
![Page 6: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/6.jpg)
![Page 7: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/7.jpg)
SVG(Scalable Vector Graphics)
• ピクセルベースではなく、線や面など図形の集合体として画像を扱う
• HTML5でInline SVGがサポートされ、HTML内でSVGを直接記述可能に
![Page 8: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/8.jpg)
d3.js• データビジュアライゼーション用に作られたJavaScript
ライブラリ
• データ駆動でSVGを使用したグラフ作成を容易にできる
• やや低レベルなライブラリ
• 極めるとちょーすごいこともできる
![Page 9: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/9.jpg)
dc.js• Crossfilterとd3.jsに依存したチャートライブラリ
• 複数のチャートにまたがってフィルタリングできる
• チャート描画時にd3.jsよりもめんどくさいコードを書かなくて済む
![Page 10: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/10.jpg)
dc.jsで遊んでみる
![Page 11: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/11.jpg)
データを準備• データ提供:SPEEDA
• 国内全上場企業の年度毎売上高を都道府県別に取得
• CSVに変換
![Page 12: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/12.jpg)
デモ
![Page 13: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/13.jpg)
var chart = dc.barChart("#test");
var data = crossfilter(dataset);var yearDimension = data.dimension(function(d) {return d.year;});var dataSumGroup = yearDimension.group().reduceSum(
function(d) {return d.data_num / 1000000000000;});
var minYear = d3.min(dataset,function(d) {return d.year;});var maxYear = d3.max(dataset,function(d) {return d.year;});
chart.width(768).height(480).x(d3.scale.linear().domain([minYear,maxYear])).yAxisLabel("売上高(単位:1兆円)").dimension(yearDimension).group(dataSumGroup);
![Page 14: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/14.jpg)
var chart2 = dc.pieChart("#test2");
var data = crossfilter(dataset);var pfctDimension = data.dimension(function (d) {return d.pfct;});var pieGroup = pfctDimension.group().reduceSum(
function (d) {return d.data_num / 1000000000000;});
chart2.width(600).height(1000).innerRadius(100).dimension(pfctDimension).group(pieGroup).legend(dc.legend());
![Page 15: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/15.jpg)
地図を出したい
![Page 16: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/16.jpg)
GeoJSON• 地理情報をJSONフォーマットで出力したもの
• Natural Earthに全世界の地理データ(!!)がある
• shape形式のデータをGeoJSONに変換すればできあがり。
(※Windowsだと死ぬほどめんどくさい)
• dc.jsにGeoJSONを読み込んで地図を表示する機能が!
![Page 17: データビジュアライゼーション Dc.jsで遊ぼう - 清水](https://reader034.vdocuments.net/reader034/viewer/2022052202/558ea83a1a28abf6118b46d3/html5/thumbnails/17.jpg)
参考図書• インタラクティブ・データビジュアライゼーション
-D3.jsによるデータの可視化-