home / skills / ntaksh42 / agents / d3-visualization

d3-visualization skill

safe

This skill generates advanced D3.js visualizations including networks, treemaps, maps, and interactive charts to reveal data insights.

npx playbooks add skill ntaksh42/agents --skill d3-visualization

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

4.0 KB

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

### ツリーマップ

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

Overview

This skill generates advanced D3.js visualizations for web projects, producing charts, graphs, maps, and interactive layouts. It focuses on flexible, highly customizable visuals that go beyond standard chart libraries to support complex data structures and interactions.

How this skill works

I accept structured data (nodes/links, hierarchical JSON, arrays of time series, geoJSON, matrices) and produce D3.js markup and scripts tailored to the chosen visualization type. Outputs include SVG or canvas setups, scales, layouts (force, treemap, pack), interaction handlers (drag, zoom, tooltip), and smooth transitions. I provide ready-to-drop-in HTML/JS snippets and guidance for integrating with existing pages or frameworks.

When to use it

You need bespoke, highly customized visuals not possible with high-level chart libs
You must visualize relationships, hierarchies, or spatial data (networks, trees, maps)
You want interactive behaviors: drag, zoom, tooltips, brushing, animated transitions
You need precise control over rendering, layout algorithms, or performance tuning
You are building dashboard components that require custom layouts or mixed visual types

Best practices

Provide clean, well-structured input data (ids for nodes, consistent keys for hierarchy and values)
Choose SVG for crisp vector visuals; use canvas when rendering thousands of elements for performance
Design accessible visuals: include labels, ARIA attributes, and color palettes with sufficient contrast
Keep interaction affordances simple: prefer hover tooltips plus click-to-fix for touch devices
Modularize generated code: separate data processing, layout, and rendering so you can swap data or layout without rewriting visuals

Example use cases

Force-directed network showing relationships between entities with drag and grouping
Treemap that visualizes disk usage or financial portfolio allocations with drill-down
Sankey diagram to show flows between categories or conversion funnels
Choropleth map using geoJSON and data joins for regional metrics
Animated time-series area/line chart with focus+context brushing for exploration

FAQ

What input formats do you accept?

I work best with JSON structures: nodes/links for networks, hierarchical objects for treemaps/pack, arrays of {date,value} for time series, and GeoJSON for maps.

Can I get mobile-friendly interactions?

Yes. I recommend touch-friendly interactions (tap to pin tooltip, pinch-to-zoom where appropriate) and reduced animation on smaller devices for performance.