majiayu000 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）
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.node { fill: #69b3a2; stroke: #fff; stroke-width: 2px; }
.link { stroke: #999; stroke-opacity: 0.6; }
</style>
</head>
<body>
<svg id="graph" width="800" height="600"></svg>
<script>
const data = {
nodes: [
{id: "A"}, {id: "B"}, {id: "C"}, {id: "D"}
],
links: [
{source: "A", target: "B"},
{source: "B", target: "C"},
{source: "C", target: "D"},
{source: "D", target: "A"}
]
};
const svg = d3.select("#graph");
const width = +svg.attr("width");
const height = +svg.attr("height");
const simulation = d3.forceSimulation(data.nodes)
.force("link", d3.forceLink(data.links).id(d => d.id))
.force("charge", d3.forceManyBody().strength(-400))
.force("center", d3.forceCenter(width / 2, height / 2));
const link = svg.append("g")
.selectAll("line")
.data(data.links)
.join("line")
.attr("class", "link");
const node = svg.append("g")
.selectAll("circle")
.data(data.nodes)
.join("circle")
.attr("class", "node")
.attr("r", 20)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
simulation.on("tick", () => {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
</body>
</html>
ツリーマップ
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