--- 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

d3-visualization

Install this skill

Comments