Agent 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.

21k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

505

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI --skill agent-d3js-skill

What comes with it

80 324 bytes besides the instruction

assets/chart-template.jsx

assets/interactive-template.jsx

assets/sample-data.json

references/colour-schemes.md

references/d3-patterns.md

references/scale-reference.md

sub-skills/1-set-up-d3js.md

sub-skills/2-choose-the-integration-pattern.md

sub-skills/3-structure-the-visualisation-code.md

sub-skills/4-implement-responsive-sizing.md

sub-skills/accessibility.md

sub-skills/assets.md

sub-skills/bar-chart.md

sub-skills/chord-diagram.md

sub-skills/click-interactions.md

sub-skills/data-preparation.md

sub-skills/force-directed-network.md

sub-skills/heatmap.md

sub-skills/line-chart.md

sub-skills/ordinal-scales.md

sub-skills/performance-optimisation.md

sub-skills/pie-chart.md

sub-skills/quantitative-scales.md

sub-skills/references.md

sub-skills/scatter-plot.md

sub-skills/sequential-scales.md

sub-skills/styling.md

sub-skills/tooltips.md

sub-skills/zoom-and-pan.md

The instruction itself

28 sections, as written by the author

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 techniques work across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks.

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

🧠 Knowledge Modules (Fractal Skills)

1. 1. Set up d3.js

2. 2. Choose the integration pattern

3. 3. Structure the visualisation code

4. 4. Implement responsive sizing

5. Bar chart

6. Line chart

7. Scatter plot

8. Chord diagram

9. Heatmap

10. Pie chart

11. Force-directed network

12. Tooltips

13. Zoom and pan

14. Click interactions

15. Quantitative scales

16. Ordinal scales

17. Sequential scales

18. Data preparation

19. Performance optimisation

20. Accessibility

21. Styling

22. references/

23. assets/

Other skills for the same job

different authors, same section of the catalogue

Hook Development

by anthropics

vendor ×2

This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.

Build agentic applications with GitHub Copilot SDK. Use when embedding AI agents in apps, creating custom tools, implementing streaming responses, managing sessions, connecting to MCP servers, or creating custom agents. Triggers on Copilot SDK, GitHub SDK, agentic app, embed Copilot, programmable agent, MCP server, custom agent.

Coding Agent Session Search - unified CLI/TUI to index and search local coding agent history from Claude Code, Codex, Gemini, Cursor, Aider, ChatGPT, Pi-Agent, Factory, and more. Purpose-built for AI agent consumption with robot mode.

Destructive Command Guard - High-performance Rust hook for Claude Code that blocks dangerous commands before execution. SIMD-accelerated, modular pack system, whitelist-first architecture. Essential safety layer for agent workflows.

Makepad UI development skills for Rust apps: setup, patterns, shaders, packaging, and troubleshooting.

Secure environment variable management ensuring secrets are never exposed in Claude sessions, terminals, logs, or git commits

Prompt for generating an AGENTS.md file for a repository

2k tokens

How to use it

Copy the folder

Take dokhacgiakhoa/agent-d3js-skill from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.