What problem does it solve? Creating interactive data visualizations from scratch requires deep knowledge of D3.js APIs, scales, and layout algorithms. This Skill generates complete, standalone HTML pages with D3.js v7 charts—force-directed graphs, hierarchical trees, sankeys, and treemaps—so you get working 2D visualizations of relationships and data without writing the boilerplate yourself. ## Core Features & Use Cases - Chart Type Selection: Analyzes whether your data is categorical, temporal, quantitative, or hierarchical and proposes the right visualization (bar, scatter, force-directed, sunburst, treemap, sankey). - Standalone HTML Output: Produces complete HTML/JavaScript files with SVG containers, accessible color scales, tooltips, and smooth transitions that open directly in a browser via file:// without CORS issues. - Reference-Grounded Code: Consults bundled D3 v7 references for core APIs, interactivity (zoom, drag, transitions), and complex layouts before generating code. - Use Case: Ask for a "dependency graph 2D" of your project's modules and receive a force-directed D3 visualization in a single HTML file with embedded JSON data. ## Quick Start Ask the agent to generate a force-directed dependency graph as a standalone HTML page from your JSON data.
