D3.jsとは？使い方やメリット・デメリットについて

2024/12/04

吉田和司

D3.jsとは？使い方やメリットデメリットについて

現代社会では、データはビジネス、科学、教育、政策決定など、あらゆる分野において重要な資産となっています。
そんな膨大なデータを意思決定の材料として使用するには可視化が欠かせません。
昨今では様々なBI(Business Intelligence)ツールが普及し始めており、GUI操作で手軽にデータ可視化を行える時代になってきましたが、その中でも独自性を持ったグラフをさらに作成したい瞬間などはあるかと思います。
今回紹介するD3.jsはそんなカスタマイズ性を備えたJavaScriptのライブラリになり、既存BIツールであるLookerでも使用可能です。

javascriptd3.jsデータ可視化

はじめに

現代社会では、データはビジネス、科学、教育、政策決定など、あらゆる分野において重要な資産となっています。

そんな膨大なデータを意思決定の材料として使用するには可視化が欠かせません。

昨今では様々なBI(Business Intelligence)ツールが普及し始めており、GUI操作で手軽にデータ可視化を行える時代になってきましたが、その中でも独自性を持ったグラフをさらに作成したい瞬間などはあるかと思います。

今回紹介するD3.jsはそんなカスタマイズ性を備えたJavaScriptのライブラリになり、既存BIツールであるLookerでも使用可能です。

D3.jsの基本的概要

D3.js(Data-Driven-Documentsの頭3つのDをとってD3)は名前の通りデータ駆動型のドキュメントです。

JavaScriptのライブラリの一種である。

OSSとして提供されており、誰でも無料で使用することが可能。

SVGに対してデータをバインドすることが可能。

DOMの中のSVG要素に対してデータをバインドすることが可能。

LookerなどのBIツールに埋め込んで使用することも可能。

そもそもDOMとは？

DOM(Document Object Model)とは、HTMLやXMLなどをツリー構造に変換させたものです。

Webページは読み込まれる際に、HTMLを解析し、それをツリー構造として変換し、このツリー構造に変換されたものをDOMと呼び、JavaScriptなどで操作することが可能です。

<html> 

　<head> 

　　<title> HOGE! </title>

 </head> 

　<body> 

　　<h2>Hello!</h2> 

　　<p>World!</p> 

　</body> 

</html>

これをDOMに変換した図

この要素たちに直接変更を加えていくのがJavaScriptの役割になります。

ここにSVG要素があった場合、直接データをバインドできるのがD3.jsの魅力です。

D3.jsのメリット・デメリット

メリット

・直接DOMを操作できるため、カスタマイズ性が非常に高い。

・パフォーマンスが他のライブラリより良い。

・データ駆動なので、データが変われば動的にグラフが変わる。

・サポートされているデータ形式が多い。(JSON、CSV、TSV、GeoJSONなど)

・複雑なグラフを比較的容易に描画することができる。

デメリット

・学習コストが高く、コードが複雑になりがち

・一般的なグラフを作るのにも時間がかかる。

(カスタマイズ性がいらないのなら他ライブラリを使うべき)

・SVGによるグラフ描画だと、オブジェクト数に比例してレンダリング時間が長くなる

簡単に描画をしてみる

以下のコードは簡単な棒グラフを描画するD3.jsのコードです。

const data = [10, 20, 30, 40, 90]; 

// SVGサイズ設定 

const width = 500; 

const height = 300; 

const svg = d3.select("body") 

              .append("svg") 

              .attr("width", width) 

              .attr("height", height); 

const xScale = d3.scaleBand() 

                 .domain(data.map((_, i) => i)) 

                 .range([0, width]) //棒グラフ間の幅を調整可能 

                 .padding(0.1); 

const yScale = d3.scaleLinear() 

                 .domain([0, d3.max(data)]) 

                 .range([height, 0]);

 svg.selectAll("rect") .data(data)　//ここに目的のデータを入れる 

                       .enter() .append("rect") 

                       .attr("x", (_, i) => xScale(i)) 

                       .attr("y", d => yScale(d)) 

                       .attr("width", xScale.bandwidth()) 

                       .attr("height", d => height - yScale(d)) 

                       .attr("fill", "red");

このコードにより以下のような簡易的な棒グラフを作成可能です。

上にデータの数値を載せたいな、、となれば以下のコードを下に付け加えれば追加可能です

svg.selectAll("text") 

　　　　　　　.data(data) 

　　　　　　　.enter() 

　　　　　　　.append("text") 

　　　　　　　.attr("x", (_, i) => xScale(i) + xScale.bandwidth() / 2) // 棒の中央に配置

　　　　　　 .attr("y", d => yScale(d) - 5) // 棒の上に配置 

　　　　　　　.attr("text-anchor", "middle") // テキストを中央揃え

　　　　　　 .text(d => d) // データ値をテキストとして設定 

　　　　　　.attr("font-size", "12px")

　　　　　　 .attr("fill", "black"); // テキストの色

最後に

今回はD3.jsについて紹介をしました。BIツールなどでは表しきれないグラフの表現方法をD3を使用して表すことができます。学習コストは多少高いですが、より柔軟な独自性を持ったグラフを作成していきたいといった方についてはおすすめです。また、今回は紹介していませんが、後日Lookerでの使用方法などについてもまとめていこうと思っています。