Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

d3-visualization — Claude Code skill: interactive charts and diagrams

This skill teaches the agent to create interactive D3.js visualizations. Use it to generate charts for dashboards, reports, and data-rich prototypes.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill d3-visualization -a claude-code
Open on GitHub

What d3-visualization does

d3-visualization is a curated set of D3.js examples and techniques that the agent draws on when generating graphics. It includes bar, line, and other standard charts, plus advanced patterns: treemaps, force-directed graphs, Sankey diagrams, sunbursts, choropleths, and animated transitions. When you ask the agent for a chart or graph, the skill supplies templates and best practices.

The skill activates through triggers: phrases like "interactive graph", "d3 heatmap", or specific chart types. Once triggered, the agent recalls examples and applies them to your data. It runs on Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode.

You need Node.js and npm to work with generated code. Start by reading the README in the snow-d3 repository—that's where the skill's source examples and reference materials live.

What it helps with

  • create a zoomable treemap for large datasets
  • build a force-directed graph to visualize connections
  • generate a calendar heatmap or choropleth map
  • add animation and zoom interactions to charts
  • produce charts for dashboards and reports

Example prompts for the agent

  • 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

How to install d3-visualization

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill d3-visualization -a claude-code

2Manually: put the files in place

~/.claude/skills/d3-visualization/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/d3-visualization/

From the same set39

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-review nexu-io Audits UI visually, fixes flaws with atomic commits, and captures before/after screenshots. Useful for tightening shipped interface code right before launch. Claude Code CX Codex Cursor +1 3,100installs

Similar

cmux-localization manaflow-ai A skill for managing translations of user-facing strings in your interface. Runs an audit whenever you change button text, menus, tooltips, or error messages. Claude Code CX Codex Cursor +1 4,700installs cmux-debugging manaflow-ai Skill for adding debug logging, diagnosing UI and runtime issues in cmux. Use when working with terminal rendering, tab lists, drag-and-drop, or testing across macOS versions. Claude Code CX Codex Cursor +1 4,700installs argent-react-native-optimization software-mansion Profiles React Native apps to pinpoint runtime bottlenecks and fixes mechanical code issues. It steps in when user screens stutter, startup lags, or re-renders spike. Claude Code CX Codex Cursor +1 26,400installs flutter-expert https://github.com/Jeffallan Skill for building cross-platform apps with Flutter 3+ and Dart. Covers widgets, state management via Riverpod or Bloc, GoRouter navigation, and performance optimization. Claude Code CX Codex Cursor +1 14,300installs ui-skills-root ibelick A UI task router that picks the right skill before interface work. Run npx ui-skills start to launch it and let the agent select just enough context to solve the problem. Claude Code CX Codex Cursor +1 7,100installs vue-pinia-best-practices github.com/vuejs-ai A skill covering Pinia best practices: avoid common store setup errors, preserve reactivity, and organize state management patterns in Vue projects. Claude Code CX Codex Cursor +1 16,800installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about d3-visualization

How do I install d3-visualization for Claude Code?

Run npx skills add nexu-io/open-design --skill d3-visualization -a claude-code, then check the config file at ~/.claude/skills/d3-visualization/SKILL.md.

What does d3-visualization do?

It teaches the agent to generate interactive D3.js charts and diagrams: from basic bar and line charts to advanced patterns like treemaps, force graphs, and choropleths with animation.

Which platforms support d3-visualization?

Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. Each platform has its own install command.

Source text

SKILL.md · Apache-2.0 
---
name: d3-visualization
description: |
  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.
triggers:
  - "d3"
  - "d3.js"
  - "interactive chart"
  - "data visualization"
  - "editorial chart"
  - "d3 bar chart"
  - "d3 line chart"
  - "d3 map"
  - "d3 force graph"
  - "d3 sankey"
  - "d3 treemap"
  - "d3 sunburst"
  - "d3 choropleth"
  - "d3 animation"
  - "d3 scroll"
  - "snow-d3"
od:
  mode: prototype
  category: diagrams
  upstream: "https://github.com/jiannanya/snow-d3/"
---

# 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:

```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"

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor