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

•

Data Science & ML

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.

Key Features

01Advanced animation and transition management for publication-quality graphics

02Framework-agnostic implementation patterns for React, Vue, Svelte, and vanilla JavaScript

03Custom SVG element binding and data-driven transformations

04Support for complex layouts including chord diagrams, heatmaps, and force-directed graphs

05Integrated responsive design patterns using ResizeObserver and container monitoring

061 GitHub stars

Use Cases

01Creating interactive dashboards with bespoke charting requirements beyond standard libraries

02Visualizing geographic data with custom projections and interactive zoom/pan behaviors

03Mapping complex network relationships and hierarchical data structures through force-directed layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add prof-ramos/.codex claude-d3js-skill

For use in Claude.ai and ChatGPT

Download Skill