1. データビジュアライゼーション
-dc.jsで遊ぼう-
清水顕
株式会社ユーザベース エンジニア

2. 自己紹介
• 清水顕(SPEEDA品質改善チーム：Bug-D)
• 最近興味のあるもの
Oculus Rift
・先週結婚しました

3. 「びじゅあらいぜーしょん」って？

4. dc.jsとは
• 多次元解析用に作られたJavascript
のチャートライブラリ。配列フィ
ルタ処理ライブラリのCrossfilterと
データビジュアライゼーション作
成用ライブラリのD3.jsの技術を使
用して複数のチャートにまたがっ
てデータのフィルタリングを可能
にするうんぬんかんぬん・・・・

5. わけがわからないよ

7. SVG
(Scalable Vector Graphics)
• ピクセルベースではなく、線や面など図形の集合体とし
て画像を扱う
• HTML5でInline SVGがサポートされ、HTML内でSVGを
直接記述可能に

8. d3.js
• データビジュアライゼーション用に作られたJavaScript
ライブラリ
• データ駆動でSVGを使用したグラフ作成を容易にできる
• やや低レベルなライブラリ
• 極めるとちょーすごいこともできる

9. dc.js
• Crossfilterとd3.jsに依存したチャートライブラリ
• 複数のチャートにまたがってフィルタリングできる
• チャート描画時にd3.jsよりもめんどくさいコードを書か
なくて済む

10. dc.jsで遊んでみる

11. データを準備
• データ提供：SPEEDA
• 国内全上場企業の年度毎売上高を都道府県別に取得
• CSVに変換

12. デモ

13. 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);

14. 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());

15. 地図を出したい

16. GeoJSON
• 地理情報をJSONフォーマットで出力したもの
• Natural Earthに全世界の地理データ(！！)がある
• shape形式のデータをGeoJSONに変換すればできあが
り。
（※Windowsだと死ぬほどめんどくさい)
• dc.jsにGeoJSONを読み込んで地図を表示する機能が！

17. 参考図書
• インタラクティブ・データビジュアライゼーション
-D3.jsによるデータの可視化-