skills.rest
tjsasakifln
tjsasakiflnCOMMUNITY
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 visualizations.

1|Updated Jul 10, 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/tjsasakifln/extra-cli --skill reversa-especialista-d3-tjsasakifln
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-especialista-d3
Source: https://github.com/tjsasakifln/extra-cli/tree/main/.agents/skills/reversa-especialista-d3
Command: npx skills add https://github.com/tjsasakifln/extra-cli --skill reversa-especialista-d3-tjsasakifln

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing correct, modern D3.js v7 code for complex visualizations like force-directed graphs, treemaps, and sankey diagrams is error-prone and time-consuming, especially when the output must run offline from a local file without CDN or CORS issues. ## 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). - Standalone HTML Generation: Produces complete HTML/JavaScript pages 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 problems. - Data Injection Patterns: Loads data from window.RV_DATA via a Publisher-generated data.js, or embeds JSON directly in a script tag for standalone mode, avoiding fetch() on local files. - Use Case: Ask for a force-directed dependency graph of your project's modules and receive a single HTML file you can open directly in a browser. ## Quick Start Generate a standalone D3.js force-directed graph HTML page visualizing the module dependencies in this JSON 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 positioning nodes and links, then render them with SVG selections using the join pattern. This Skill generates the complete standalone HTML including scales, tooltips, and drag behavior.

How to make a D3.js treemap or sunburst from hierarchical data?▼

Use d3-hierarchy to transform nested JSON into a layout-ready structure, then apply treemap or partition generators. The Skill consults its layouts-complexos reference to ensure v7-compliant hierarchical chart code.

Why does my D3 chart fail when opening the HTML file locally?▼

Local files fail when using CDN scripts blocked offline or fetch() on local JSON due to CORS restrictions. The generated pages use a vendored d3.v7.min.js and embed data via window.RV_DATA or an inline JSON script tag.

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

Use SVG for interactivity and moderate datasets, and switch to Canvas when rendering more than 5000 points where DOM node counts degrade performance. The Skill prioritizes SVG and falls back to Canvas for massive datasets.

Does this D3 skill work with Claude Code, Cursor, or Gemini CLI?▼

Yes, the Skill declares compatibility with Claude Code, Codex, Cursor, Gemini CLI, and other agents supporting the Agent Skills format. It is a prompt-and-reference based Skill with no platform-specific code.

Related Skills

Explore More Design & Creative Skills→
brainbrewlabsbrainbrewlabs
7

data-collection

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

Official
Intermediate
afsjrafsjr

reversa-docs-publisher

Build a self-contained offline mini-site index from multi-agent HTML pages.

Community
Advanced
qytay-paloqytay-palo

data-visualization

Guide chart selection and provide Python code patterns for data visualizations.

Community
Intermediate
openaiopenai
5.3k

grammar-of-graphics-and-declarative-visualization

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

Official
Intermediate