skills.rest
Helcio-Nogueira
Helcio-NogueiraCOMMUNITY
Explore all skills by this author →
GitHub

reversa-especialista-d3

Generates standalone HTML visualizations with D3.js v7 including force-directed, hierarchical, sankey, and treemap charts.

Updated Mar 23, 2026
Search Tags:#html generation#data visualization#d3.js#sankey#svg charts#treemap#force-directed graph
One-click install
npx skills add https://github.com/Helcio-Nogueira/Painel_Inteligente_Hackaton_2026 --skill reversa-especialista-d3-helcio-nogueira
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-especialista-d3
Source: https://github.com/Helcio-Nogueira/Painel_Inteligente_Hackaton_2026/tree/main/.agents/skills/reversa-especialista-d3
Command: npx skills add https://github.com/Helcio-Nogueira/Painel_Inteligente_Hackaton_2026 --skill reversa-especialista-d3-helcio-nogueira

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing D3.js v7 code from scratch is error-prone: developers must choose the right chart type for their data, apply correct scales and layouts, and keep pages working offline without CDN or CORS issues. This Skill produces conformant, modular D3 visualizations grounded in official v7 references. ## Core Features & Use Cases - Chart Type Selection: Analyzes whether data is categorical, temporal, quantitative, or hierarchical to propose the right visualization (bar, scatter, force-directed, sunburst, treemap, sankey). - Standalone HTML Output: Generates complete HTML/JavaScript with SVG containers, accessible color scales, tooltips, and smooth transitions, using a locally vendored d3.v7.min.js so pages open via file:// without CORS. - Data Injection Patterns: Reads data from window.RV_DATA via a Publisher-generated data.js, or embeds JSON inline in standalone mode, avoiding fetch() of local files. - Use Case: Ask for a force-directed dependency graph of your codebase modules and receive a ready-to-open HTML page with pan, zoom, and drag interactions. ## Quick Start Generate a D3.js force-directed graph HTML page showing the dependency relationships in my module data.

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 force-directed graph with D3.js v7?▼

Use d3-force to run a physics simulation over nodes and links, then render them with SVG selections and the join pattern. This Skill generates the complete HTML including zoom, drag behavior, and tooltips based on your JSON data.

How to choose the right D3 chart type for my data?▼

Match the data structure to the layout: hierarchical data suits treemaps, sunbursts, and circle packing via d3-hierarchy, while relational network data fits force-directed graphs. Categorical and temporal data typically map to bar, line, or scatter charts with d3-scale.

Can D3.js pages work offline without a CDN?▼

Yes, by vendoring the library locally with a script tag pointing to assets/vendor/d3.v7.min.js. Data is injected via window.RV_DATA or an embedded JSON script tag instead of fetch(), so the page opens via file:// without CORS errors.

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

Use SVG for interactive charts where individual elements need event handlers, and switch to Canvas for massive datasets above roughly 5000 points where DOM node counts degrade rendering performance.

Why does my D3 visualization fail when loading local JSON files?▼

Browsers block fetch() requests to local files under the file:// protocol due to CORS restrictions. Embed the data inline in a script tag with type application/json or expose it through a global variable loaded by a separate data script.

Related Skills

Explore More Data & Analytics Skills→
brainbrewlabsbrainbrewlabs
7

data-collection

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

Official
Intermediate
ZJU-REALZJU-REAL
195

site-builder

Build and publish accessible websites from user ideas to hosted URLs.

Official
Advanced
aesthezelaesthezel
8

accessibility

Audit web content for WCAG 2.2 compliance and generate improvement suggestions.

Community
Advanced
openaiopenai
5.3k

grammar-of-graphics-and-declarative-visualization

Build declarative data visualizations with Vega-Lite, Vega, and Observable Plot.

Official
Intermediate