GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ

     - d3.js ver.3

  • このエントリーをはてなブックマークに追加

Data visualization

データビジュアライゼーション(D3.js)を学ぶための教材まとめ」も大分量が増えてきて、初めてD3.jsを学ぶという人にはどこから手をつけて良いものか解りづらくなってきました。

そこで、ゴールデンウィーク中にD3.jsを学んでみたいという方に、いくつか厳選してお勧めしてみたいと思います。

スライドを眺める

まずはD3.jsがどんなライブラリなのか把握しましょう。
about d3.js

チュートリアルを学ぶ

とりあえず分量・内容的に下記のチュートリアルがお勧めです。
D3 チュートリアル|スコット・マレイ|alignedleft

余裕があっていろんなレイアウトのグラフを描いてみたいなら、下記サイトを。
svg要素の基本的な使い方まとめ

コード共有サイトを使って実践

チュートリアルを手軽に試すなら、コード共有サイトを利用するのが楽チンです。
jsdo.it, jsfiddle, Tributary にテンプレート的なものを作ってみたのでForkするなどして使ってみてください。

Tributary | D3.js Template

動画で学ぶ

以下はTributaryを使ったD3.jsのライブコーディング動画です。
英語のコンテンツですが、下記動画は観ているだけでも楽しめるのでお勧めです。
dot enter
dot append

D3.js入門 (全17回) – プログラミングならドットインストール
プログラミング独学者の強い味方「ドットインストール」にD3.jsの講座が追加されています。

2014年追記

参考書で学ぶ

オライリーよりD3の入門書として最適な「インタラクティブ・データビジュアライゼーション」が発売されました。適度なボリュームで連休中に読むには最適の参考書です。興味ある方は是非。

インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化
Scott Murray
オライリージャパン
売り上げランキング: 8,746

「インタラクティブ・データビジュアライゼーション」D3.jsのイチオシ参考書が出版されます
【D3.js】デザイナーにお勧め「インタラクティブ・データビジュアライゼーション」感想

その他、まとめ

データビジュアライゼーション(D3.js)を学ぶための教材まとめ
D3.js プラグインまとめ
D3.js Wrapper Library

D3に興味が湧いたら

他のD3関連記事もどうぞ。
D3関連記事

 - d3.js ver.3

  • このエントリーをはてなブックマークに追加

Comment

  1. […] ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ | GUNMA GIS GEEK […]

  関連記事

raindrop-japan
夏バテぎみなのでD3.jsで、なんだかよくわからないもの作った。

なんだこれ? example 雨だれ見たいなものが日本の地形に変形するというよく …

What_skills_is_required_for_2014
Code for Americaに学ぶ、2014年に必要とされるスキル

「Code for America」については、以下の記事を参照してください。 …

chordgraph
【D3.js】NHKの参議院選挙サイトで使用されていた謎グラフ(Chord graph)的なものを作ってみる。

example 上記のような図を「Chord graph(コードグラフ)」という …

Circle Scale
d3.scaleと要素の面積

小ネタです。d3にはscaleという値を正規化するのにとても便利な機能があります …

fukuokatop2
福岡市のオープンデータを使用して交通危険個所マップを作成しました。

Civic Tech Advent Calendar 2013 11日目 参加記 …

d3_cover
D3.jsで再利用可能なコードの書き方を教えてくれる参考書

Developing a D3.js Edge D3.jsを取り扱った参考書とし …

svg mask
[SVG]ドーナツ状のcircleを描画する。

先日の勉強会にて「重ねたcircleの途中の色だけ変えたい」という質問があり、そ …

no image
【D3.js】 値の正規化(d3.scale)

例えば、上記の …

D3.js Openlayers
【D3.js】OpenLayers上にD3.jsで作成したSVGをオーバーレイ

出来た……けど、理解できてない orz OpenLayersライブラリを使ってO …

presimplify example
D3.jsとTopoJsonライブラリを使って地理情報を動的に簡素化する。

クライアントサイドのtopojsonには読み込んだ地理データを簡素化するpres …