d3-visualization

majiayu000

更新日 2 days ago

17 閲覧

メタdesigndata

について

このスキルは、ネットワーク図、ツリーマップ、地理マップなどの複雑でインタラクティブなチャートやグラフを作成するためのD3.jsビジュアライゼーションを生成します。基本的なチャートライブラリでは実現できない高度なカスタマイズが必要な場合に最適で、ズーム、ツールチップ、スムーズなアニメーションなどの機能をサポートしています。開発ワークフロー内で直接、洗練されたカスタムデータビジュアライゼーションを構築するためにご利用ください。

クイックインストール

Claude Code

推奨

プラグインコマンド推奨

/plugin add https://github.com/majiayu000/claude-skill-registry

Git クローン代替

git clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/d3-visualization

このコマンドをClaude Codeにコピー＆ペーストしてスキルをインストールします

ドキュメント

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

GitHub リポジトリ

majiayu000/claude-skill-registry

パス: skills/d3-visualization