GUNMA GIS GEEK

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

*

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

     - d3.js ver.3

はてなブックマーク - ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ
Pocket

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を学びたい方にお勧めな厳選まとめ
Pocket

 - d3.js ver.3

Comment

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

  関連記事

globe wirework
D3.jsで作った地球儀にSVGフィルターエフェクトを適用する。

D3の描画機能にsvgの画像効果を適用することで多彩な表現が可能になります。そこ …

no image
【D3.js】D3 Arrays sample

D3 Arrays D3には、配列を操作するのに非常に便利な関数がたくさんありま …

FogEffect
リアルワールドをダンジョンPRG風に変えるスマホアプリ

マッピングは麻薬。 ウィザードリィで、白紙のマッピングシートを自分の手で埋めてい …

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

例えば、上記の …

FOSS4G 2014Hokkaido
「FOSS4G Hokkaido」にてD3.jsに関する講演をさせていただくこになりました。

FOSS4G 2014 Hokkaido 「FOSS4G Hokkaido」は地 …

mapzoom130830
【D3.js】ベクター地図のパン/ズーム&移動

example D3.jsで表示した地図のパン/ズーム&移動サンプルです。 サン …

qiitacircle
Qiitaのソーシャルグラフをサークル状に表示にしてみた。

こういったグラフ(図)を何て呼ぶのかわからない。 example 昨日作成したQ …

群馬県 小学校区 ボロノイ図 重ね合わせ
群馬県の小学校区とボロノイ図を重ね合わせてみた

example 以前紹介した「最適配置の数理」という本の中で、学校区の範囲とボロ …

Map-heart-054
ハート型の地図

ハッピーバレンタイン(1日遅れ) 上記はオロンス・フィネ(オロンティウス・フィネ …

no image
D3.jsとjQueryのセレクションメソッドの違い

本日は小ネタ。 D3.jsのセレクションは、ほぼjQueryのセレクションと似た …