Claude D3js Skill
This is a comprehensive guide for building custom data visualizations with d3.js, covering everything from basic setup through complex interactive charts. It breaks down two integration patterns: direct DOM manipulation for full d3 power, and declarative rendering for framework compatibility. The real value is in the detailed code structure it provides, including responsive sizing with ResizeObserver, proper margin conventions, and working examples of bar charts, line charts, and scatter plots. It's honest about when to skip d3 (use Three.js for 3D stuff), and the workflow section gives you a solid template to follow rather than forcing you to piece together patterns from scattered examples. Good if you need custom visualizations beyond what Chart.js offers.
- skills.sh installs
- 391
- GitHub stars
- 39.4K
- last updated
- Jun 3, 2026
Install
$ npx -y skills add sickn33/antigravity-awesome-skills --skill claude-d3js-skill --agent claude-codeInstalls 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:
- 3D visualisations - use Three.js instead
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/sickn33/antigravity-awesome-skills
- First seen
- Jun 3, 2026
More from sickn33/antigravity-awesome-skills
All 708- Devops Troubleshooter391
- Github Actions Templates391
- Multi Agent Patterns390
- Docx Official389
- Javascript Pro387
- Deep Research386
- Threat Modeling Expert384
- Sql Injection Testing382
- Async Python Patterns380
- Mlops Engineer380
- Seo Content Planner380
- Debugger379
- Seo Content Auditor379
- Python Development Python Scaffold378
- React Modernization377
- Codebase Cleanup Deps Audit375
- Pdf Official374
- Tutorial Engineer374
- Angular372
- Angular State Management372
- Code Refactoring Context Restore372
- Minecraft Bukkit Pro372
- Exa Search369
- Backtesting Frameworks367
Recommended
cavemanjuliusbrussee/cavemanUltra-compressed communication mode. Cuts output tokens 65% (measured) by speaking like caveman while keeping full technical accuracy. Supports intensity levels618.3Kskills.sh installs
improveshadcn/improveSurvey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on s40Kskills.sh installs
systematic-debuggingobra/superpowersUse when encountering any bug, test failure, or unexpected behavior, before proposing fixes326.7Kskills.sh installs
karpathy-guidelinesforrestchang/andrej-karpathy-skillsBehavioral guidelines to reduce common LLM coding mistakes through explicit assumptions, simplicity, and verifiable success criteria.17.9Kskills.sh installs
find-skillsvercel-labs/skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express int4.3Mskills.sh installs