1仕組みと動作原理

純粋なナレッジベース型スキル：全機能が SKILL.md という単一の Markdown（820行 / 21.3KB）に集約されており、スクリプト、設定、ランタイムは一切不要。自身では何も実行せず、d3.js のエンジニアリング手法をコピー可能なコードブロックの形でホストモデルに提供します。

SKILL.md

This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js. D3.js (Data-Driven Documents) excels at binding data to DOM elements and applying data-driven transformations to create custom, publication-quality visualisations with precise control over every visual element. The techniques work across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks.

「なぜ実現できるのか」の根本的な答え：d3 の難しさは概念ではなく、広範な API（スケール/軸/データバインディング/トランジション/投影/力学モデル）と定型構造にあります。本スキルはこれらをパターン化されたコードブロックに圧縮しているため、モデルはチャートの種類に応じて検索しデータ構造を差し替えるだけでよく、API の詳細を推測する必要がありません。

段階的開示によるコンテキスト消費の抑制：メインの SKILL.md には選定判断、4ステップのワークフロー、頻出チャートのみを配置し、高度なトピック（階層図/地理/連動ブラシ選択/アニメーション全般）は3つの references に、テンプレートは assets に分離。本文末尾で必要に応じた読み込みを明示的に指示します。

SKILL.md

To use these resources, read the relevant files when detailed guidance is needed for specific visualisation types or patterns.

references は合計 46.4KB（d3-patterns 21.6KB + colour-schemes 12.8KB + scale-reference 12.1KB）あり、すべて一度に読み込ませると大量のコンテキストを消費します。この階層化こそが、単一スキル内で20種以上のチャートをカバーするための設計上の工夫です。

フレームワーク差異を2つの統合パスに集約することでマルチフレームワーク対応を謳う：Pattern A（命令的な DOM 操作。任意の JS 環境で利用可能）、Pattern B（d3 はデータ計算のみに用い、レンダリングはフレームワーク側に委ねる）。

SKILL.md

**Pattern A: Direct DOM manipulation (recommended for most cases)** Use d3 to select DOM elements and manipulate them imperatively. This works in any JavaScript environment:

これは description にある「あらゆる環境」という表現の技術的根拠です。実際にマルチフレームワーク対応なのはコードそのものではなく、このレイヤリングの取り決めです。ただし、骨組みのサンプルと assets のテンプレートは実際には Pattern A + React の文脈に依存しています（2次精査の不一致点を参照）。

出力の規律：すべての描画関数に同一の骨組み（空データの早期リターン → 既存要素のクリア → margin convention → scale/axis → join バインディング）の遵守を求め、番号付きコメントでチェックリスト化することで、モデルの勝手な解釈を抑制します。

SKILL.md

