skills.rest
Ruggery
RuggeryCOMMUNITY
Explore all skills by this author →
GitHub

reversa-especialista-d3

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing D3.js visualizations from scratch requires deep knowledge of scales, selections, layouts, and the v7 API surface. This Skill acts as a senior data visualization engineer that analyzes your data structure and produces complete, responsive D3.js charts as standalone HTML files that open directly in a browser. ## Core Features & Use Cases - Data-driven chart selection: Analyzes whether data is categorical, temporal, quantitative, or hierarchical to propose the right visualization (bar, scatter, force-directed, sunburst, treemap, sankey). - D3 v7 compliant code: Consults bundled references on core APIs, interactivity (zoom, drag, transitions), and complex layouts before generating code, ensuring conformance with D3 v7 patterns like the join cycle and reusable chart modules. - Offline-capable output: Uses a locally vendored d3.v7.min.js instead of CDN links and embeds data via window.RV_DATA or an inline JSON script tag, so pages work over file:// without CORS issues. - Use Case: Provide a JSON dataset of organizational hierarchy and receive a complete HTML page with an interactive, zoomable tree or sunburst chart with accessible color scales and tooltips. ## 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 create a D3.js chart from JSON data?▼

Provide your JSON or CSV dataset and the Skill analyzes whether it is categorical, temporal, quantitative, or hierarchical, then proposes a chart type and generates a complete HTML page with the SVG container, scales, and axes included.

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

The Skill consults its bundled reference on d3-hierarchy before generating hierarchical layouts. It produces treemaps, sunbursts, circle packing, and force-directed graphs using the d3-hierarchy and d3-force modules.

Does D3 v7 code work offline without a CDN?▼

Yes, when the library is vendored locally. This Skill references a local d3.v7.min.js asset instead of a CDN and embeds data inline, so the generated page opens via the file protocol without CORS or network issues.

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 roughly 5000 points where DOM node counts degrade performance. The Skill applies this rule when choosing the rendering target.

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

Browsers block fetch() calls to local files under the file protocol due to CORS restrictions. The Skill avoids this by embedding data in a JSON script tag or a window.RV_DATA object loaded by a generated data.js file.

Related Skills

Explore More Data & Analytics Skills→
jesseotremblayjesseotremblay
1

processing-data

Transform, clean, and extract structured information from CSV and JSON data.

Community
Basic
salaboysalaboy
1

generate-otel-report

Convert OpenTelemetry maturity evaluations into self-contained HTML reports with Chart.js radar charts.

Community
Advanced
TimeKastTimeKast

kb-dataviz

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

Official
Intermediate
markdown-viewermarkdown-viewer
3.1k

vega

Generate Vega and Vega-Lite visualizations from structured JSON or tabular data.

Official
Intermediate