Hands-OnAI
← All skills
Image & videoNewFreeWorks in Claude Code · Claude app · Codex

D3 Data Visualization

Turn a plain description of your data into interactive D3.js charts.

D3 Data Visualization creates interactive charts and graphs from a natural-language description — pie, bar, line, heatmaps, network diagrams, and geographic maps. Describe your data and the visualization you want, and it produces ready-to-use D3.js code.

What it does

  • Creates interactive charts from a plain-language description.
  • Handles pie, bar, line, heatmaps, network, and geographic visualizations.
  • Outputs ready-to-use D3.js code for fine-grained control.

Works with

  • Pie
  • Bar
  • Line
  • Heatmap
  • Network
  • Maps

How to install (2 minutes)

Same download for Claude Code, Claude app, Codex — follow the step for the tool you use.

  1. 1Download the .zip and unzip it — you’ll get a folder called d3js-data-visualization.
  2. 2In the Claude app: open Settings → Capabilities → Skills, choose Add / Upload, and select the folder (or the .zip).
  3. 3In Claude Code: drop the folder into your project’s .claude/skills/ directory, then type /skills to confirm it loaded.
  4. 4In Codex: drop the folder into ~/.agents/skills/ (or your project’s .agents/skills/), then type /skills — or call it directly with $d3js-data-visualization.
  5. 5That’s it — the skill activates on its own when it fits what you’re doing.

Want to get the most out of your new skill?

Inside Hands-On AI Club we show you exactly how to use skills like this in real work — with step-by-step courses and a community to help you.