D3.jsチュートリアル

更新日:2020.07.16 作成日:2016.02.06
#JavaScript #D3js #データ可視化

以前から着手してみたかった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