skills.rest
GleisonOliveira
GleisonOliveiraCOMMUNITY
Explore all skills by this author →
Website𝕏@classefinalGitHub

reversa-especialista-d3

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

Updated May 22, 2026
Search Tags:#html generation#data visualization#charts#svg#d3.js#treemap#force-directed graph
One-click install
npx skills add https://github.com/GleisonOliveira/dockerpilot-mcp --skill reversa-especialista-d3-gleisonoliveira
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-especialista-d3
Source: https://github.com/GleisonOliveira/dockerpilot-mcp/tree/main/.agents/skills/reversa-especialista-d3
Command: npx skills add https://github.com/GleisonOliveira/dockerpilot-mcp --skill reversa-especialista-d3-gleisonoliveira

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing D3.js v7 visualizations from scratch requires deep knowledge of scales, selections, layouts, and the join pattern, and small mistakes produce broken or non-responsive charts. This Skill acts as a senior data visualization engineer that analyzes your data structure and generates complete, working HTML pages with the right chart type. ## Core Features & Use Cases - Data Analysis & Chart Selection: Inspects JSON/CSV data to determine whether it is categorical, temporal, quantitative, or hierarchical, then proposes the best visualization (Bar, Scatter, Force-Directed, Sunburst, Treemap, Sankey). - Complete Code Generation: Produces full HTML/JavaScript with SVG containers, accessible color scales, clean axes, interactive tooltips, and smooth d3.transition animations. - Offline-Ready Output: Uses a locally vendored d3.v7.min.js and embedded data via window.RV_DATA or inline JSON script tags, so pages open via file:// without CDN or CORS issues. - Use Case: Provide a hierarchical JSON of your org structure and receive a standalone HTML page with an interactive, zoomable Sunburst chart that works offline. ## Quick Start Ask the agent to generate a D3.js force-directed graph as a standalone HTML page from your JSON dataset of nodes and links.

Frequently Asked Questions about reversa-especialista-d3

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

FAQPage Schema
How do I generate a D3.js chart from JSON data?▼

Provide your JSON or CSV data and the Skill analyzes whether it is categorical, temporal, quantitative, or hierarchical, then proposes a chart type and generates complete HTML/JavaScript with an SVG container, scales, axes, and tooltips.

How to create hierarchical visualizations like treemaps and sunbursts with D3 v7?▼

Hierarchical data is processed with d3-hierarchy, which the Skill consults via its references/layouts-complexos.md guide before generating code. It produces Sunburst, Treemap, Circle Packing, and Force-Directed layouts following v7 conventions.

Does D3 v7 code work offline without a CDN?▼

Yes, when the library is vendored locally. This Skill references a local assets/vendor/d3.v7.min.js file instead of a CDN and embeds data via window.RV_DATA or an inline JSON script tag, so pages open via file:// without CORS errors.

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

Use SVG for interactivity and smaller datasets, and switch to Canvas for massive datasets above 5000 points where DOM node counts degrade performance. The Skill applies this rule automatically when generating rendering code.

Why does my D3 chart fail to load local data files?▼

Browsers block fetch() calls to local files under file:// due to CORS restrictions. The Skill avoids this by loading data through window.RV_DATA injected by a data.js file or by embedding JSON directly in a script tag of type application/json.

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
astronomerastronomer
490

chart-tests

Write and run pytest-based Helm chart tests for the Astronomer Private Cloud repository.

Official
Advanced
rilldatarilldata
47

rill-canvas

Create custom canvas dashboards in Rill using declarative YAML.

Official
Intermediate