Can this skill work with React or Vue?

Yes, the skill includes specific patterns for both direct DOM manipulation and declarative rendering suited for all modern JavaScript frameworks.

What types of visualizations can I build?

You can build a wide range of visualizations, from standard bar and line charts to complex chord diagrams, heatmaps, scatter plots, and network graphs.

Can I create responsive charts with this skill?

Absolutely. The skill provides specific implementation patterns for using ResizeObserver and window listeners to ensure visualizations scale correctly with their containers.

Does it support 3D visualizations?

No, D3.js is primarily designed for SVG and Canvas 2D visualizations. For 3D work, using a library like Three.js is recommended.

D3.js Data Visualization

Name: D3.js Data Visualization
Author: prof-ramos

byprof-ramos

•

数据科学与机器学习

Builds sophisticated, interactive, and data-driven visualizations using the D3.js library for custom charts and complex diagrams.

关于

This skill empowers Claude to architect and implement high-quality, bespoke data visualizations using the D3.js (Data-Driven Documents) library. It provides structured patterns for binding data to the DOM, managing SVG elements, and creating complex layouts like force-directed graphs, chord diagrams, and geographic projections. Designed for flexibility, it supports both direct DOM manipulation and declarative integration with modern frameworks like React, Vue, and Svelte, ensuring precise control over transitions, interactions, and responsive design.

主要功能

Advanced animation and transition management for publication-quality graphics
Framework-agnostic implementation patterns for React, Vue, Svelte, and vanilla JavaScript
Custom SVG element binding and data-driven transformations
Support for complex layouts including chord diagrams, heatmaps, and force-directed graphs
Integrated responsive design patterns using ResizeObserver and container monitoring
1 GitHub stars

使用场景

Creating interactive dashboards with bespoke charting requirements beyond standard libraries
Visualizing geographic data with custom projections and interactive zoom/pan behaviors
Mapping complex network relationships and hierarchical data structures through force-directed layouts

关于

主要功能

Advanced animation and transition management for publication-quality graphics
Framework-agnostic implementation patterns for React, Vue, Svelte, and vanilla JavaScript
Custom SVG element binding and data-driven transformations
Support for complex layouts including chord diagrams, heatmaps, and force-directed graphs
Integrated responsive design patterns using ResizeObserver and container monitoring
1 GitHub stars

使用场景

Creating interactive dashboards with bespoke charting requirements beyond standard libraries
Visualizing geographic data with custom projections and interactive zoom/pan behaviors
Mapping complex network relationships and hierarchical data structures through force-directed layouts