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.

インフォグラフィックス時代のD3.js入門

8,144 views

Published on

2013年1月5日(土)CSS Nite in SAPPORO, Vol.8 with 札幌IT飲み会
「新春ライトニングトーク大会」で話した内容です。

Published in: Technology

インフォグラフィックス時代のD3.js入門

  1. 1. CSS Nite in SAPPORO, Vol.8 with 札幌IT飲み会 「新春ライトニングトーク特集」インフォグラフィックス時代の D3.js入門 ましこ たかひろ 益子 貴寛 2013年1月5日 土曜日 TAPIO sweets garden
  2. 2. ましこ たかひろ 益子 貴寛 株式会社サイバーガーデンCSS Nite in SAPPORO 実行委員
  3. 3. まずサンプルを
  4. 4. Collision Detectionhttp://mbostock.github.com/d3/talk/20111018/collision.html
  5. 5. The Wealth & Health of Nations http://bost.ocks.org/mike/nations/
  6. 6. d3.layout.treemaphttp://mbostock.github.com/d3/talk/20111018/treemap.html
  7. 7. Word Cloud Generatorhttp://www.jasondavies.com/wordcloud/
  8. 8. House Hunting All Day, Every Day - Trulia Insights http://trends.truliablog.com/vis/tru247/
  9. 9. 007 - The Business of Bond http://007.lucklaboratories.com/
  10. 10. D3 Show Reelhttp://bl.ocks.org/1256572
  11. 11. The New York Times が D3.js を積極採用 Four Ways to Slice Obama s 2013 Budget Proposal - NYTimes.comhttp://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html
  12. 12. ほか、サンプルは
  13. 13. Gallery · mbostock/d3 Wiki · GitHubhttps://github.com/mbostock/d3/wiki/Gallery
  14. 14. シンプルなものは Basic Charts でGallery · mbostock/d3 Wiki · GitHubhttps://github.com/mbostock/d3/wiki/Gallery
  15. 15. 基本的なつかい方
  16. 16. 公式サイト D3.js - Data-Driven Documents http://d3js.org/
  17. 17. D3.js の特徴 jQueryと書き方が似ているCSSライクなセレクタ指定、DOM操作性、メソッドチェーンなど データ、ドキュメント、ビジュアルの分離 SVG、HTML5、CSS3によるベクター表現 なめらかなアニメーション
  18. 18. ライブラリの読み込み<script src="http://d3js.org/d3.v2.min.js"></script> あとは サンプルのソースコードをマネたりして がんばる!
  19. 19. ブラウザのSVGサポートは Internet Explorer 9 ∼ Firefox 3.0 ∼ Google Chrome 4.0 ∼ Safari 3.2 ∼ Opera 9.0 ∼ iOS Safari 3.2 ∼ Android Browser 3.0 ∼
  20. 20. 時代の大きな流れ
  21. 21. Graphical Webの拡がり;HTML5とその周辺技術で実現する http://gihyo.jp/design/column/newyear/2013/graphicalweb
  22. 22. Graphical Webの拡がり;HTML5とその周辺技術で実現する http://gihyo.jp/design/column/newyear/2013/graphicalweb
  23. 23. 注目される The Graphical WebGraphical Webの拡がり;HTML5とその周辺技術で実現する http://gihyo.jp/design/column/newyear/2013/graphicalweb
  24. 24. PNG SVG
  25. 25. 同感!
  26. 26. ありがとうございました

×