D3.js入門 – 「データ・ドリブン」という特徴について
はじめに
D3.jsについて調べ始めた、t-hondaです。
前回はいきなりD3.jsとRuby on Railsを組み合わせてグラフを表示してみましたが
今回はD3.jsの入門編として、特徴と、簡単なソースの書き方について
サンプルを挙げて書いていきたいと思います。
D3.jsの特徴
以下の弊社のブログ(※1)でも取り上げられていますが、D3.jsは
「データ・ドリブン・ドキュメント」
の略であり
「データに基づいてドキュメントを操作するための JavaScript ライブラリ」
であると定義されています。
D3.js - 日本語ドキュメントより(太字は著者追記)
この「データ・ドリブン」であり、「データに基づいてドキュメントを操作する」という特徴について
以下のサンプルで解説していきたいと思います。
※1 弊社ブログ
[HTML5] D3を利用してデータを可視化してビジネスに活かす
D3.jsで始めるData-Drivenなページ作成
サンプルソース
index.html
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<title>D3 p tag sample</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var ary = [10, 20, 30, 40, 50];
d3.select("body").selectAll("p")
.data(ary)
.enter()
.append("p")
.text(function(d) {return d});
</script>
</body>
</html>
D3.jsを使い、配列で宣言されたデータをpタグで表示する、簡単なサンプルです。
ソースを解説すると、以下のようになります。
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
D3.jsのライブラリを参照します。
var ary = [10, 20, 30, 40, 50];
表示するデータを配列で宣言します。
d3.select("body").selectAll("p")
.data(ary)
.enter()
.append("p")
.text(function(d) {return d});
D3.jsが「ドキュメントを操作」している部分です。
D3.jsの書式の特徴として、メソッドチェーンでメソッドを繋げていくことで
ドキュメント(今回はHTML)を作成していくことが挙げられます。
一つずつメソッドを見ていくと、以下のようになります。
・d3.select("body")
D3のselect()メソッドを呼び出し、HTML内のbodyタグを選択します。
・selectAll("p")
HTML内のpタグを全て選択します。
但しこの時点ではpタグは存在しないため、空の要素が返されます。
この空の要素は、作成予定のHTMLタグだと考えてください。
・data(ary)
10行目で宣言したデータを、作成予定のpタグにバインドします。
バインドすることで、以降の処理がデータの数だけループして実行されます。
・enter()
バインドされたデータを表示するための要素を作成するため、enter()メソッドを呼び出します。
但しこの時点では、要素の具体的なタグは指定していません。
・append("p")
上記のenter()が作成した要素に、pタグを設定します。
・text(・・・)
上記で作成したpタグ内に、()内で指定した文字を埋め込みます。
今回は()内に記述されている無名関数が返す値が、そのまま表示されます。
・function(d) {return d}
上記data(ary) でバインドしたデータは配列でした。
この配列の要素が一つずつ、引数dに渡されてきます。
今回は return d で、配列の要素をそのまま返却しているので
配列内の値がそのまま表示されることになります。
ソースをブラウザで実行すると、以下のように表示されます。
この表示のHTMLソースは以下のようになります。
このように、ソースの10行目で定義した配列のデータが
HTML内のpタグとして全て表示されています。
「データに基づいてドキュメントを操作」してみる
では、先のソースのデータを変更してみたいと思います。
var ary = ["alpha", "beta", "gamma", "delta"];
ソースをブラウザで実行すると、以下のように表示されます。
この表示のHTMLソースは以下のようになります。
HTML内のpタグが、変更した値に書き換えられていることが分かるかと思います。
このように、D3.jsは「データに基づい」て、「ドキュメント」(今回はHTML)を
「操作」していることが分かりました。
まとめ
今回はグラフの表示等、見栄えが良い(?)サンプルではなく
簡単なpタグを表示するサンプルを使ってみました。
D3.jsはグラフや地図などを表示するだけのライブラリなのではなく
もっと広義のドキュメント(今回はHTMLのpタグ)をデータに基づいて操作しています。
この
データが視覚化を制御
をしている「データ・ドリブン」という特徴を、D3.jsが持つことを実感して頂ければ幸いです。
![[Transcribe] 動画内でしゃべった言葉をテキスト検索可能にする](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-cd051e80347b7e8a807fef242f24e718/ccaa2ddf9bcf8223013f2ee1cc04ed9a/amazon-transcribe)
![[Bun] JavaScriptでC言語のファイルを簡単に実行する](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-8c6d505db5519c426a9f992bfb37e1a0/753887f068b49792ca4f521aa8f565dd/eyecatch_bun_1200x630.png)
