Does this skill work with React or Vue?

Yes, it includes specific integration patterns for both declarative framework rendering and direct DOM manipulation using D3.js.

How does it handle responsive chart sizing?

The skill provides implementation patterns for ResizeObserver and window resize listeners to ensure visualisations automatically scale to their parent containers.

What types of complex charts are supported?

It provides templates and guidance for chord diagrams, heatmaps, force-directed graphs, geographic projections, and standard charts like bar and line graphs.

Can I create 3D visualisations with this skill?

This skill is optimized for SVG-based 2D visualisations. For 3D graphics, it is generally recommended to use a library like Three.js.

D3.js Data Visualisation

Name: D3.js Data Visualisation
Author: pur3v4d3r

bypur3v4d3r

•

数据科学与机器学习

Builds interactive, bespoke data visualisations with fine-grained SVG control using the d3.js library.

关于

This skill empowers Claude to design and implement sophisticated, publication-quality data visualisations using d3.js. It provides specific patterns for integrating D3 with modern frameworks like React, Vue, and Svelte, as well as vanilla JavaScript. Whether you need complex network diagrams, geographic maps, or custom animated charts, this skill ensures best practices for data binding, scales, axes, and responsive design, allowing for visual storytelling that goes far beyond the limitations of standard charting libraries.

主要功能

1 GitHub stars
Bespoke SVG-based charts and network diagrams
Sophisticated layout configurations including chord and heatmap diagrams
Framework-agnostic implementation patterns (React, Vue, Svelte, Vanilla)
Advanced data-driven transitions and interactive elements
Built-in support for responsive, mobile-friendly resizing

使用场景

Creating custom interactive dashboards with unique visual encodings
Implementing geographic data visualisations with custom projections
Developing complex relationship maps and hierarchical tree diagrams

关于

主要功能

1 GitHub stars
Bespoke SVG-based charts and network diagrams
Sophisticated layout configurations including chord and heatmap diagrams
Framework-agnostic implementation patterns (React, Vue, Svelte, Vanilla)
Advanced data-driven transitions and interactive elements
Built-in support for responsive, mobile-friendly resizing

使用场景

Creating custom interactive dashboards with unique visual encodings
Implementing geographic data visualisations with custom projections
Developing complex relationship maps and hierarchical tree diagrams