GUNMA GIS GEEK

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

*

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

     - d3.js

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

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

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

Comment

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

  関連記事

prefcoolrankthm
形がかっこいい順に都道府県を並べてみた。

「形がかっこいい」と思う都道府県ランキング – gooランキング G …

【D3.js】トランジション終了時にコールバックを呼ぶ
【D3.js】トランジション終了時にコールバックを呼ぶ

D3を使って要素を移動したりスタイルを変化させる際、変更(Transition) …

panning
【D3.js】水平パンニング

example データを表示する領域を制限して、ドラッグした際に続きのデータを見 …

前橋市一次避難場所
前橋市一次避難場所

「前橋市オープンデータライブラリー」から取得した町界データと一次避難場所データを …

ツイートワードクラウド
【D3.js】「全ツイート履歴」からWord cloudを作ってみた。

嗜好がバレる。 自分のすべてのツイートをダウンロードできるようにしました 日本の …

neighborscolor
【D3.js】隣接区の数で地図に色塗りをしてみました。

example 隣接する区画を表示するの続きです。 隣接するエリア数を元にコロプ …

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

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

円の外周から外周にラインを引く
【D3.js】円の外周から外周にラインを引く(暫定)

example * 表示されない場合はリロードしてください。 まぁ、見てのとおり …

textPahtJapan
【D3.js】文字で日本地図書いてみた。

example またもや小ネタです。 文字を使って日本地図を描いてみました。 北 …

d3.js
D3勉強会に関するアンケートにご協力ください

去年、2回ほどD3に関する勉強会を開催させていただきました。 D3.jsの勉強会 …