mcpField
C
claude-d3js-skill

claude-d3js-skill

github.com/sickn33Data & databases48.7k456 installsUpdated today
Repository

About claude-d3js-skill

A skill that guides the use of D3.js for custom, interactive and publication-quality visualisations. It helps developers choose D3.js for complex layouts and behaviours, while noting 3D work as a case for Three.js.

Key features

  1. 01Custom visual encodings and layouts
  2. 02Interactive pan, zoom and brush
  3. 03Network and hierarchy diagrams
  4. 04Custom geographic projections
  5. 05Animated transitions and styling

Use cases

  1. 01Building force-directed network visualisations
  2. 02Creating geographic charts with custom projections
  3. 03Producing bespoke charts for publication

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill claude-d3js-skill

After installing, type/claude-d3js-skillin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

assets/
chart-template.jsx
interactive-template.jsx
sample-data.json
references/
colour-schemes.md
d3-patterns.md
detailed-guide.md
scale-reference.md

Details

From the project README

D3.js Visualisation

Detailed Guide

Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

When to use d3.js

Use d3.js for:

  • Custom visualisations requiring unique visual encodings or layouts
  • Interactive explorations with complex pan, zoom, or brush behaviours
  • Network/graph visualisations (force-directed layouts, tree diagrams, hierarchies, chord diagrams)
  • Geographic visualisations with custom projections
  • Visualisations requiring smooth, choreographed transitions
  • Publication-quality graphics with fine-grained styling control
  • Novel chart types not available in standard libraries

Consider alternatives for:

  • 3D visualisations - use Three.js instead

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Comments

Markdown supported