Design & Motion · chrisvoncsefalvay/claude-d3js-skill

d3-js-visualization

Name: d3-js-visualization
Author: chrisvoncsefalvay/claude-d3js-skill

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author chrisvoncsefalvayGitHub chrisvoncsefalvay/claude-d3js-skill ↗Stars 230License 无（工作副本根目录无 LICENSE 文件，仅 SKILL.md + assets/ + references/；GitHub API license 字段为 null）。即未授予任何许可，再分发/商用前需向作者确认。Commit e198c87d03

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Pure knowledge-base skill: All capabilities reside within a single markdown file, SKILL.md (820 lines / 21.3KB), featuring zero scripts, zero configurations, and zero runtime overhead. It performs no actions on its own, merely providing d3.js engineering methodologies to the host model as copy-ready code blocks.

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.

The foundational answer to 'how this is achieved': The primary difficulty of d3 lies not in its core concepts, but in its vast API surface (scales, axes, data binding, transitions, projections, force simulations) and boilerplate patterns. This skill condenses these into standardized code patterns so the model only needs to retrieve patterns and adapt data structures without guessing API details.

Context budget managed via progressive disclosure: The root SKILL.md only includes architectural decision guidance, a 4-step workflow, and common chart types; specialized topics (hierarchies, geographic maps, brush/link interactions, complete animation palettes) are delegated to 3 reference documents, templates are placed in assets, and explicit instructions at the end guide on-demand retrieval.

SKILL.md

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

The references total 46.4KB (d3-patterns: 21.6KB, colour-schemes: 12.8KB, scale-reference: 12.1KB). Injecting all of them would consume significant context; hierarchical layering is the engineering approach that allows it to cover 20+ chart types within a single skill.

Cross-framework portability is achieved by consolidating framework variances into two integration paths: Pattern A imperatively manipulates the DOM (compatible with any JS environment), while Pattern B uses d3 solely for mathematical/layout calculations, delegating rendering back to the framework.

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:

This provides the technical foundation for the description's 'any environment' claim—what is truly cross-framework is not the raw code, but this architectural convention. However, the skeleton examples and assets templates are predominantly situated in a Pattern A + React context (noted as a discrepancy in the second pass).

Strict output discipline: Enforces that all plotting functions follow an identical skeleton (early exit on empty data → clear SVG → margin convention → scales/axes → data join), supported by numbered comments structured as a checklist to constrain unwarranted model hallucinations.

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

The skeleton is accompanied by numbered comments `// 1. Define dimensions` … `// 5. Bind data and create visual elements` (SKILL.md:106-150); models can reproduce working code simply by following it. assets/chart-template.jsx represents a production React implementation of this same skeleton.

Pinned strictly to d3 v7: CDN endpoints explicitly reference v7, and sample code adopts v7 API idioms (.join() binding, passing events as the first handler argument, absence of d3.event), rendering generated code incompatible with legacy d3 v5/v6 projects.

SKILL.md

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

Starting from d3 v6, events were changed from d3.event to handler parameters (e.g., `function dragstarted(event)` represents v7 syntax); using this skill in legacy d3 projects requires manual downgrading.

Non-chart engineering details are explicitly covered rather than left for the model to guess: Responsiveness (dual approaches with window resize listeners and ResizeObserver returning cleanup functions), accessibility (role/title/desc), performance degradation paths (transitioning to canvas for >1000 elements), and common troubleshooting steps.

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");

Such standards are the empirical foundation backing its claim of 'publication-quality' graphics (SKILL.md:20 `Publication-quality graphics with fine-grained styling control`), distinguishing it from a superficial code snippet repository.

2Core Capabilities

01Chart selection guidance (including negative boundaries: use Three.js for 3D)

02Ready-to-use recipes for 7 standard chart types: bar, line, scatter, chord, heatmap, pie, and force-directed

03Interactive triad: tooltips (cursor-following overlays), zoom/pan, and click feedback

04Transitions and animation orchestration: basic, chained, staggered delays, and custom easing curves

05Responsive sizing and resource cleanup (window resize listener + ResizeObserver + cleanup return function)

06Scales and color palette knowledge base: full spectrum of continuous/sequential/ordinal scales + colorways, colorblind-safe palettes, contrast checks, and domain-specific recommendations

07Geographic visualization: Mercator point maps and choropleths (d3.geoMercator/geoPath, with geometry data supplied by the caller)

08Ready-to-run implementation templates: 106-line basic React chart + 227-line interactive chart + 8 sample datasets

3External Dependencies

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

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt instructions and rule text; involves no script execution or external impact.

Audit Notes: Purely an instructional knowledge-base skill: No script execution, no outbound network activity, no credential reading, and no forced local file writes—the entire directory contains only 7 files (SKILL.md + 3 markdown references + 2 jsx templates + 1 json dataset). Byte-by-byte scanning shows no URLs aside from the d3 CDN and no occurrences of exec, fs, env, or secret keys (the only literal match was an `fs.` false positive inside `defs.append(`). Two usage-level caveats do not alter this classification, as both pertain to output artifacts rather than the skill itself: (1) Output artifacts depend on d3/React/Tailwind, and CDN imports lack SRI hashes; (2) Tutorials and interactive templates demonstrate string concatenation via `.html()`, which poses a DOM XSS surface when rendering untrusted third-party data.

5Second-Pass Verification

[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 语义）残留。

6Verdict & Scenarios

Well-balanced knowledge density and structure: A single SKILL.md spans selection → skeleton → common charts → interactivity → transitions → scales → accessibility, offloading 20+ complete chart collections, scales, and palettes into references, directly addressing the core challenge of guiding models to write correct d3.

High output reliability: The unified skeleton, empty data early exit, .join() binding, and responsive cleanup routines proactively eliminate classic d3 pitfalls (duplicate renders, NaN domains, leaking resize listeners).

Clear technical boundaries to minimize misuse: Explicitly indicates that 3D scenarios should be routed to Three.js.

Minimal audit surface with full portability: Consists of 7 files, zero scripts, zero network calls, and zero credentials, requiring no installation steps across host environments.

Best for: Suitable for developers and agent sessions needing to produce bespoke visualizations in React or vanilla JS environments (force-directed graphs, chord diagrams, heatmaps, choropleths, interactive plots with pan/zoom/brush); also ideal as an internal team engineering benchmark for writing robust d3 code (the skeleton, responsive cleanup, accessibility, and performance degradation sections can serve directly as checklists). When used as a skill, its value lies in standardizing chart selection and architectural structure, saving round-trips otherwise spent on inferring d3 API nuances.

Not for: Not suitable for 3D visualizations (the document directly redirects to Three.js); not suitable for direct out-of-the-box use in Vue/Svelte projects (templates and examples default to React + Tailwind); not suitable for legacy d3 v5/v6 projects (API surface is written for v7); not suitable for compliance environments demanding SRI or fully offline dependencies (CDN includes lack integrity hashes and need self-hosting); not suitable for workflows expecting the skill to automatically render or self-test charts—it strictly generates code without execution or previewing capabilities.

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

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit e198c87d03.