Skip to content
Skillpedia
Analysis & spreadsheets101k · #677

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

https://github.com/nexu-io/open-design/blob/main/skills/d3-visualization/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/skills/d3-visualization/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
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-visualization

Or download just the file:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/d3-visualization/SKILL.md -o SKILL.md
Technical 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

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

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills