skills.rest
lacsousa
lacsousaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

reversa-especialista-d3

Generates standalone HTML data visualizations using D3.js v7 charts.

Updated Jun 12, 2026
Search Tags:#html#data visualization#charts#frontend#javascript#svg#d3.js
One-click install
npx skills add https://github.com/lacsousa/mediclaw-system --skill reversa-especialista-d3-lacsousa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-especialista-d3
Source: https://github.com/lacsousa/mediclaw-system/tree/main/.agents/skills/reversa-especialista-d3
Command: npx skills add https://github.com/lacsousa/mediclaw-system --skill reversa-especialista-d3-lacsousa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating interactive, standards-compliant D3.js visualizations from raw data or mockups requires deep knowledge of the D3 v7 API, scales, and layout algorithms. This Skill produces complete standalone HTML pages with D3 charts (force-directed graphs, hierarchies, sankey, treemap) that follow v7 conventions and work offline via file:// without CDN dependencies. ## Core Features & Use Cases - Data Analysis & Chart Selection: Inspects whether data is categorical, temporal, quantitative, or hierarchical to recommend the right visualization type (Bar, Scatter, Force-Directed, Sunburst, Treemap). - D3 v7 Code Generation: Produces modular, reusable chart code using selections, the join pattern, documented scales (d3.scaleLinear, d3.scaleTime), accessible color scales, tooltips, and transitions. - Offline-Ready Output: Vendors d3.v7.min.js locally and injects data via window.RV_DATA or embedded JSON script tags, avoiding fetch() and CORS issues so pages open directly from disk. - Use Case: Given a JSON dataset of organizational hierarchy, generate a responsive Sunburst diagram as a single HTML file that renders correctly when opened locally in a browser. ## Quick Start Ask the agent to generate a D3.js force-directed graph as a standalone HTML page from your JSON dataset.

Frequently Asked Questions about reversa-especialista-d3

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a D3.js chart as a standalone HTML file?▼

Generate a single HTML page that loads the D3 library, embeds your data via a script tag with type application/json, and builds the chart with D3 selections and the join pattern. This Skill produces that complete file including the SVG container.

What D3.js chart type should I use for hierarchical data?▼

Hierarchical data works best with d3-hierarchy layouts such as Sunburst, Treemap, or Circle Packing. The Skill consults its layouts reference to select and implement the appropriate hierarchy generator for your data structure.

Does this D3 skill support version 7 of the library?▼

Yes, the Skill targets D3.js v7 and checks its references directory to ensure API conformance with v7 modules like d3-selection, d3-scale, d3-shape, and d3-hierarchy before generating code.

Why does my D3 page fail when opened via file:// protocol?▼

Pages fail under file:// when they fetch local data files or load scripts from CDNs blocked by CORS. The Skill avoids this by vendoring d3.v7.min.js locally and embedding data in window.RV_DATA or an inline JSON script tag.

When should I use Canvas instead of SVG in D3 visualizations?▼

Use SVG for interactive charts with moderate data volumes, and switch to Canvas when rendering massive datasets above roughly 5000 points, where DOM node overhead makes SVG rendering slow.

Related Skills

Explore More Software Engineering Skills→
brainbrewlabsbrainbrewlabs
7

data-collection

Collect data from APIs, databases, and files into validated CSV, JSON, or Parquet outputs.

Official
Intermediate
HugoRCDHugoRCD
1.8k

before-after

Captures before/after screenshots of web pages and publishes them as public Blob URLs.

Community
Advanced
TimeKastTimeKast

kb-dataviz

Create accessible dashboard and chart patterns for Next.js applications.

Official
Intermediate
caylentcaylent
196

tufte-data-viz

Apply Edward Tufte's principles to create and review charts across multiple libraries.

Official
Advanced