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

1. CSS Nite in SAPPORO, Vol.8 with 札幌IT飲み会
「新春ライトニングトーク特集」
インフォグラフィックス時代の
D3.js入門
ましこ たかひろ
益子 貴寛
2013年1月5日 土曜日
TAPIO sweets garden

2. ましこ たかひろ
益子 貴寛
株式会社サイバーガーデン
CSS Nite in SAPPORO 実行委員

3. まずサンプルを

4. Collision Detection
http://mbostock.github.com/d3/talk/20111018/collision.html

5. The Wealth & Health of Nations
http://bost.ocks.org/mike/nations/

6. d3.layout.treemap
http://mbostock.github.com/d3/talk/20111018/treemap.html

7. Word Cloud Generator
http://www.jasondavies.com/wordcloud/

8. House Hunting All Day, Every Day - Trulia Insights
http://trends.truliablog.com/vis/tru247/

9. 007 - The Business of Bond
http://007.lucklaboratories.com/

10. D3 Show Reel
http://bl.ocks.org/1256572

11. The New York Times が D3.js を積極採用
Four Ways to Slice Obama s 2013 Budget Proposal - NYTimes.com
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

12. ほか、サンプルは

13. Gallery · mbostock/d3 Wiki · GitHub
https://github.com/mbostock/d3/wiki/Gallery

14. シンプルなものは Basic Charts で
Gallery · mbostock/d3 Wiki · GitHub
https://github.com/mbostock/d3/wiki/Gallery

15. 基本的なつかい方

16. 公式サイト
D3.js - Data-Driven Documents
http://d3js.org/

17. D3.js の特徴
jQueryと書き方が似ている
CSSライクなセレクタ指定、DOM操作性、メソッドチェーンなど
データ、ドキュメント、ビジュアルの分離
SVG、HTML5、CSS3によるベクター表現
なめらかなアニメーション

18. ライブラリの読み込み
<script src="http://d3js.org/d3.v2.min.js">
</script>
あとは
サンプルのソースコードをマネたりして
がんばる！

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. 時代の大きな流れ

21. Graphical Webの拡がり；HTML5とその周辺技術で実現する
http://gihyo.jp/design/column/newyear/2013/graphicalweb

22. Graphical Webの拡がり；HTML5とその周辺技術で実現する
http://gihyo.jp/design/column/newyear/2013/graphicalweb

23. 注目される
The Graphical Web
Graphical Webの拡がり；HTML5とその周辺技術で実現する
http://gihyo.jp/design/column/newyear/2013/graphicalweb

25. PNG SVG

26. 同感！

27. ありがとうございました