Upload
chome03
View
1.834
Download
3
Embed Size (px)
Citation preview
データビジュアライゼーション-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によるデータの可視化-