d3-visualization
Teaches your agent to create interactive charts and data visualizations. It's useful for presenting complex information clearly.
What it does
This tool teaches the AI to create interactive charts and data visualizations using the D3.js library. It enables the generation of complex, interactive graphics for reports and presentations.
When to use it
- ✓Create an interactive bar chart to present sales data.
- ✓Develop a heatmap to visualize website access data.
- ✓Generate a network graph to show connections between different elements.
Example of what to ask your AI
“Create an interactive bar chart for my sales data.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The AI uses examples and techniques from the D3.js library to build visualizations. It learns to create different chart types and make them interactive.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill d3-visualizationOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/d3-visualization/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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 OpenDesign 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:
# 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"
FAQ
What is D3.js?
D3.js is a JavaScript library that helps create dynamic and interactive data visualizations for the web.
What types of charts can I create?
You can create a variety of charts, such as bar charts, heatmaps, network graphs, and more.
Do I need to know how to code to use it?
No, you can ask the AI to create the visualizations for you by describing what you want.
Details
Original description by the author
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.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #677
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
data-throughput-accelerator
Makes your agent speed up the movement of large data volumes. It finds bottlenecks and ensures data is transferred quickly and correctly.
affaan-m/ECC
inventory-demand-planning
Helps your agent predict product demand in stores. It optimizes stock and plans when to run promotions to sell more.
affaan-m/ECC
market-research
Helps your agent conduct market research and competitive analysis. Provides summaries with source attribution.
affaan-m/ECC