D3 Visualization
Install when you need the agent to generate D3.js charts and interactive editorial visualizations for dashboards, reports, or data-rich prototypes.
Overview
d3-visualization is an agent skill for the Build phase that teaches D3.js chart and interaction patterns for dashboards, reports, and data-rich prototypes.
Install
npx skills add https://github.com/nexu-io/open-design --skill d3-visualizationWhat is this skill?
- Comprehensive D3.js coverage: bar, line, map, force, sankey, treemap, sunburst, and choropleth patterns
- Includes scroll-driven and animation techniques for editorial and explanatory graphics
- Curated upstream from snow-d3 for prototype-mode Open Design discovery
- Trigger list spans d3 bar chart, d3 force graph, d3 sankey, and related long-tail chart intents
- Aimed at dashboards, reports, data-rich prototypes, and interactive explainers
- Trigger catalog lists 15+ D3 chart and technique intents including map, force graph, sankey, treemap, sunburst, chorople
Adoption & trust: 834 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need credible interactive charts in a prototype or product UI but your agent defaults to static placeholders or the wrong chart library.
Who is it for?
Indie builders shipping analytics panels, research reports, or marketing data pages who want agent-native D3 expertise.
Skip if: Teams that only need a single static screenshot chart with no interaction or no appetite to install the upstream snow-d3 asset bundle.
When should I use this skill?
User mentions d3, d3.js, interactive chart, data visualization, editorial chart, or specific d3 chart types (bar, line, map, force graph, sankey, treemap, sunburst, choropleth, animation, scroll) or snow-d3.
What do I get? / Deliverables
The agent can select appropriate D3 techniques, follow curated examples, and scaffold interactive visualizations aligned to your data story.
- D3 chart implementations or scaffolds for requested visualization types
- Interaction and animation patterns suited to dashboards or editorial layouts
Recommended Skills
Journey fit
Interactive chart implementation is core product UI work during Build, before you ship analytics views or public data stories. Frontend is the canonical shelf because the skill teaches D3 chart types, animations, and interaction patterns rather than backend ETL or SEO distribution.
How it compares
Skill package for agent procedural D3 knowledge, not a hosted chart SaaS or a generic UI component generator.
Common Questions / FAQ
Who is d3-visualization for?
Solo builders and designers working with agents on dashboards, editorial graphics, and interactive data stories in the browser.
When should I use d3-visualization?
During Validate when prototyping data-rich landing demos, and during Build when implementing frontend charts triggered by terms like d3.js, interactive chart, or d3 sankey.
Is d3-visualization safe to install?
The catalog entry is documentation-forward; full upstream install may add third-party scripts—review the Security Audits panel on this Prism page and inspect the snow-d3 repo before pulling assets.
SKILL.md
READMESKILL.md - D3 Visualization
# d3-visualization > Curated from @jiannanya. ## What it does Teaches the agent to produce D3 charts and interactive data visualizations. A comprehensive D3.js skill with examples across chart types and techniques giving the agent expert-level knowledge to generate complex, interactive visualizations. Useful for editorial dashboards, reports, data-rich prototypes, and explanatory graphics. ## Source - Upstream: https://github.com/jiannanya/snow-d3/ - Category: `diagrams` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and reference documents, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/jiannanya/snow-d3/ # Clone or copy the snow-d3/ folder into your workspace's skills/ directory git clone https://github.com/jiannanya/snow-d3.git skills/snow-d3 ``` Then ask the agent to invoke this skill by name (`d3-visualization`) or with one of the trigger phrases listed in this skill's frontmatter, e.g.: > "Create a zoomable treemap for my sales data" > "Build a force-directed network graph like example 07 but for my own dataset" > "Generate a calendar heatmap in D3"