analytics

d3

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
113,753 stars22,632 forksShellInstall verified Oct 12Updated 5/28/2026100% free · open source
What it does

d3 lets you create interactive, data‑driven visualizations in the browser using SVG, Canvas, or HTML.

When to use it
  • •You need a custom chart (e.g., animated bar chart, map, or network) that isn’t covered by out‑of‑the‑box BI tools.
  • •Your product UI must visualize live or user‑generated data with fine‑grained control over layout and interactivity.
  • •You want to embed a responsive data graphic directly into a web app without heavy charting libraries.
Ready-to-paste prompt
node -e "import('d3').then(d3=>{ console.log('d3 version', d3.version); })"
Heads up: d3 is an ES‑module; you must serve your files over HTTP (e.g., with `npx http-server`) or use a bundler, otherwise the browser will block the import with a CORS/“Unexpected token” error.
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

⚡ Runs out of the box✓ Install verified 10/12/2026

A prompt/skill package — nothing to install beyond adding it to your AI tool.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/d3 && curl -fsSL https://workflowstacks.com/api/skills/d3/claude-skill -o ~/.claude/skills/d3/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How d3 works
Codeflow
Free to inspect

D3 is mostly documents (119 doc files, 35 small scripts) — something you read, not something you run. There is nothing to install. Last commit 3 months ago, ISC license.

Size
Mostly documents
119 documents · 35 small scripts · ~4 h to skim
Setup
Nothing to install
A guide / curated list. Just read it and follow the links.
Runs on
Nowhere — you read it
A reading resource, not a program.
Shell 92%JavaScript 8%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    src/index.js
    Inside src/ — the main logic begins here
What's in each folder
src/Core code — the actual logic1 files
docs/Documentation152 files
img/Images & static assets5 files
.github/CI / automation (GitHub Actions)3 files
test/Tests — proof it works3 files
READMEHas testsDocumentedCI checksISC licenseUpdated 3 mo ago
Quick Actions
Details
Creator
d3
Language
Shell
Category
analytics
Published
9/27/2010

Are you the creator of this tool? and earn 85% of every sale.

Show it off in your README:

Featured on WorkflowStacks
[![Featured on WorkflowStacks](https://workflowstacks.com/api/badge/d3.svg)](https://workflowstacks.com/skills/d3?utm_source=github&utm_medium=badge)
🔥 Hot this week, in your inbox
Skills like this, every Monday.

The five fastest-growing open-source AI skills, ranked by GitHub star growth. One email a week, unsubscribe anytime.

Ready-to-run pack · one-time $29

Competitor Watch

Get emailed the moment a rival changes their price or pitch.

Includes the tested workflow and a written setup playbook. Needs: No extra API — just watches the pages you list.

See what you get