可視化ライブラリとして人気の D3.js を学ぶときの手掛かりになるオンラインリソースを集めました。

1. ちゃんと学ぶD3.js
by Takeshi 'osoken' OSOEKAWA

2. 自己紹介
Takeshi OSOEKAWA
某ITベンダーでデータ分析の仕事
Data Visualization Japan 運営
Hackathon によくでてる

3. D3.js とは
によって書かれた JavaScript ライブラリ
The New York Times
Protovis
に勤めている
Mike Bostock
の作者でもある
GitHub
上でコードを公開（ライセンスは修正BSD）
データの可視化をメインターゲットにして開発された

4. 基本的なチャート
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
12%
11%
10%
9%
8%
7%
6%
5%
4%
3%
2%
1%
0%
Frequency
Bar Chart by Mike Bostock

5. アニメーション
AAPL
AMZN
IBM
MSFT
D3 Show Reel by Mike Bostock

6. レイアウター
Force-Directed Graph by Mike Bostock

7. インタラクション
東京
有楽町
新橋
浜松町
田町
品川
大崎
目黒五反田
恵比寿
渋谷
池袋
目白
高田馬場
新大久保
代々木
原宿
新宿
大塚
巣鴨
駒込
田端西日暮里
日暮里
鶯谷
上野
御徒町
秋葉原
神田
Yamanote direction signs by Takeshi Osoekawa

8. 地図
Interrupted Goode Homolosine by Mike Bostock

9. おすすめオンラインリソース
bl.ocks.org/mbostock
公式のギャラリー
GUMMA GIS GEEK
D3 Tips and Tricks

10. bl.ocks.org/mbostock
http://bl.ocks.org/mbostock
作者の作品集。短めのソースコードのサンプルが豊富

11. 公式のギャラリー
https://github.com/mbostock/d3/wiki/Gallery
ページ下部の Basic Charts が学習向け

12. GUMMA GIS GEEK
http://shimz.me/blog/category/d3-js
地図系の可視化に D3.js を使ったものが参考になる。地図データ
の加工などの記事もある

13. D3 Tips and Tricks
https://leanpub.com/D3-Tips-and-Tricks/read
Malcolm Maclean が勉強しながら書いた（？）記事が元になってい
る

14. D3.js 以外で必要な知識
SVG
JavaScript の Array のメソッド
その他

15. SVG
svg 要素の基本的な使い方まとめ
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm
MDN の SVG リファレンス
https://developer.mozilla.org/ja/docs/Web/SVG
W3C 勧告
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/

16. JavaScript の Array のメソッド
forEach, map, filter, sort をデータの整形によく使う
オライリー社のJavaScript リファレンス 第6版

17. その他
HTMLタグは基本
CSS のセレクタでセレクション
セレクションしたものに対して操作する

18. さらなるトピック
D3 Cheat Sheet
http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf
公式のAPIリファレンス
https://github.com/mbostock/d3/wiki/API-Reference
D3js.jp (facebook グループ)
https://www.facebook.com/groups/d3js.jp/
bl.ocks.org
http://bl.ocks.org/osoken

19. まとめ
豊富なサンプルをひたすら読むのがよさそう
「ちょっと変える」は意外と大変
日本語のドキュメントも着々と増えている
詰まるのは D3.js じゃない部分かも