Claude D3js Skill

This gives Claude comprehensive guidance on building custom data visualizations with d3.js, from basic bar charts to complex network diagrams. The documentation covers two integration patterns: direct DOM manipulation for full d3 capabilities, and declarative rendering for framework compatibility. You get practical code for responsive sizing, proper margin conventions, and common chart types with working examples. The skill is honest about when to skip d3 (use Three.js for 3D instead), and the structure section alone will save you from reinventing the wheel on every project. If you're building anything beyond standard chart library offerings or need fine-grained control over transitions and interactions, this is solid reference material.

skills.sh installs: 310
GitHub stars: 39.4K
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add sickn33/antigravity-awesome-skills --skill claude-d3js-skill --agent claude-code

Installs into .claude/skills of the current project.

Files

D3.js Visualisation

Detailed Guide

Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

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: