# claude-d3js-skill

Tells the agent how to build non-standard d3.js visualisations: network graphs, geographic maps, choreographed transitions. Useful when off-the-shelf charting libraries fall short.

- skill · `type=skill` · Claude Code · 531 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/claude-d3js-skill
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/claude-d3js-skill

## What it does

The skill lays out a d3.js workflow: import via `import * as d3 from 'd3'` or the 7.x CDN build, a choice between direct DOM manipulation and declarative rendering, and a drawing function structured around dimensions, scales, axes and data joins. Responsive sizing gets its own section, with `ResizeObserver` and a `resize` handler that returns a cleanup function.

Ready-made patterns cover a bar chart plus force-directed layouts, trees, hierarchies and custom map projections. All of it works in any JavaScript environment — React, Vue, Svelte, plain JS. For 3D the skill points you at Three.js instead, since d3.js won't help there.

The skill file cuts off partway through the bar chart example, so past that point you're leaning on your own d3 knowledge. Install with `npx claude-code-templates@latest --skill creative-design/claude-d3js-skill`.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill creative-design/claude-d3js-skill
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill claude-d3js-skill -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/claude-d3js-skill/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/claude-d3js-skill/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/claude-d3js-skill/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/claude-d3js-skill/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates claude-d3js-skill
```

2. **Manually: put the files in place**
- File: `.github/skills/claude-d3js-skill/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/claude-d3js-skill
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/claude-d3js-skill/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/claude-d3js-skill

## When to use it
- build a force-directed graph of entity relationships
- draw a map with a custom projection
- add smooth transitions between chart states
- create a chart type no standard library offers
- redraw a chart when its container resizes

## Example prompts
- Build an interactive force-directed graph of user connections with d3.js
- Draw a map with a custom projection and zoom using d3.js
- Rewrite this chart in d3.js so it animates smoothly when the data updates

## Similar
- [animejs](https://affpapa.org/en/nevibecode/skills/animejs.md) — skill · 2800 installs
- [whiteboard-animation](https://affpapa.org/en/nevibecode/skills/whiteboard-animation.md) — skill · 1400 installs
- [gsap](https://affpapa.org/en/nevibecode/skills/mindrally-gsap.md) — skill · 769 installs
- [scrollytelling-and-parallax-data-visualization](https://affpapa.org/en/nevibecode/skills/scrollytelling-and-parallax-data-visualization.md) — skill · 13 installs
- [build-dashboard](https://affpapa.org/en/nevibecode/skills/anthropics-build-dashboard.md) — skill · 9100 installs
- [kpi-dashboard-design](https://affpapa.org/en/nevibecode/skills/secondsky-kpi-dashboard-design.md) — skill · 507 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 224 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md