Upload
takeshi-osoekawa
View
832
Download
8
Embed Size (px)
DESCRIPTION
可視化ライブラリとして人気の D3.js を学ぶときの手掛かりになるオンラインリソースを集めました。
Citation preview
ちゃんと学ぶ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
インタラクション
東京
有楽町
新橋
浜松町
田町
品川
大崎五反田目黒
恵比寿
渋谷
原宿
代々木
新宿
新大久保
高田馬場
目白
池袋
大塚
巣鴨
駒込田端 西日暮里
日暮里
鶯谷
上野
御徒町
秋葉原
神田
by Takeshi OsoekawaYamanote direction signs
おすすめオンラインリソース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 じゃない部分かも