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

Please download to get full document.

View again

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
 90
 
 

Slides

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

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x