D3.js(v4)のグラフサンプル集
2018年の1月にD3.js v5がリリースされました。
v4→v5はそれほど大きな変更はなかったようですが、v3→v4は名前空間が大きく変更されたため、多くのv3のコードはそのままではv4では動きません。
ネットでサンプルを検索すると未だv3のコードが多くヒットし、探しにくいため、基本的なグラフを中心にv4のサンプルを探して、まとめました。
本家の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)
Simple bar graph in v4 - bl.ocks.org
D3.js v4 Example/Tutorial: Responsive Bar Chart - bl.ocks.org
Simple, static SVG bar chart – D3.js v4 - bl.ocks.org
Horizontal Bar Chart with Tooltip D3 V4 - bl.ocks.org
D3 v4 - barchart - bl.ocks.org
Bar Chart IV - d3v4 - bl.ocks.org
updating a bar chart with d3.js (v4) - bl.ocks.org
Bar Chart with Tooltip with Tooltip D3 V4 - bl.ocks.org
bar chart negative values - v4 - bl.ocks.org
Grouped Bar Chart - bl.ocks.org
積み上げ棒グラフ(Stacked bar chart)
Stacked Bar Chart - bl.ocks.org
Stacked Bar Chart - d3.v4 implementation - bl.ocks.org
Horizontal stacked bar chart implementation in d3.v4 - bl.ocks.org
Horizontal Stack Bar Chart D3 V4 - bl.ocks.org
Stacked Bar Chart with Tooltip and Color Change D3.v4 - bl.ocks.org
D3js v4 Stacked Bar Chart - with Tooltip Hover - bl.ocks.org
Stacked-to-Grouped Bars II - bl.ocks.org
D3js v4 Stacked Bar Chart - with Tooltip Hover - bl.ocks.org
Stacked Bar Charts D3 v4 - bl.ocks.org
D3js v4 Stacked Bar Chart - with Tooltip Hover - bl.ocks.org
折れ線グラフ(Line chart)
Simple line graph with v4 - bl.ocks.org
D3 v4 Line Chart - bl.ocks.org
D3 v4 Line Chart - bl.ocks.org
d3 v4 realtime line chart - bl.ocks.org
Simple graph with filled area in v4 - bl.ocks.org
d3js v4 zoomable line chart - bl.ocks.org
Line chart from csv (v4) - bl.ocks.org
階段グラフ(Line chart)
D3 v4 - linechart - bl.ocks.org
円グラフ(Pie Chart)
D3 v4 - piechart - bl.ocks.org
A static, reusable donut chart for D3.js v4. - bl.ocks.org
Pie Chart Update v4 - bl.ocks.org
d3.js v4 pack layout with pie chart - bl.ocks.org
D3 Pie chart with percentage outside - bl.ocks.org
Update and transition of pie chart - bl.ocks.org
Pie Chart (d3js v4) - bl.ocks.org
ドーナツチャート(Donut chart)
A static, reusable donut chart for D3.js v4. - bl.ocks.org
Interactive Donut Chart - bl.ocks.org
Pie Chart Update v4 - bl.ocks.org
D3 v4 - piechart - bl.ocks.org
Sunburst Tutorial (d3 v4), Part 1 - bl.ocks.org
帯グラフ(Normalized stacked bar chart)
Normalized Stacked Bar Chart - bl.ocks.org
Normalized Stacked Bar Chart - bl.ocks.org
Normalized Stacked Bar Chart - bl.ocks.org
Radial Normalized Stacked Bar - bl.ocks.org
ヒストグラム(Histogram)
Simple histogram using v4 - bl.ocks.org
レーダーチャート(Radar chart)
Radar Chart D3 V4 - bl.ocks.org
Radar Chart d3 v4 - bl.ocks.org
Nodes on Radar Chart - bl.ocks.org
散布図(Scatter chart)
Scatterplot of Iris data : d3 v4 - bl.ocks.org
Scatterplot with brush d3 v4 - bl.ocks.org
Scatter plot with zoom - bl.ocks.org
Scatterplot with v4 - bl.ocks.org
D3V4 Scatterplot - bl.ocks.org
D3 v4 - Scatter Plot - Semantic Zooming - bl.ocks.org
Scatterplot Iris (d3.v4) - bl.ocks.org
Scatterplot with a toggle button using D3.v4 - bl.ocks.org
Simple scatter plot in v4 - bl.ocks.org
箱ひげ図(Box plot)
Simple Box Plot Example in d3.js v4.0 - bl.ocks.org
d3js | box and whiskers (boxplot) - bl.ocks.org
バブルチャート(Bubble chart)
Bubble Chart d3 v4 - bl.ocks.org
Bubble Matrix Chart V4 - bl.ocks.org
面グラフ(Area chart)
Simple graph with filled area in v4 - bl.ocks.org
for reference: stacked area chart d3 v4 - bl.ocks.org
Stacked Area Chart - bl.ocks.org
Area graph with gradient in v4 - bl.ocks.org
Simple filled area in v4 - bl.ocks.org
Stacked area chart d3 - bl.ocks.org
Area with Missing Data - bl.ocks.org
A single d3.js V4 chart with ‘small multiples’ along single categorical x-axis - bl.ocks.org
4象限マトリクス
4 Quadrant Scatter Plot D3 v4 - bl.ocks.org
