【データ入門】D3.jsとは? – グラフのサンプルで理解

d3.js

データを使って、チャートやグラフなど効果的に視覚表現して伝える「データビジュアライゼーション」を実装するのに便利なライブラリ、「D3.js」についてです。

D3.jsとは?

D3.js(D3:Data-Driven Documents / データ駆動ドキュメント)

データを元に、Webで動的コンテンツを描画するJavaScriptライブラリです。

データを元に、チャートやグラフなどビジュアライズします。


Web標準準拠で、SVG、HTML、CSSなどを利用して、フレームワークに縛られずに最新ブラウザで実装できるのが特徴です。

データに基づいてドキュメントを操作するためのJavaScriptライブラリです。

D3は、HTML、SVG、CSSを使用してデータに命を吹き込むのに役立ちます。

D3はWeb標準に重点を置いているため、独自のフレームワークに縛られることなく、強力な視覚化コンポーネントとDOM操作へのデータ駆動型アプローチを組み合わせることなく、最新のブラウザーのすべての機能を利用できます。

D3.js公式サイトより http://d3js.org/

D3.jsの使い方

1. CDNを使う

最新のリリース版に直接リンクするには、次のスニペットをコピーします。

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

2. ローカル環境で使う

最新の.Zipファイルをダウンロードして使うこともできます。

https://github.com/d3/d3

詳しくは公式サイトをご参考ください。

D3.jsのサンプル

いくつか実際のサンプルを掲載していますので、ご参考ください。

公式サイトサンプル: https://observablehq.com/@d3/gallery

ブラウザエディタでかんたんに試すには? –

「環境作るの面倒、まずはサクッと試してみたい。」という方には

「ブラウザエディタ」Bl.ock Builderを使えば、Web上で試せます。

まとめ: D3.jsの特徴

D3.jsはなんでも表現できる自由度が高い分、Google Chart などチャートライブラリに比べると、データバインディングやグラフの軸など、最初の理解が比較的時間がかかるという印象でした。

JavaScriptなどにまだ自信がなく、表現にさほどこだわりがなく、とにかくグラフにできればいい、などであれば、まずはチャートライブラリからはじめた方が簡単だと思います。

D3.jsをベースとした、c3.jsなどのチャートライブラリもあります。

チャートライブラリの表現では物足りなくなってきたり、動的なデータ入れ替えを使った表現がしたくなってきたときに、表現力が自由で高いd3.jsはオススメです!

関連情報

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA