Skip to main content
affpapa.org
RU EN
skill

claude-d3js-skill — Claude Code skill: custom charts with d3.js

Tells the agent how to build non-standard d3.js visualisations: network graphs, geographic maps, choreographed transitions. Useful when off-the-shelf charting libraries fall short.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill creative-design/claude-d3js-skill
Open on GitHub

What claude-d3js-skill does

The skill lays out a d3.js workflow: import via import * as d3 from 'd3' or the 7.x CDN build, a choice between direct DOM manipulation and declarative rendering, and a drawing function structured around dimensions, scales, axes and data joins. Responsive sizing gets its own section, with ResizeObserver and a resize handler that returns a cleanup function.

Ready-made patterns cover a bar chart plus force-directed layouts, trees, hierarchies and custom map projections. All of it works in any JavaScript environment — React, Vue, Svelte, plain JS. For 3D the skill points you at Three.js instead, since d3.js won't help there.

The skill file cuts off partway through the bar chart example, so past that point you're leaning on your own d3 knowledge. Install with npx claude-code-templates@latest --skill creative-design/claude-d3js-skill.

What it helps with

  • build a force-directed graph of entity relationships
  • draw a map with a custom projection
  • add smooth transitions between chart states
  • create a chart type no standard library offers
  • redraw a chart when its container resizes

Example prompts for the agent

  • Build an interactive force-directed graph of user connections with d3.js
  • Draw a map with a custom projection and zoom using d3.js
  • Rewrite this chart in d3.js so it animates smoothly when the data updates

How to install claude-d3js-skill

1claude-code-templates

npx claude-code-templates@latest --skill creative-design/claude-d3js-skill

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill claude-d3js-skill -a claude-code

3Manually: put the files in place

~/.claude/skills/claude-d3js-skill/SKILL.md

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

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about claude-d3js-skill

How do I install claude-d3js-skill in Claude?

Run npx claude-code-templates@latest --skill creative-design/claude-d3js-skill. The skill lands at ~/.claude/skills/claude-d3js-skill/SKILL.md.

What does claude-d3js-skill do?

It gives the agent instructions for building custom d3.js visualisations: network graphs, trees, geographic maps, and charts with transitions and interaction.

Which frameworks does the skill support?

Any JavaScript environment: React, Vue, Svelte or plain JS. For 3D visualisations the skill recommends Three.js over d3.js.

Similar skills

Everything for Frontend and UI →
animejs freshtechbro A skill that feeds your coding agent Anime.js syntax: timelines, stagger, SVG morphing and keyframe sequences. CX Codex +1 2,800installs whiteboard-animation iart-ai Guides agents in generating VideoScribe-style whiteboard explainers with animated SVG strokes and a marker hand following the pen tip. CX Codex +1 1,400installs gsap Mindrally Tells your agent how to write GSAP animations: transforms over left/top, stagger, timelines, ScrollTrigger. Useful when the UI stutters on weaker hardware. CX Codex +1 769installs scrollytelling-and-parallax-data-visualization official OpenAI Guides the design and implementation of scrollytelling and parallax data visualizations. Use it when scroll progression explains data through staged scene reveals. CX Codex GP ChatGPT 13installs build-dashboard official anthropics Builds a self-contained HTML dashboard with Chart.js charts, KPI cards, and filterable tables. Useful for turning raw data or queries into a standalone browser report. CX Codex +1 9,100installs kpi-dashboard-design secondsky A skill that guides the agent through KPI dashboard design: metric choice, layout, chart types and status colors. Useful when you build analytics views for leadership. CX Codex +1 507installs

From the same set224

The whole set →
nextjs-bundle-analyzer A Claude slash command that breaks down your Next.js bundle size and points at what to trim. 560installs frontend-dev-guidelines A skill that gives the agent one set of rules for React and TypeScript work: Suspense, lazy loading, features layout, MUI v7 and TanStack. 556installs text-comparison-validator A subagent that checks extracted text against an existing markdown file, line by line. It flags missing words, typos, formatting drift and paragraph structure problems, then reports them with line numbers. 545installs optimize-bundle-size Inspects and trims JavaScript bundle sizes using code splitting, tree shaking, and build tool tuning. Useful when production assets slow down page loads. 535installs ocr-grammar-fixer A Claude subagent that fixes OCR output: character recognition errors, broken spacing, punctuation and grammar, with the original meaning kept intact. 522installs implement-caching-strategy A Claude slash command that reads your architecture and lays out caching layers: browser, application, database, API. 520installs setup-linting Sets up linters and quality checks in your project: ESLint, Flake8, Pylint, MyPy, Clippy. Useful when style rules need to be enforced automatically. 510installs twitter-ai-influencer-manager A subagent that posts, searches and analyses AI tweets. It keeps a list of key researcher handles and helps you engage with them. 510installs

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