d3 - SVG、Canvas、HTML でデータに命を吹き込みます。📊📈🎉

(Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:)

Created at: 2010-09-28 01:22:42
Language: JavaScript
License: ISC

D3: データ駆動型ドキュメント

D3 (またはD3.js ) は、Web 標準を使用してデータを視覚化するための JavaScript ライブラリです。D3 は、SVG、Canvas、および HTML を使用してデータに命を吹き込むのに役立ちます。D3 は、強力な視覚化とインタラクション技術を DOM 操作へのデータ駆動型アプローチと組み合わせて、最新のブラウザーのすべての機能と、データに適した視覚的インターフェイスを自由に設計できるようにします。

資力

インストール

npm を使用する場合は、

npm install d3
. GitHub で最新リリースをダウンロードすることもできます。最新のブラウザーのバニラ HTML の場合、Skypack から D3 をインポートします。

<script type="module">

import * as d3 from "https://cdn.skypack.dev/d3@7";

const div = d3.selectAll("div");

</script>

レガシー環境では、jsDelivr などの npm ベースの CDN から D3 の UMD バンドルをロードできます。

d3
グローバルがエクスポートされます:

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>

const div = d3.selectAll("div");

</script>

スタンドアロンの D3 マイクロライブラリを使用することもできます。たとえば、d3-selection :

<script type="module">

import {selectAll} from "https://cdn.skypack.dev/d3-selection@3";

const div = selectAll("div");

</script>

D3 はES2015 モジュールを使用して記述されています。Rollup、Webpack、または好みのバンドラーを使用してカスタム バンドルを作成します。D3 を ES2015 アプリケーションにインポートするには、特定の D3 モジュールから特定のシンボルをインポートします。

import {scaleLinear} from "d3-scale";

d3
または、すべてを名前空間 (ここでは)にインポートします。

import * as d3 from "d3";

または動的インポートを使用します。

const d3 = await import("d3");

Object.assignを使用して、個々のモジュールをインポートし、それらを

d3
オブジェクトに結合することもできます。

const d3 = await Promise.all([
  import("d3-format"),
  import("d3-geo"),
  import("d3-geo-projection")
]).then(d3 => Object.assign({}, ...d3));