/ #d3.js #visualization 

D3.js(v4)のグラフサンプル集

2018年の1月にD3.js v5がリリースされました。

v4→v5はそれほど大きな変更はなかったようですが、v3→v4は名前空間が大きく変更されたため、多くのv3のコードはそのままではv4では動きません。

ネットでサンプルを検索すると未だv3のコードが多くヒットし、探しにくいため、基本的なグラフを中心にv4のサンプルを探して、まとめました。

追記(2018年4月15日) 一部v3のサンプルが混じっていたため削除

本家のGallery · d3/d3 Wikiに行けば、多くのサンプルがありますが、自分でコードを書く場合は少しでも多くのサンプルを参考にできた方がいいかなと。

Gistにサムネイルがアップされてないものは、bl.ocks.orgへのリンクだけになっています。見辛いですが、力尽きました。

  • 棒グラフ(Bar chart)
    • 積み上げ棒グラフ(Stacked bar chart)
  • 折れ線グラフ(Line chart)
  • 円グラフ(Pie Chart)
    • 階段グラフ(Line chart)
    • ドーナツチャート(Donut chart)
  • 帯グラフ(Normalized stacked bar chart)
  • ヒストグラム(Histogram)
  • レーダーチャート(Radar chart)
  • 散布図(Scatter chart)
  • 箱ひげ図(Box plot)
  • バブルチャート(Bubble chart)
  • 面グラフ(Area chart)
  • 4象限マトリクス

棒グラフ(Bar chart)

bdf28027e0ce70bd132edc64f1dd7ea4 Simple bar graph in v4 - bl.ocks.org

14e9f0d80ea6b0d8083ba95a9d571d13 D3.js v4 Example/Tutorial: Responsive Bar Chart - bl.ocks.org

eac0334d11568d160d0428abda9b0953 Simple, static SVG bar chart – D3.js v4 - bl.ocks.org

7008d0332cc28a826b37b3cf6e7bd998 Horizontal Bar Chart with Tooltip D3 V4 - bl.ocks.org

5eb73aa907d64ee6e5f1d97b922c8801 D3 v4 - barchart - bl.ocks.org

ec245e1f4e824e685982dd5d3fbb2fcc Bar Chart IV - d3v4 - bl.ocks.org

f1c9036b0deb058454f825238a95b6be updating a bar chart with d3.js (v4) - bl.ocks.org

274bf248fd0f362d64674920e85c1eb7 Bar Chart with Tooltip with Tooltip D3 V4 - bl.ocks.org

c23bf3940bc5f1ee4027ccc72097a03b bar chart negative values - v4 - bl.ocks.org

3887051 Grouped Bar Chart - bl.ocks.org

積み上げ棒グラフ(Stacked bar chart)

3886208 Stacked Bar Chart - bl.ocks.org

8979a6c1063a4022cbd738b4498a0ba6 Stacked Bar Chart - d3.v4 implementation - bl.ocks.org

32a3d192e0e5f6af81f4bcc12adda8f7 Horizontal stacked bar chart implementation in d3.v4 - bl.ocks.org

2a9e6f11f2a27b6af0c28c4e5e524f10 Horizontal Stack Bar Chart D3 V4 - bl.ocks.org

fd1afd96ecea6898113f477896f07a44 Stacked Bar Chart with Tooltip and Color Change D3.v4 - bl.ocks.org

96fe8772549aa4ecd54d91ec4228f507 D3js v4 Stacked Bar Chart - with Tooltip Hover - bl.ocks.org

352ad2e6f577c4abf55e29e6d422535a Stacked-to-Grouped Bars II - bl.ocks.org

7c9bdfd714ab2f2e39dd5c09057a55a0 D3js v4 Stacked Bar Chart - with Tooltip Hover - bl.ocks.org

689368252f55179e12185e13c5ed1fee Stacked Bar Charts D3 v4 - bl.ocks.org

7c9bdfd714ab2f2e39dd5c09057a55a0 D3js v4 Stacked Bar Chart - with Tooltip Hover - bl.ocks.org

折れ線グラフ(Line chart)

402dd382a51a4f6eea487f9a35566de0 Simple line graph with v4 - bl.ocks.org

26363646c478b2028d36e7274cedefa6 D3 v4 Line Chart - bl.ocks.org

26363646c478b2028d36e7274cedefa6 D3 v4 Line Chart - bl.ocks.org

ceb7065687c125223339a26a47d58a28 d3 v4 realtime line chart - bl.ocks.org

119a138ef9bd1d8f0a8d57ea72355252 Simple graph with filled area in v4 - bl.ocks.org

1ffe16ccf8bed2035ea5091ab9bb53fb d3js v4 zoomable line chart - bl.ocks.org

cd2c9da1388565a6fb9ce5fba95168db Line chart from csv (v4) - bl.ocks.org

階段グラフ(Line chart)

f7ef798894427a99efe5e173e003260d D3 v4 - linechart - bl.ocks.org

円グラフ(Pie Chart)

c8ce360f8bc896ffa6c16d30a4cd026b Pie Chart D3 V4 - bl.ocks.org

f90651541575f348a129444003a73467 D3 v4 - piechart - bl.ocks.org

b2504f8f3e384de4ff2b9dfa60f325e2 A static, reusable donut chart for D3.js v4. - bl.ocks.org

3887235 Pie Chart - bl.ocks.org

c2653d42ffb4ecc01ffe2d6c97b2ee5e Pie Chart Update v4 - bl.ocks.org

6560687444d2e1421e4d24360c27728a d3.js v4 pack layout with pie chart - bl.ocks.org

