# claude-d3js-skill

Подсказывает агенту, как строить нестандартные визуализации на d3.js: сетевые графы, географические карты, плавные переходы. Пригодится, когда обычных библиотек графиков не хватает.

- скилл · `type=skill` · Claude Code · 531 установка
- Автор: davila7
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/claude-d3js-skill
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/skills/claude-d3js-skill

## Что делает

Скилл описывает рабочий процесс для d3.js: импорт через `import * as d3 from 'd3'` или CDN-сборку 7.x, выбор между прямой работой с DOM и декларативным рендерингом, структура функции рисования со шкалами, осями и привязкой данных. Отдельно разобрана адаптивность — через `ResizeObserver` или обработчик `resize` с функцией очистки.

Внутри есть готовые шаблоны: столбчатая диаграмма, а ещё примеры на force-directed layouts, деревья и иерархии, кастомные проекции для карт. Всё это работает в любом JavaScript-окружении — React, Vue, Svelte, чистый JS. Для 3D скилл прямо советует Three.js, потому что d3.js здесь не помощник.

Файл скилла обрезан на примере столбчатой диаграммы, так что дальше по тексту придётся опираться на собственные знания d3. Установка идёт через `npx claude-code-templates@latest --skill creative-design/claude-d3js-skill`.

## Установка

### Claude Code (родная платформа)

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. **Вручную: положить файлы**
- Файл: `~/.claude/skills/claude-d3js-skill/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/claude-d3js-skill/

### Codex

**Вручную: положить файлы**
- Файл: `.agents/skills/claude-d3js-skill/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/skills/claude-d3js-skill/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

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

2. **Вручную: положить файлы**
- Файл: `.github/skills/claude-d3js-skill/SKILL.md`

### Gemini 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)

**Вручную: положить файлы**
- Файл: `.devin/skills/claude-d3js-skill/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/claude-d3js-skill

## Когда брать
- построить force-directed граф связей между сущностями
- сделать карту с нестандартной проекцией
- добавить плавные переходы между состояниями диаграммы
- собрать диаграмму, которой нет в готовых библиотеках
- настроить перерисовку графика при изменении размера контейнера

## Примеры запросов агенту
- Сделай интерактивный граф связей между пользователями на d3.js с force-directed layout
- Нарисуй карту с кастомной проекцией и зумом на d3.js
- Перепиши этот график на d3.js, чтобы добавить плавные переходы при обновлении данных

## Похожие
- [animejs](https://affpapa.org/nevibecode/skills/animejs.md) — скилл · 2800 установок
- [whiteboard-animation](https://affpapa.org/nevibecode/skills/whiteboard-animation.md) — скилл · 1400 установок
- [gsap](https://affpapa.org/nevibecode/skills/mindrally-gsap.md) — скилл · 769 установок
- [scrollytelling-and-parallax-data-visualization](https://affpapa.org/nevibecode/skills/scrollytelling-and-parallax-data-visualization.md) — скилл · 13 установок
- [build-dashboard](https://affpapa.org/nevibecode/skills/anthropics-build-dashboard.md) — скилл · 9100 установок
- [kpi-dashboard-design](https://affpapa.org/nevibecode/skills/secondsky-kpi-dashboard-design.md) — скилл · 507 установок

Из того же набора: [davila7/claude-code-templates](https://affpapa.org/nevibecode/by/davila7/claude-code-templates.md) — 205 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md