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

  関連記事

d3barchart000006
【D3.js】おさらい1回目 棒グラフ

昨年末、ブログレイアウトのリニューアルのために去年書いた記事を見直していたのです …

La Belle Japan
【D3.js】地図をデザインする

example 下記記事を参考に、ちょっとオシャレな感じの日本地図を作成してみま …

d3_Before_After_Image
【D3.js】Before After Image Slider

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

D3.js Voronoi Map
【D3.js】地図上にボロノイ図を描く

各黒い点(母点)がガソリンスタンドの位置です。 国土数値情報 燃料給油所データ( …

satellite1
【D3.js】 Satellite Projection(衛星俯瞰図)てすと

D3.jsには上記のような地図を表示するためのProjection(投影法)関数 …

japan scatter
「線グラフを群馬県にする」のはできたので、今度は都道府県を散布図にしてみた。

迷走中。 example 前回、線グラフを群馬県にしましたが、今回は都道府県を散 …

gsheatmap
【D3.js】 テーブルを使ったヒートマップ(Google Analytics 可視化)

色が濃いほど訪問者数が多い時間となってます。 Google Analyticsか …

smoothGeoPath
地図上のラインを滑らかに表示する

example geojsonのラインを補完して滑らかに表示してみました。 ちょ …

前橋市 平成22年男女別・年齢別人口構成
前橋市には、男子より女子の方が多く住んでいる。

example 男子の人口を、女子の人口が上回る地域が多数。 概要 前橋市オープ …

scatter_map
【D3.js】群馬県の賃貸価格データを可視化してみた(散布図&地図)

example クリックすると散布図上の要素を地図上にプロットします。 見出し1 …