1. SIS Lab
  2. >
  3. Blog
  4. >
  5. D3.jsチュートリアル

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

TECH

2016.02.07

D3.jsで東京の地価データを可視化する

TECH

2016.09.03

Hubotで外部コマンドを実行する

TECH

2016.08.28

AceエディタをElectronに組み込む

TECH

2016.08.24

React + ElectronでFlickr連携可能なMarkdown Editorを作った

TECH

2016.05.11

Electronがv1.0.0になったのでMithril.jsと合わせてAmazonアフィリエイトリンクビルダーを作った

TECH

2016.02.20

ElectronでAmazonアフィリエイトリンクビルダーを作った

TECH

2016.02.07

JavaScript Ninjaの極意 「関数の呼び出し」

TECH

2016.02.01

Nightmare.jsでAmazonアフィリエイトのレポートを取得する