データビジュアライゼーション-dc.jsで遊ぼう-

清水顕

株式会社ユーザベース エンジニア

自己紹介• 清水顕(SPEEDA品質改善チーム：Bug-D)

• 最近興味のあるもの

Oculus Rift

・先週結婚しました

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

dc.jsとは• 多次元解析用に作られたJavascript

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

わけがわからないよ

SVG(Scalable Vector Graphics)

• ピクセルベースではなく、線や面など図形の集合体として画像を扱う

• HTML5でInline SVGがサポートされ、HTML内でSVGを直接記述可能に

d3.js• データビジュアライゼーション用に作られたJavaScript

ライブラリ

• データ駆動でSVGを使用したグラフ作成を容易にできる

• やや低レベルなライブラリ

• 極めるとちょーすごいこともできる

dc.js• Crossfilterとd3.jsに依存したチャートライブラリ

• 複数のチャートにまたがってフィルタリングできる

• チャート描画時にd3.jsよりもめんどくさいコードを書かなくて済む

dc.jsで遊んでみる

データを準備• データ提供：SPEEDA

• 国内全上場企業の年度毎売上高を都道府県別に取得

• CSVに変換

デモ

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

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

地図を出したい

GeoJSON• 地理情報をJSONフォーマットで出力したもの

• Natural Earthに全世界の地理データ(！！)がある

• shape形式のデータをGeoJSONに変換すればできあがり。

（※Windowsだと死ぬほどめんどくさい)

• dc.jsにGeoJSONを読み込んで地図を表示する機能が！

参考図書• インタラクティブ・データビジュアライゼーション

-D3.jsによるデータの可視化-