mcpField
D
d3js-skill

d3js-skill

github.com/podoData & databases29169 installsUpdated 1d ago
Repository

About d3js-skill

d3js-skill helps developers create D3.js data visualizations. It covers data binding, scales, axes, transitions, and interactivity, producing structured SVG based on dataset transformations.

Key features

  1. 01Generate varied D3.js charts
  2. 02Handle data binding and transformations
  3. 03Configure scales and axes
  4. 04Add transitions and interactivity
  5. 05Produce structured SVG

Use cases

  1. 01Build bar, line, and scatter charts
  2. 02Create heatmaps or custom chart types

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill d3js-skill

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

Bundled filesstub.yaml

Details

From the project README

d3js-skill

Catalogue stub — full skill: chrisvoncsefalvay/claude-d3js-skill

Decision tree

  1. Is the full skill already installed? Check whether the skill at this location still has a das: block:

    • Global: grep -q "^das:" ~/.agents/skills/d3js-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • Project: grep -q "^das:" .agents/skills/d3js-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • No das: block → full skill installed, invoke it and proceed
    • das: block present → go to step 2

  2. Detect scope, then install:

    To detect scope:

    [ -e ~/.agents/skills/d3js-skill ] && echo "global" || echo "project"

    Global (installed with -g):

    npx skills add chrisvoncsefalvay/claude-d3js-skill --skill d3js-skill -g -y

    Project (installed without -g):

    npx skills add chrisvoncsefalvay/claude-d3js-skill --skill d3js-skill -y

    Claude Code: send either command as a chat message starting with ! to run it without leaving the conversation.

Invoke after install

  • Skill name: d3js-skill
  • Trigger phrases: "D3.js", "D3 chart", "D3 visualization", "data visualization D3"

What it does

Generates sophisticated D3.js data visualizations with correct data binding patterns, scales, axes, transitions, and interactivity. Handles bar charts, line graphs, scatter plots, heatmaps, and custom chart types. Produces properly structured SVG with real dataset transformations, not just static examples.

Comments

Markdown supported