←Leaderboard/Data/claude-d3js-skill
Last commit on October 18, 2025·Created on October 17, 2025

chrisvoncsefalvay/claude-d3js-skill

“Gives each dataset a shape you can zoom into.”
Combined rank
#674
across all skills
In Data
#8
category rank
Stars
232
+1.3% in last 7d
Forks
22
0.0% in last 7d
Watchers
1
0.0% in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
Open on GitHub
TL;DR

This skill provides guidance for building custom interactive visualizations using D3.js, covering bar charts, line charts, scatter plots, chord diagrams, heatmaps, pie charts, and force-directed networks along with tooltips, zoom, pan, transitions, and responsive sizing.

It helps data visualization engineers, data journalists, and frontend dashboard engineers create bespoke charts beyond standard library capabilities, with precise control over every visual element and framework integration patterns for React, Vue, Svelte, and vanilla JavaScript.

WHO IT'S FOR
Data journalists / visual storytellers
creating interactive data-driven graphics for news articles
Front-end web developers
building custom data dashboards with d3.js
Data scientists / analysts
producing publication-quality data visualizations
UX/UI designers
prototyping interactive chart interactions and animations
Repository contents

1 skill file

Categories
DataPrimary
DesignSoftware Engineering
Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.
Claude

Use this skill

Follow the documented setup, then try a first task.

See the repository for installation instructions.

Open repository instructions ↗

Give it something to do.

Suggested first task

Create a small interactive D3 visualization

Uses d3-viz

  • [DATA_SOURCE_PATH]: path to the data file or module to visualize
  • [JAVASCRIPT_ENVIRONMENT]: the existing environment, such as vanilla JavaScript, React, Vue, or Svelte
  • A project with d3.js already available, or a choice between the documented module import and CDN setup

Check the repository for this skill’s setup.

Use the d3-viz skill to create a small custom SVG data visualization from [DATA_SOURCE_PATH] in my existing [JAVASCRIPT_ENVIRONMENT]. Include one useful interaction, such as pan, zoom, or brushing, and keep the first version focused and easy to review. Use the project's existing d3.js setup; if d3.js is not configured, explain whether to use the documented module import or CDN script before writing the visualization.
SKILL.md ↗ · Checked Sep 18, 2026
Also in this category
Data

limingrui679-design/high-stakes-analytics-decision-lab

Builds source-backed analytical reports and reproducible studies to evaluate actions under uncertainty and tail risk.

781
Data

microsoft/skills-for-fabric

A CLI skill for creating, inspecting, and decoding Fabric Activator alerts, rules, and notification actions.

1.2k
Data

dbt-labs/dbt-agent-skills

A suite of tools for visualizing dbt model lineage and migrating projects across different data warehouse platforms.

719
Data

data-goblin/power-bi-agentic-development

Provides technical guidance and specification authoring for Deneb, Vega, and Vega-Lite custom visuals in Power BI.

919
← Back to the leaderboardOwn this skill repo?Add rank badge →Skill Leaderboard © 2026