D3.jsとは？柔軟なData Visualization Library

ページ内ナビ

概要

D3はdata-driven graphicsを構築するJavaScript libraryです。SVG、Canvas、HTML等のWeb標準を基盤に、array、scale、axis、shape、selection、transition、zoom等のmoduleを組み合わせて表示とinteractionを細かく制御できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-03

主な特徴

Web標準へdataを結び付けてgraphicsを構築する

D3はSVG、Canvas、HTML等のWeb標準を直接利用する低level approachを採り、dataからdynamic graphicsを作るための基盤を提供します。

出典：[1]

scale・axis・shape・selection等をmodule単位で組み合わせる

d3 packageはarray、axis、color、force、geo、hierarchy、scale、selection、shape、transition、zoom等のmoduleをまとめて提供し、必要なprimitiveを組み合わせてvisualizationを構成できます。

出典：[2]

向いている用途

chartの形やinteractionを細かく制御したいcustom visualizationに向く

既製chart componentのoptionだけでは表しにくいdata encoding、geometry、animation、interactionを自前で設計したい用途に適します。

出典：[1][2]

導入前の確認

高level chart componentより実装責務が大きい

D3のREADMEはlow-level approachを特徴としており、柔軟性と引き換えにlayout、DOM更新、event handling等をapplication側で組み立てる場面が増えます。

出典：[1]

7.9.0 packageのmodule形式とNode要件を確認する

v7.9.0 packageはtype: moduleを指定し、default exportはES module source、UMD buildも配布します。package metadataのNode要件は12以上です。

出典：[2][3]

参考にした公式資料

[1]D3 v7.9.0 README(2026-10-03)
[2]D3 v7.9.0 package metadata(2026-10-03)
[3]D3 v7.9.0 release(2026-10-03)
[4]D3 v7.9.0 ISC license(2026-10-03)

編集部からの補足

既製chartの設定だけでは表現しにくいcustom visualizationを作る場合に強いlibraryです。一方でlayout、DOM更新、interactionを細かく組み立てるため、単純なdashboard用途では高level chart libraryとの実装量差も比較してください。

3ステップで試す

1
検証用Node projectを作成する
D3をmoduleとして試す最小projectを作成します。v7.9.0 package metadataはNode.js 12以上を要求します。
mkdir d3-demo && cd d3-demo && npm init -y
2
D3 7.9.0をinstallする
d3 aggregate packageをversion固定し、scale・shape・selection等のmodule群を利用できるようにします。
npm install d3@7.9.0
3
scale APIをES moduleとして実行する
0〜10を0〜100へmappingするlinear scaleを作り、入力5が50へ変換されることを確認します。
node --input-type=module -e 'import { scaleLinear } from "d3"; console.log(scaleLinear([0,10],[0,100])(5))'

公式READMEで確認

成長

成長の推移 · 直近30日

113,802 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 0
Open PR: 14

開発アクティビティを蓄積中です。

Built with

Shell

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

visualization
data-visualization
charts
svg
chart
d3

Stars: 113,802
Forks: 22,637
Watchers: 3,535
Open Issues: 5
Contributors: 136
所有者種別: Organization
主要言語: Shell
ライセンス: ISC
リポジトリ最終更新: 2026/05/28