Can I use this D3.js skill with modern frameworks like React or Vue?

Yes, the skill includes specific integration patterns for both direct DOM manipulation (imperative) and declarative rendering suitable for React, Vue, and Svelte.

Does this skill support 3D visualizations?

No, D3.js is optimized for 2D SVG and Canvas visualizations. For 3D requirements, the skill recommends using Three.js.

What kind of complex visualizations can I build?

Beyond standard bar and line charts, this skill provides guidance for chord diagrams, heatmaps, scatter plots, and custom force-directed network layouts.

How does the skill handle mobile responsiveness?

The skill provides patterns for implementing ResizeObserver and window event listeners to ensure visualizations dynamically scale to their parent container's dimensions.

D3.js Data Visualization

Name: D3.js Data Visualization
Author: claudiodearaujo

byclaudiodearaujo

•

データサイエンスとML

Creates sophisticated, interactive, and publication-quality data visualizations using the D3.js library across any JavaScript environment.

The D3.js Visualisation skill empowers Claude to generate complex, data-driven documents with fine-grained control over SVG elements, transitions, and interactions. It provides structured guidance for implementing custom charts, network diagrams, geographic maps, and responsive layouts that go beyond the limitations of standard charting libraries. Whether working in React, Vue, Svelte, or vanilla JavaScript, this skill ensures best practices for data binding, scaling, and DOM manipulation to create professional-grade visual explorations and interactive dashboards.

主な機能

01Dual integration strategies for both direct DOM manipulation and framework-specific declarative rendering

02Fine-grained control over choreographed transitions, animations, and interactive behaviors

03Responsive design patterns using ResizeObserver and container-based scaling for fluid layouts

04Advanced data binding and transformation techniques for dynamic, data-driven updates

05Implementation of custom SVG-based charts and complex layouts like Chord diagrams and Heatmaps

061 GitHub stars

ユースケース

01Building bespoke interactive dashboards with unique visual encodings and complex layouts

02Developing publication-quality geographic visualizations with custom map projections

03Creating complex network graphs or hierarchical tree diagrams for advanced data analysis

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro claude-d3js-skill

For use in Claude.ai and ChatGPT

Download Skill