🎯

d3-visualization

🎯Skill

from ntaksh42/agents

What it does

Generates advanced, interactive data visualizations using D3.js with support for complex charts, network graphs, and dynamic rendering.

📦

Part of

ntaksh42/agents(78 items)

d3-visualization

Installation

📋 No install commands found in docs. Showing default command. Check GitHub for actual instructions.

Quick InstallInstall with npx

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

Need more details? View full documentation on GitHub →

2Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Generate D3.js visualizations including charts, graphs, and interactive data visualizations. Use when creating data visualizations with D3.js.

Overview

# 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

More from this repository10

🎯

document-summarizer🎯Skill

Generates concise summaries of documents by extracting key information and condensing text into a more digestible format.

🎯

algorithmic-art🎯Skill

Generates creative algorithmic art using p5.js, creating unique visual designs with patterns, fractals, and dynamic animations.

🎯

sql-query-helper🎯Skill

Generates, optimizes, and explains SQL queries with best practices, providing intelligent database query solutions across multiple database platforms.

🎯

plantuml-diagram🎯Skill

Generates PlantUML diagrams (class, sequence, component) to visually represent system architecture and UML models.

🎯

azure-pipelines-generator🎯Skill

Generates Azure Pipelines YAML configurations automatically for CI/CD workflows, supporting multi-stage builds and deployments across different environments.

🎯

kubernetes-helper🎯Skill

Assists Kubernetes users by generating, validating, and explaining Kubernetes manifests and configurations with AI-powered insights.

🎯

using-git-worktrees🎯Skill

Creates isolated Git worktrees with smart directory selection and safety verification for feature work and branch management.

🎯

dependency-analyzer🎯Skill

Analyzes project dependencies, identifies potential conflicts, and provides insights into library compatibility and version management.

🎯

brainstorming🎯Skill

Collaboratively refines rough ideas into fully-formed designs through systematic questioning, alternative exploration, and incremental validation.

🎯

azure-boards-helper🎯Skill

Manages Azure Boards work items by creating, querying, and automating work item workflows using WIQL and comprehensive templates.