function drawVisualization(data) { if (!data || data.length === 0) return; const svg = d3.select('#chart'); // Or pass a selector/element svg.selectAll("*").remove(); // Clear previous render

骨組みの直後に `// 1. Define dimensions` … `// 5. Bind data and create visual elements`（SKILL.md:106-150）という番号付きコメントが続き、モデルはこれをなぞるだけで動作可能なコードを出力できます。assets/chart-template.jsx はこの骨組みを React で実装したものです。

d3 v7 に固定：CDN エンドポイントは v7 を明示し、サンプルコードも v7 の API スタイル（.join() によるバインディング、イベントはハンドラーの第1引数として受け取る、d3.event の不使用）を採用しているため、出力されるコードは v5/v6 の旧プロジェクトとは互換性がありません。

SKILL.md

<script src="https://d3js.org/d3.v7.min.js"></script>

d3 v6 以降、イベントの扱いは d3.event からハンドラーの引数へと変更されました（サンプルの `function dragstarted(event)` は v7 の書き方です）。本スキルを旧バージョンの d3 プロジェクトで利用する場合は、手動でのダウングレードが必要です。

チャート描画以外のエンジニアリング詳細も推測に頼らず本文に明記：レスポンシブ対応（resize リスナー + ResizeObserver の両パターンと cleanup の返却）、アクセシビリティ（role/title/desc）、パフォーマンス低下時の対策（要素数1,000超での canvas への切り替え）、一般的なトラブルシューティング手順。

SKILL.md

### Accessibility Make visualisations accessible: ```javascript // Add ARIA labels svg.attr("role", "img") .attr("aria-label", "Bar chart showing quarterly revenue"); // Add title and description svg.append("title").text("Quarterly Revenue 2024"); svg.append("desc").text("Bar chart showing revenue growth across four quarters");

こうした実践的な規範こそが、SKILL.md:20 で掲げられている「Publication-quality graphics with fine-grained styling control（きめ細かなスタイリング制御を備えた出版品質のグラフィック）」を支える実質的な根拠であり、単なるコードスニペット集との決定的な違いです。

2コア機能

01チャート選定の判断支援（除外基準を含む：3D には Three.js を推奨）

02すぐに使える7種類の基本チャートレシピ：bar / line / scatter / chord / heatmap / pie / force-directed

03インタラクションの基本3要素：tooltip（マウス追従の浮動レイヤー）、zoom/pan、クリックフィードバック

04トランジションとアニメーションのオーケストレーション：基本、チェーン、ディレイのずらし（stagger）、カスタム easing

05レスポンシブ対応とリソース解放（window resize リスナー + ResizeObserver + cleanup 関数の返却）

06スケールとカラーパレットのナレッジベース：連続/シーケンシャル/順序スケールの網羅 + パレット、色覚多様性対応、コントラスト比、ドメイン固有の推奨事項

07地理的ビジュアライゼーション：Mercator プロットおよびコロプレスマップ（d3.geoMercator/geoPath、ジオメトリデータは呼び出し元が提供）

08そのまま動作する実装テンプレート：React 基本チャート（106行）+ インタラクティブチャート（227行）+ 8組のサンプルデータ

3外部依存関係

Kind	Dependency / Endpoint
package	d3（npm 包，v7 API 面）
network	d3js.org CDN（d3 v7 min，产物可选的加载路径，无 SRI）
package	react（assets 模板 import）
package	tailwindcss（模板用 className 原子类，无显式 import，隐含样式依赖）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

自動ロード可能

管理者向け

ソースとバージョンの記録

判定根拠（ファイルパスと抜粋）

SKILL.md: 純粋なプロンプト指示とルールテキストのみで構成され、スクリプトの実行や外部への影響はありません。

監査ノート： 純粋な指示型ナレッジベース：スクリプトの実行、外部ネットワーク通信、認証情報の読み取り、強制的なローカル書き込みは一切ありません。全ディレクトリでもわずか7ファイル（SKILL.md + Markdown 参照ファイル3件 + JSX テンプレート2件 + JSON データ1件）で構成され、バイト単位のスキャンでも d3 の CDN を除いて URL は存在せず、exec、fs、env、秘密鍵等の文字列も検出されません（唯一の文字列一致は `defs.append(` 内の `fs.` という誤検知のみ）。利用側における以下の2つの注意点は生成された成果物に関するものであり、スキル自体の評価区分を変更するものではありません：① 成果物は d3/React/Tailwind に依存し、CDN 読み込みに SRI が付与されていない；② チュートリアルと対話テンプレートで `.html()` によるデータ結合を例示しており、第三者データをレンダリングする際に DOM XSS の懸念が生じる。

5二重目の独立検証

[ok] official_desc 原文（frontmatter description） — SKILL.md:1-4 有完整 frontmatter，name: d3-viz、description 441 字符，已原文写入 meta.official_desc。
[ok] 外部资源/网络端点清单 — 全目录 URL 扫描仅 1 条：https://d3js.org/d3.v7.min.js（SKILL.md:39）。无 fetch/d3.json/d3.csv/XMLHttpRequest 调用，无 API 端点、无 CLI 调用；地理图几何数据由调用方传入（d3-patterns.md:608-611），无 tile/topojson/atlas 拉取（grep topojson|us-atlas|world-atlas 零命中）。
[ok] 凭证/环境变量读取 — grep process.env|API_KEY|token|secret|localStorage 全目录零命中（不区分大小写）。
[ok] 脚本执行面 — 无 scripts/ 目录、无 package.json、无 shell/python 文件；两份 .jsx 是给宿主工程用的 UI 模板，不被 skill 执行。唯一 exec 相关字面命中为 references/d3-patterns.md:366 `defs.append("linearGradient")` 中的 `fs.`（假阳性），人工确认非文件系统调用。
[discrepancy] 资源引用与实际文件名一致 — SKILL.md:814-815 写 `chart-template.js` / `interactive-template.js`，实际文件为 `assets/chart-template.jsx` 与 `assets/interactive-template.jsx`（React JSX）。模型按正文文件名读取 assets 会落空（`.js` 不存在），只能靠 glob 或猜后缀——这是第一遍照抄资源段时容易漏掉的错，第二遍以 find 结果纠正。
[discrepancy] 『跨框架可用』宣称与模板实现一致 — SKILL.md:3（description）与 SKILL.md:10（Overview）宣称 React/Vue/Svelte/vanilla 全支持，SKILL.md:818 更称两份模板『work with vanilla JavaScript, React, Vue, Svelte』；但两份模板首行均 `import { useEffect, useRef, useState } from 'react'`（chart-template.jsx:1、interactive-template.jsx:1），且正文/模板使用 Tailwind 类名（chart-template.jsx:78,101 `className="chart-container"` / `className="p-8"`）。Vue/Svelte 在全文只出现于 description 与 Pattern B 注释，无任何示例代码——宣称覆盖面被高估，实际是 React+Tailwind 优先、vanilla 次之。
[ok] 地理可视化能力是否真实（描述主张之一） — 主干 SKILL.md 无地理章节（第一遍据此可能误判为『宣称未兑现』），但 references/d3-patterns.md:594 起确有 `## Geographic visualisations`，含 Basic map with points 与 Choropleth 两个完整实现（d3.geoMercator + geoPath）。结论修正为：能力存在，但只在下沉文档里，主干不提示地理章节位置。
[ok] d3 版本一致性 — CDN 显式 v7（SKILL.md:39），示例用 .join() 与事件形参写法（v7 语义）；全文无 d3.event（v5 语义）残留。

6結論

ナレッジの密度と構造の双方が優れている：単一の SKILL.md で選定 → 骨組み → 基本チャート → インタラクション → トランジション → スケール → アクセシビリティを網羅し、20種類以上のチャート全集、スケール、配色を references に分離することで、「モデルに正確な d3 コードを書かせる」という課題を的確に解決している。

生成されるコードの実行可能性が高い：統一された骨組み、空データの早期リターン、.join() バインディング、cleanup 付きのレスポンシブ処理により、d3 で頻発するトラブル（二重描画、NaN ドメイン、resize リスナーのリーク）を根本から防止。

適用範囲の境界が明確で誤用を防げる：3D 表現には Three.js を使うべきであることを明記。

監査対象が極めて小さく、ディレクトリごとの移行が容易：7つのファイルのみで構成され、スクリプト、外部ネットワーク通信、認証情報は一切不要。ホスト環境を問わずインストール作業なしで導入可能。

最適な用途： React やバニラ JS 環境でカスタムビジュアライゼーション（力学モデルネットワーク、弦図、ヒートマップ、コロプレス図、pan/zoom/brush を備えたインタラクティブな図）を作成する必要がある開発者やエージェントの対話に適しています。また、「エンジニアリングとして破綻しない d3 コードの書き方」に関するチーム内規約のリファレンスとしても有用です（骨組み、レスポンシブの cleanup、アクセシビリティ、パフォーマンス低下対策の4点はそのままチェックリストとして活用可能）。スキルとして利用する価値は、選定と構造がテンプレート化されており、モデルが d3 の API 仕様を自力で推測する無駄なやり取りを省ける点にあります。

不向きな用途： 3D ビジュアライゼーションには不向き（本文内で Three.js を推奨）；Vue や Svelte プロジェクトでの即時利用には不向き（テンプレートとサンプルは React + Tailwind を前提）；d3 v5/v6 のレガシー環境には不向き（API は v7 向けに記述）；SRI や完全なオフライン依存関係を求めるコンプライアンス環境には不向き（CDN に完全性検証ハッシュがないため、d3 をセルフホストする必要あり）；スキルの自動レンダリングやチャートの自動テストを期待する用途には不向き（コードの出力のみを行い、実行やプレビューは行いません）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload d3-js-visualization.tar.gz

sha256: e9922be6af3bb98d…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit e198c87d03.