---
name: d3-visualization
description: Generate D3.js visualizations including charts, graphs, and interactive data visualizations. Use when creating data visualizations with D3.js.
---
# D3.js Visualization Skill
D3.jsを使った高度なデータ可視化を生成するスキルです。
## 概要
D3.jsで複雑で美しいデータ可視化を作成します。Chart.jsより高度なカスタマイズが可能です。
## 主な機能
- **多様なチャート**: ネットワーク図、ツリーマップ、サンキー図等
- **インタラクティブ**: ズーム、ドラッグ、ツールチップ
- **アニメーション**: スムーズなトランジション
- **地理データ**: 地図、コロプレス図
- **階層データ**: ツリー、パックレイアウト
- **時系列**: ライン、エリアチャート
## 使用方法
```
以下のデータでD3.jsネットワーク図を作成：
ノード: A, B, C, D
リンク: A-B, B-C, C-D, D-A
```
## 可視化例
### ネットワーク図（Force-Directed Graph）
```html
```
### ツリーマップ
```javascript
const data = {
name: "root",
children: [
{name: "A", value: 100},
{name: "B", value: 200},
{name: "C", value: 150}
]
};
const width = 800;
const height = 600;
const treemap = d3.treemap()
.size([width, height])
.padding(2);
const root = d3.hierarchy(data)
.sum(d => d.value);
treemap(root);
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("rect")
.data(root.leaves())
.join("rect")
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.attr("fill", "#69b3a2")
.attr("stroke", "white");
```
## チャートタイプ
- **ネットワーク図**: 関係性の可視化
- **ツリーマップ**: 階層データ
- **サンキー図**: フロー可視化
- **コロプレス図**: 地理データ
- **バブルチャート**: 3次元データ
- **ヒートマップ**: マトリックスデータ
## バージョン情報
- スキルバージョン: 1.0.0
- 最終更新: 2025-01-22