Can I use my own CSV or JSON data?

Yes. During the discovery interview, you can specify your data file path or paste data directly. If no data is available, the skill generates realistic sample data to get you started.

What output formats are available?

You can choose between a single standalone HTML file (ideal for sharing), a multi-file HTML + JavaScript structure, or a modular React component (.tsx).

Does it support mobile-responsive charts?

Absolutely. All visualizations use SVG viewBox attributes and flexible CSS layouts rather than fixed pixels to ensure they scale responsively across different screen sizes.

What versions of D3.js does this skill support?

This skill is optimized for D3.js v7, utilizing the latest ES module patterns and modern JavaScript standards for high-performance visualizations.

How do I trigger the artistic mode?

Simply mention keywords like 'creative', 'artistic', or 'generative' in your request to activate the Design Philosophy workflow for non-traditional, philosophy-driven visualizations.

D3.js Data Visualizations

Name: D3.js Data Visualizations
Author: reggiechan74

byreggiechan74

•

Data Science & ML

Generates professional, responsive D3.js v7 data visualizations including charts, maps, and network diagrams through a guided discovery process.

This skill empowers developers to build production-ready D3.js visualizations quickly by automating the setup of complex SVG layouts, scales, and data bindings. It features a unique three-round discovery interview to capture user goals, audience needs, and data specifics, ensuring the final output is perfectly tailored—whether it's a standalone HTML file for a report or a React component for a web application. With support for both professional 'Direct' and artistic 'Creative' modes, it handles everything from basic bar charts to intricate force-directed graphs and choropleth maps while adhering to modern D3 v7 best practices and responsive design principles.

Key Features

01Interactive three-round discovery interview to define visualization goals and audience requirements.

02Support for D3 v7 with multiple output formats: Standalone HTML, HTML/JS, or React components.

03Automatic mock data generation for immediate visualization rendering when datasets aren't provided.

04Responsive SVG layouts using viewBox and CSS Flexbox for single-screen, no-scroll displays.

055 GitHub stars

06Two workflow modes: Direct for professional implementation and Creative for artistic, generative designs.

Use Cases

01Creating executive-ready dashboards and reports that fit perfectly on a single screen without scrolling.

02Integrating custom, data-driven SVG visualizations into existing React applications.

03Building complex hierarchical or relational diagrams like Sankey, Sunburst, or Force-Directed graphs.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add reggiechan74/cc-plugins d3js

For use in Claude.ai and ChatGPT