Skill · em Criar imagem, vídeo e arte

d3-viz

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…

Procedência

Antes de instalar

7 arquivos · 80,1 KB · inclui 2 scripts que executam: assets/chart-template.jsx, assets/interactive-template.jsx

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/d3-viz/.

d=".claude/skills/d3-viz"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/claude-d3js-skill"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/assets/chart-template.jsx" "$u/assets/chart-template.jsx" \
  -o "$d/assets/interactive-template.jsx" "$u/assets/interactive-template.jsx" \
  -o "$d/assets/sample-data.json" "$u/assets/sample-data.json" \
  -o "$d/references/colour-schemes.md" "$u/references/colour-schemes.md" \
  -o "$d/references/d3-patterns.md" "$u/references/d3-patterns.md" \
  -o "$d/references/scale-reference.md" "$u/references/scale-reference.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.claude/skills/d3-viz/.

d="$HOME/.claude/skills/d3-viz"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/claude-d3js-skill"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/assets/chart-template.jsx" "$u/assets/chart-template.jsx" \
  -o "$d/assets/interactive-template.jsx" "$u/assets/interactive-template.jsx" \
  -o "$d/assets/sample-data.json" "$u/assets/sample-data.json" \
  -o "$d/references/colour-schemes.md" "$u/references/colour-schemes.md" \
  -o "$d/references/d3-patterns.md" "$u/references/d3-patterns.md" \
  -o "$d/references/scale-reference.md" "$u/references/scale-reference.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Codex

Neste projeto: instala em .agents/skills/d3-viz/.

d=".agents/skills/d3-viz"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/claude-d3js-skill"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/assets/chart-template.jsx" "$u/assets/chart-template.jsx" \
  -o "$d/assets/interactive-template.jsx" "$u/assets/interactive-template.jsx" \
  -o "$d/assets/sample-data.json" "$u/assets/sample-data.json" \
  -o "$d/references/colour-schemes.md" "$u/references/colour-schemes.md" \
  -o "$d/references/d3-patterns.md" "$u/references/d3-patterns.md" \
  -o "$d/references/scale-reference.md" "$u/references/scale-reference.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.agents/skills/d3-viz/.

d="$HOME/.agents/skills/d3-viz"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/claude-d3js-skill"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/assets/chart-template.jsx" "$u/assets/chart-template.jsx" \
  -o "$d/assets/interactive-template.jsx" "$u/assets/interactive-template.jsx" \
  -o "$d/assets/sample-data.json" "$u/assets/sample-data.json" \
  -o "$d/references/colour-schemes.md" "$u/references/colour-schemes.md" \
  -o "$d/references/d3-patterns.md" "$u/references/d3-patterns.md" \
  -o "$d/references/scale-reference.md" "$u/references/scale-reference.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Antigravity

Neste projeto: instala em .agents/skills/d3-viz/.

d=".agents/skills/d3-viz"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/claude-d3js-skill"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/assets/chart-template.jsx" "$u/assets/chart-template.jsx" \
  -o "$d/assets/interactive-template.jsx" "$u/assets/interactive-template.jsx" \
  -o "$d/assets/sample-data.json" "$u/assets/sample-data.json" \
  -o "$d/references/colour-schemes.md" "$u/references/colour-schemes.md" \
  -o "$d/references/d3-patterns.md" "$u/references/d3-patterns.md" \
  -o "$d/references/scale-reference.md" "$u/references/scale-reference.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.gemini/antigravity-cli/skills/d3-viz/.

d="$HOME/.gemini/antigravity-cli/skills/d3-viz"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/claude-d3js-skill"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/assets/chart-template.jsx" "$u/assets/chart-template.jsx" \
  -o "$d/assets/interactive-template.jsx" "$u/assets/interactive-template.jsx" \
  -o "$d/assets/sample-data.json" "$u/assets/sample-data.json" \
  -o "$d/references/colour-schemes.md" "$u/references/colour-schemes.md" \
  -o "$d/references/d3-patterns.md" "$u/references/d3-patterns.md" \
  -o "$d/references/scale-reference.md" "$u/references/scale-reference.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.d3-viz

Prévia do SKILL.md

---
name: d3-viz
description: 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 b…
---

# D3.js Visualisation

## Overview

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 tec…

## When to use d3.js

**Use d3.js for:**
- Custom visualisations requiring unique visual encodings or layouts
- Interactive explorations with complex pan, zoom, or brush behaviours
- Network/graph visualisations (force-directed layouts, tree diagrams, hierarchies, chord diagrams)
- Geographic visualisations with custom projections
- Visualisations requiring smooth, choreographed transitions
- Publication-quality graphics with fine-grained styling control
- Novel chart types not available in standard libraries

**Consider alternatives for:**
- 3D visualisations - use Three.js instead

## Core workflow

### 1. Set up d3.js

Import d3 at the top of your script:

```javascript
import * as d3 from 'd3';
```

Or use the CDN version (7.x):

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

Ver todo o marketplace