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

  関連記事

d3.js
D3.jsの歴史。元になったデータビジュアライゼーションライブラリ一覧

D3.jsの歴史は意外と古く、前身となったライブラリがいくつかありますのでここで …

D3.jsで読み込んだgeoJSONデータをthree.jsを使って3D表示する。

マウスでグリグリできる。 example サンプル d3-threeDというライ …

d3.js
D3.jsのまとめを整理しました。

作成していたD3.jsに関するまとめですが、D3の話題が増えて行くにつれあまりに …

D3.js logo
2015年までに発売されたD3.js参考書をまとめてみた。

年末年始、とくにやることもなくて暇でしたら、D3で遊んでみては如何でしょうか。 …

【D3.js】 ワードクラウド 「d3-cloud」プラグイン

【追記】 バージョン上がって動かなくなったみたいなので、以下をどうぞ。 【D3. …

fizzbuzztable
D3.jsでサクッとFizzBuzzを可視化する

example D3.jsを使って、FizzBuzzの結果をテーブルで表示します …

reprojection
【D3.js】世界地図画像をクライアントサイドで再投影処理する

example 正距円筒図法で作成された世界地図画像をクライアント側で他の投影法 …

d3_Before_After_Image
【D3.js】Before After Image Slider

example スライダーで2枚の画像を切り替えて比較できる、いわゆる「Befo …

D3.js本の出版が止まらない(最近出版されたD3参考書)

参考書が増えてくると「定番のライブラリ」感が出てきて、なんか安心感があるよね。 …

【D3.js】サイズの大きなファイルを可視化する(ツリーマップ)

example 以前、アクセス流入元をツリーマップで表示してみたことがあるのです …