Anatomy

2016年8月31日水曜日

【D3.js講座】 D3.jsとは?

Anatomyでは、webサイトの情報を俯瞰するというコンセプトで開発しており、
多量のデータをブラウザの1画面に収める必要がありました。
そこで登場したのが D3.js です。
D3.jsはデータの可視化のためのJavaScriptライブラリです。(公式サイト:https://d3js.org/
Anatomyの全景ビューのタイル、ツリー、折れ線グラフなどをこの D3.jsを使って表現しています。


このD3.jsを例を挙げつつ紹介します。

準備

D3.jsを使用するにあたってまずはjsファイルを用意しなければなりません。
以下のようにjsファイルを取得してください。(または、公式サイトからダウンロード


<script src="https://d3js.org/d3.v4.min.js"></script>

表を作る

今回は試しに以下のような簡単な表をデータをもとに作成してみます。

リオ・オリンピック:国別メダル獲得数
country
medal
USA
121
UK
67
China
70
Russia
56
Japan
41
German
42

元となるデータは以下のように定義します。
var data = [{ "country":"USA","medal":121},
{"country":"UK","medal":67},
{"country":"China","medal":70},
{"country":"Russia","medal":56},
{"country":"Japan","medal":41},
{"country":"German","medal":42}]

そして、ひな形となるhtmlをあらかじめ用意しておきます。
<table>
     <thead>
          <tr>
               <th>country</th>
               <th>medal</th>
          </tr>
     </thead>
     <tbody>
     </tbody>
</table>

このtbodyに対してtrタグとtdタグを追加し、表を作成します。

D3.js

D3.jsを使い表を作成するとこのようなコードになります。
var d3tr = d3.select("table tbody").selectAll(".record").data(data).enter().append("tr");
d3tr.append("td").text(function(d){
     return d.country;
});
d3tr.append("td").text(function(d){
     return d.medal;
});

ここで確認してもらいたいのはfor文を使用していないということです。
d3trに対し、append("td")を一度使用するだけで、
データがセットされたすべてのtr要素に対して要素の追加が行われます。
また、tdタグに使用しているtext関数の引き数function(d)のdには、dataの各要素の値が渡されます。

jQuery

比較として、同じ処理をjQueryで書いてみました。
こちらではfor文を使用しています。
var $tbody = $("table > tbody");
for(var i = 0; i < data.length; i++){
     var $tr = $("<tr />");
     var $td1 = $("<td />");
     var $td2 = $("<td />");
     
     $tr.append($td1.text(data[i].country));
     $tr.append($td2.text(data[i].medal));
     $tbody.append($tr);
}


データを処理する場合、for文を使用する場面が多く出てくるかと思います。
「データの配列の要素数」と「DOM上の要素の数」を開発者が丁寧に管理する必要がないというのが、D3.jsの利点の一つとなります。

実際のサービスで確認!

 オンラインデモでは135個のwebページをタイルに置き換えて可視化しています。
135個のデータを一つ一つタイル(gタグ)にしていますが、この処理にはfor文を使用していません。


オンラインデモ



次回は、D3.jsを使用したsvg描画をご紹介します。

0 件のコメント:

コメントを投稿