ちゃんと学ぶ D3.js

ちゃんと学ぶD3.jsby Takeshi 'osoken' OSOEKAWA

自己紹介Takeshi OSOEKAWA

某ITベンダーでデータ分析の仕事Data Visualization Japan 運営Hackathon によくでてる

D3.js とはによって書かれた JavaScript ライブラリ

に勤めているの作者でもある

上でコードを公開（ライセンスは修正BSD）データの可視化をメインターゲットにして開発された

Mike BostockThe New York TimesProtovis

GitHub

基本的なチャート

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

0%

1%

2%

3%

4%

5%

6%

7%

8%

9%

10%

11%

12%

Frequency

by Mike BostockBar Chart

アニメーション

AAPL

AMZN

IBM

MSFT

by Mike BostockD3 Show Reel

レイアウター

by Mike BostockForce-Directed Graph

インタラクション

東京

有楽町

新橋

浜松町

田町

品川

大崎五反田目黒

恵比寿

渋谷

原宿

代々木

新宿

新大久保

高田馬場

目白

池袋

大塚

巣鴨

駒込田端 西日暮里

日暮里

鶯谷

上野

御徒町

秋葉原

神田

by Takeshi OsoekawaYamanote direction signs

地図

by Mike BostockInterrupted Goode Homolosine

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

作者の作品集。短めのソースコードのサンプルが豊富

bl.ocks.org/mbostockhttp://bl.ocks.org/mbostock

ページ下部の Basic Charts が学習向け

公式のギャラリーhttps://github.com/mbostock/d3/wiki/Gallery

地図系の可視化に D3.js を使ったものが参考になる。地図データの加工などの記事もある

GUMMA GIS GEEKhttp://shimz.me/blog/category/d3-js

Malcolm Maclean が勉強しながら書いた（？）記事が元になっている

D3 Tips and Trickshttps://leanpub.com/D3-Tips-and-Tricks/read

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

SVGsvg 要素の基本的な使い方まとめ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/

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

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

さらなるトピックD3 Cheat Sheethttp://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.orghttp://bl.ocks.org/osoken

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