skills.rest
pjmagee
pjmageeCOMMUNITY
Explore all skills by this author →
Website𝕏@PatrickMageeGitHub

claude-d3js-skill

Provide implementation guidance for building interactive d3.js visualizations.

4|2|Updated May 18, 2022
Search Tags:#accessibility#charts#interactive#visualization#d3#scales#color-schemes
One-click install
npx skills add https://github.com/pjmagee/starwars-data --skill claude-d3js-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-d3js-skill
Source: https://github.com/pjmagee/starwars-data/tree/main/.agents/skills/claude-d3js-skill
Command: npx skills add https://github.com/pjmagee/starwars-data --skill claude-d3js-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

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.

Frequently Asked Questions about claude-d3js-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build interactive D3 visualizations with tooltips and zoom in React?▼

Interactive D3 visualizations in React can be built using provided boilerplate templates and code patterns for tooltips, zoom, and pan. The skill delivers framework-specific integration guidance for React, Vue, and Svelte to accelerate development.

What's the best way to make D3 charts responsive and accessible?▼

Making D3 charts responsive and accessible requires applying responsive sizing techniques, ARIA labels, and keyboard support. The skill provides best practices for contrast guidance, redundant encodings, and perceptual color schemes to ensure publication-quality results.

Can I use D3 to create geographic maps and chord diagrams?▼

D3 can create geographic maps and chord diagrams using the included pattern library. The skill offers code patterns, sample datasets, and implementation guidance for various chart types including bar, line, scatter, heatmap, treemap, and sunburst visualizations.

How do D3 scales and color schemes work for data visualization?▼

D3 scales and color schemes map data values to visual properties using technical guidance on perceptual considerations and consistent styling. The skill provides recommendations for applying appropriate scales and perceptually uniform color schemes to chart data.

Does D3 work with vanilla JavaScript or do I need a framework?▼

D3 works with vanilla JavaScript without requiring a framework. The skill provides ready-to-use boilerplate templates, sample datasets, and code patterns suitable for vanilla JavaScript environments as well as React, Vue, and Svelte integrations.

SVG vs canvas for D3 visualizations: when should I use each?▼

SVG and canvas choices in D3 visualizations depend on performance requirements and rendering complexity. The skill provides technical guidance on SVG versus canvas performance considerations to inform rendering decisions for interactive charts and animated transitions.

Related Skills

Explore More Design & Creative Skills→
Lev-itLev-it

dummy-dataset

Generate dummy datasets with customizable columns and output formats.

Official
Intermediate
AutumnsGroveAutumnsGrove
26

d3js-visualization

Create interactive D3.js v7 charts for dashboards and web applications.

Community
Intermediate
hongmaple0820hongmaple0820
9

d3-viz

Transform data into interactive custom SVG visualizations with D3.js.

Community
Advanced
spences10spences10
15

svelte-layerchart

Generate interactive LayerChart components with tooltips, gradients, and highlights for Svelte.

Community
Intermediate