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.
データビジュアライゼーション
-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 ...
var chart2 = dc.pieChart("#test2");
var data = crossfilter(dataset);
var pfctDimension = data.dimension(function (d) {retu...
地図を出したい
GeoJSON
• 地理情報をJSONフォーマットで出力したもの
• Natural Earthに全世界の地理データ(!!)がある
• shape形式のデータをGeoJSONに変換すればできあが
り。
(※Windowsだと死ぬほどめんどくさい...
参考図書
• インタラクティブ・データビジュアライゼーション
-D3.jsによるデータの可視化-
データビジュアライゼーション   Dc.jsで遊ぼう - 清水
Upcoming SlideShare
Loading in …5
×

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

  • Login to see the comments

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

  1. 1. データビジュアライゼーション -dc.jsで遊ぼう- 清水顕 株式会社ユーザベース エンジニア
  2. 2. 自己紹介 • 清水顕(SPEEDA品質改善チーム:Bug-D) • 最近興味のあるもの Oculus Rift ・先週結婚しました
  3. 3. 「びじゅあらいぜーしょん」って?
  4. 4. dc.jsとは • 多次元解析用に作られたJavascript のチャートライブラリ。配列フィ ルタ処理ライブラリのCrossfilterと データビジュアライゼーション作 成用ライブラリのD3.jsの技術を使 用して複数のチャートにまたがっ てデータのフィルタリングを可能 にするうんぬんかんぬん・・・・
  5. 5. わけがわからないよ
  6. 6. SVG (Scalable Vector Graphics) • ピクセルベースではなく、線や面など図形の集合体とし て画像を扱う • HTML5でInline SVGがサポートされ、HTML内でSVGを 直接記述可能に
  7. 7. d3.js • データビジュアライゼーション用に作られたJavaScript ライブラリ • データ駆動でSVGを使用したグラフ作成を容易にできる • やや低レベルなライブラリ • 極めるとちょーすごいこともできる
  8. 8. dc.js • Crossfilterとd3.jsに依存したチャートライブラリ • 複数のチャートにまたがってフィルタリングできる • チャート描画時にd3.jsよりもめんどくさいコードを書か なくて済む
  9. 9. dc.jsで遊んでみる
  10. 10. データを準備 • データ提供:SPEEDA • 国内全上場企業の年度毎売上高を都道府県別に取得 • CSVに変換
  11. 11. デモ
  12. 12. 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);
  13. 13. 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());
  14. 14. 地図を出したい
  15. 15. GeoJSON • 地理情報をJSONフォーマットで出力したもの • Natural Earthに全世界の地理データ(!!)がある • shape形式のデータをGeoJSONに変換すればできあが り。 (※Windowsだと死ぬほどめんどくさい) • dc.jsにGeoJSONを読み込んで地図を表示する機能が!
  16. 16. 参考図書 • インタラクティブ・データビジュアライゼーション -D3.jsによるデータの可視化-

×