D3.jsチュートリアル
更新日:2020.07.16
作成日:2016.02.06
以前から着手してみたかったD3.jsによる可視化の方法を学ぶために、ドットインストールにちょうど良い教材があったためそれを見ながら、確認していく。
D3.js入門 (全17回) - プログラミングならドットインストール
D3.jsとは
データ・ドリブン・ドキュメント(Data Driven Documents)の頭文字で、D3.js
。
「データに基づいてドキュメントを操作するための JavaScript ライブラリである。
データを描画する場合は、存在するデータごとに「どこに」「どうやって」描画するかを1つ1つのデータに対して指定しなければならない。例えば、for loopで存在するデータ分だけ指定するなど。
しかし、d3.jsはLoopの記述をすることなく、データを描画できる。それは、データ自身が、どこに描画されるかという情報を持っているからである。
触ってみた感じだと、jQueryっぽくDOMを操作しながら、Dataを起点として可視化を行うことができる。データが追加、削除されたからといって、コードを修正するのではなく、再描画するだけ。
update, enter, exit関数とは
data
を使った瞬間に仮想領域が作られる。
- update: 対応する要素がある場合 -> text, style
- enter : 対応する要素が足りない場合 -> append
- exit : 対応する要素が余った場合 -> remove
サンプルコードを読む中で上記の関数(update
,enter
,exit
)を利用しているコードがあった。
このレッスンを受けるまでは意味が分からなかったが、データセットと一致しない場合の処理を記述していただけであることを理解した。
d3.jsを利用して、どんなことがしたいのか
- GoogleMapsの地図上にデータをマッピングする
- 売上データなどを可視化する
参考
Related contents
![Eyecatch](https://farm2.staticflickr.com/1680/24844125586_c74f952e38_s.jpg)
TECH
2016.02.07
D3.jsで東京の地価データを可視化する
![Eyecatch](https://farm9.staticflickr.com/8168/28820861054_3f40884614_m.jpg)
TECH
2016.09.03
Hubotで外部コマンドを実行する
![Eyecatch](https://farm9.staticflickr.com/8537/29243326176_ea1c871651_s.jpg)
TECH
2016.08.28
AceエディタをElectronに組み込む
![Eyecatch](https://c1.staticflickr.com/9/8555/28577511064_1d5a39a929_m.jpg)
TECH
2016.08.24
React + ElectronでFlickr連携可能なMarkdown Editorを作った
![Eyecatch](https://farm8.staticflickr.com/7085/26951293955_748076b816_q.jpg)
TECH
2016.05.11
Electronがv1.0.0になったのでMithril.jsと合わせてAmazonアフィリエイトリンクビルダーを作った
![Eyecatch](https://farm2.staticflickr.com/1467/25143519475_14929051ec_z.jpg)
TECH
2016.02.20
ElectronでAmazonアフィリエイトリンクビルダーを作った
![Eyecatch](https://images-na.ssl-images-amazon.com/images/I/51hWBKh7tdL._SL160_.jpg)
TECH
2016.02.07
JavaScript Ninjaの極意 「関数の呼び出し」
![Eyecatch](https://images-na.ssl-images-amazon.com/images/I/61DHJGf1uSL._SL160_.jpg)
TECH
2016.02.01
Nightmare.jsでAmazonアフィリエイトのレポートを取得する