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 […]

  関連記事

Pie Chart Btn
D3.jsで円グラフになるボタン作った。

円グラフ祭り!

svg logo
SVGをぬるぬる動かしたいので勉強中

SVGアニメーション習作。 D3のトランジション機能を使うことで殆どの用途を満た …

parallel_coordinates_Google_Map
【D3.js】パラレルコーディネート図と地図を連動させる(未完成)

example 以前、作成したパラレルコーディネート図とGoogle Maps …

D3 Deconstructor
D3.jsで作成されたグラフからデータを抜き出すChromeエクステンション「D3 Deconstructor」

公式サイト 海外のD3クラスタで話題になっていたGoogle Chromeエクス …

massshooting calendar
アメリカの銃乱射事件をカレンダーに視覚化してみた。

Mass Shooting Trackerというサイトで2013年から2105年 …

webixAndD3js141216
WebixとD3.jsを使ってレスポンシブなグラフを作成する

Webix Advent Calendar 2014 16日目の記事です。 今回 …

d3 drag example
【D3.js】Drag ビヘイビア学習中。

example 上記サンプルは、circle要素を適当にぐりぐりドラッグすると微 …

隣接市区町村表示
【D3.js】隣接する区画を表示する

example こちらのサンプルを見て日本地図版を作ってみました。 マウスオーバ …

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

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

d3leaflet2014051
【D3.js】 LeafletにSVGをオーバーレイする。

Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示す …