claude-d3js-skill
CommunityGuides to build interactive D3 visualisations
Authorpjmagee
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Provides practical, example-driven guidance to design and implement custom, interactive data visualisations using d3.js so teams can avoid common pitfalls, accelerate development, and deliver publication-quality charts with consistent styling and accessibility.
Core Features & Use Cases
- Pattern library for common charts: bar, line, scatter, stacked/grouped bars, area, pie, chord, heatmap, treemap, sunburst, and geographic maps.
- Interaction recipes including tooltips, zoom & pan, brush selection, drag-and-drop, linked brushing, and animated transitions.
- Technical guidance on scales, colour schemes, responsive sizing, performance (SVG vs canvas), and perceptual considerations.
- Accessibility & styling best practices: ARIA labels, contrast guidance, redundant encodings, and keyboard support.
- Assets & templates: ready-to-use boilerplate templates and a sample dataset to jump-start integration into vanilla JS or frameworks like React, Vue, and Svelte.
Quick Start
Use the claude-d3js-skill to create a responsive D3 scatter plot from assets/sample-data.json including tooltips, zoom, and accessible labels.
Dependency Matrix
Required Modules
None requiredComponents
referencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: claude-d3js-skill Download link: https://github.com/pjmagee/starwars-data/archive/main.zip#claude-d3js-skill Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.