e2cb52828c080ba85da5458e2304a61f D3 Pie chart with percentage outside - bl.ocks.org

225c6df494811f46f6ea53eba63da817 Update and transition of pie chart - bl.ocks.org

f3685ca8a1a7f5be1967f39f367437c0 Pie Chart (d3js v4) - bl.ocks.org

ドーナツチャート(Donut chart)

b2504f8f3e384de4ff2b9dfa60f325e2 A static, reusable donut chart for D3.js v4. - bl.ocks.org

f64c027d14ce4f26e35fcdc99b9bb43e Interactive Donut Chart - bl.ocks.org

b082c1f22ef78d41201eed8581ae282b Pie Chart Update v4 - bl.ocks.org

e46f38d44a049a61ab1c2d97a2413439 D3 - Donut chart with labels and connectors (Data: random teaching evaluation survey results) - bl.ocks.org

f90651541575f348a129444003a73467 D3 v4 - piechart - bl.ocks.org

2394b23da1994fc202e1 Canvas Donut - bl.ocks.org

e1cdbbe586ac31747b4a304f8f86efa5 Sunburst Tutorial (d3 v4), Part 1 - bl.ocks.org

c3f4eb2b16b86dd0f641263383f05a13 Donut Chart - bl.ocks.org

帯グラフ(Normalized stacked bar chart)

3886394 Normalized Stacked Bar Chart - bl.ocks.org

bd506812787c423e4560e72102a7ce94 Normalized Stacked Bar Chart - bl.ocks.org

690c73824e2b4ad1351fccdc1781df9a Normalized Stacked Bar Chart - bl.ocks.org

8d2112a115ad95f4a6848001389182fb Radial Normalized Stacked Bar - bl.ocks.org

ヒストグラム(Histogram)

96b74d0bd6d11427dd797892551a103c Simple histogram using v4 - bl.ocks.org

3048450 Histogram - bl.ocks.org

b2fee5dae98555cf78c9e4c5074b87c3 Histogram II - bl.ocks.org

495cd567e0ede0deeb14bb3599dce685 brush histogram - bl.ocks.org

レーダーチャート(Radar chart)

4c36eb1abdb248de34c64f5672afd857 Radar Chart D3 V4 - bl.ocks.org

7e17b680b35b83b49f1c22a3613bd89f Radar Chart d3 v4 - bl.ocks.org

52343b3006b96c9b8195a88df5b52726 Radar Chart - bl.ocks.org

dfee3b6061e50ad73d9df7a7a73b68e9 Radar Chart - bl.ocks.org

6b58692fa92fdb4246b1cbcb3108081e Nodes on Radar Chart - bl.ocks.org

散布図(Scatter chart)

076377dd0125b1a508621441752735fc Scatterplot of Iris data : d3 v4 - bl.ocks.org

ce6903fad978d20773c41ee34bf6735c Scatterplot with brush d3 v4 - bl.ocks.org

d956f19f2e56a05c31fb6583beccfda7 Scatter plot with zoom - bl.ocks.org

6f082f0e3b820b6bf68b78f2f7786084 Scatterplot with v4 - bl.ocks.org

6f7f1dd55e0c52ce5ee0dac2b2769f4b D3V4 Scatterplot - bl.ocks.org

d2be3d62a09360a770b79f4e5527eea8 D3 v4 - Scatter Plot - Semantic Zooming - bl.ocks.org

0869b7ae854c148121bb4ca7c9dc9095 Scatterplot Iris (d3.v4) - bl.ocks.org

c645e2aa3a4fe313269afc1c39c8a05d Scatterplot with a toggle button using D3.v4 - bl.ocks.org

2505b09d0feb51d0c9873cc486f10f67 Simple scatter plot in v4 - bl.ocks.org

箱ひげ図(Box plot)

e04ceddae2e8f85cf3afe4681dac1d74 Simple Box Plot Example in d3.js v4.0 - bl.ocks.org

a246611653fdd9ae7660a97a7d096052 Box Plots v4 - bl.ocks.org

cc40e7d583346b2a8a5a2f9e296d3007 d3js | box and whiskers (boxplot) - bl.ocks.org

バブルチャート(Bubble chart)

3d6be4be0ef9f6977ec6718b2916d168 Bubble Chart - bl.ocks.org

0d81ccfd24578d5d563c55e785b3b40a Bubble Chart d3 v4 - bl.ocks.org

cbf8d2ec446c9c76e1bdc9abd211e189 Bubble Chart - bl.ocks.org

51c76ec99c3ffee2fde6923ac14a4dd4 Bubble Matrix Chart V4 - bl.ocks.org

面グラフ(Area chart)

119a138ef9bd1d8f0a8d57ea72355252 Simple graph with filled area in v4 - bl.ocks.org

0b09968e3d4970d845a5f45ed25595bb for reference: stacked area chart d3 v4 - bl.ocks.org

3883195 Area Chart - bl.ocks.org

3885211 Stacked Area Chart - bl.ocks.org

49570a3cd70390c257c80ac75c5049f1 Area graph with gradient in v4 - bl.ocks.org

21ecf1bf5d2568b854934a74050b31e6 Simple filled area in v4 - bl.ocks.org

53fe83f0df7fd26015954e4968fe93fd Stacked area chart d3 - bl.ocks.org

3035090 Area with Missing Data - bl.ocks.org

8a5b1cc987217607a47bd7d4e0fffacb A single d3.js V4 chart with ‘small multiples’ along single categorical x-axis - bl.ocks.org

4象限マトリクス

18c5ec8d06938edd31968e2fd104a58a 4 Quadrant Scatter Plot D3 v4 - bl.ocks.org

Edit(Admin)