データを使って、チャートやグラフなど効果的に視覚表現して伝える「データビジュアライゼーション」を実装するのに便利なライブラリ、「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ファイルをダウンロードして使うこともできます。
詳しくは公式サイトをご参考ください。
- 公式サイト： http://d3js.org/
- 日本語版サイト： http://ja.d3js.node.ws/
D3.jsのサンプル
いくつか実際のサンプルを掲載していますので、ご参考ください。
公式サイトサンプル： https://observablehq.com/@d3/gallery
ブラウザエディタでかんたんに試すには？ –
「環境作るの面倒、まずはサクッと試してみたい。」という方には
「ブラウザエディタ」Bl.ock Builderを使えば、Web上で試せます。
まとめ： D3.jsの特徴
D3.jsはなんでも表現できる自由度が高い分、Google Chart などチャートライブラリに比べると、データバインディングやグラフの軸など、最初の理解が比較的時間がかかるという印象でした。
JavaScriptなどにまだ自信がなく、表現にさほどこだわりがなく、とにかくグラフにできればいい、などであれば、まずはチャートライブラリからはじめた方が簡単だと思います。
D3.jsをベースとした、c3.jsなどのチャートライブラリもあります。
チャートライブラリの表現では物足りなくなってきたり、動的なデータ入れ替えを使った表現がしたくなってきたときに、表現力が自由で高いd3.jsはオススメです！
