Does this skill support 3D visualizations?

D3.js is primarily focused on SVG and Canvas 2D visualizations. For 3D graphics, it is recommended to use a library like Three.js instead.

Can this skill be used with modern frameworks like React or Vue?

Yes, the skill provides specific integration patterns for both direct DOM manipulation and declarative rendering suited for React, Vue, and Svelte environments.

How does it handle responsive chart sizing?

The skill includes patterns for implementing responsive sizing using window resize listeners and ResizeObserver to ensure visualizations fit their containers perfectly.

What kind of complex visualizations can Claude create with this skill?

Claude can generate code for bar charts, line graphs, scatter plots, chord diagrams, heatmaps, tree diagrams, and force-directed network graphs.

D3.js Interactive Visualizations

Name: D3.js Interactive Visualizations
Author: claudiodearaujo

byclaudiodearaujo

•

数据科学与机器学习

Generates sophisticated, interactive data visualizations and custom SVG-based charts using the D3.js library.

This skill empowers Claude to build complex, publication-quality data visualizations that go beyond the limitations of standard charting libraries. It provides expert guidance on D3.js implementation patterns, covering everything from basic bar and line charts to advanced chord diagrams, heatmaps, and force-directed network graphs. Whether working in vanilla JavaScript or frameworks like React, Vue, and Svelte, this skill ensures precise control over visual elements, transitions, and interactive behaviors like zooming and brushing.

主要功能

01Framework-agnostic patterns for React, Vue, and Svelte

02Support for complex layouts including Force-directed and Chord diagrams

03Responsive design using ResizeObserver and container-relative scaling

04Bespoke SVG-based chart and graph generation

051 GitHub stars

06Interactive behavior implementation (zoom, pan, brush)

使用场景

01Creating custom analytics dashboards with unique data encodings

02Developing geographic visualizations with custom map projections

03Building interactive relationship maps and hierarchical tree diagrams

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