D3.js Data Visualization

D3.js Data Visualization

Create interactive data visualizations, charts, and dashboards using D3.js.

Claude / Claude Code
GitHub Copilot
Cursor
VS Code
OpenAI Codex
Data AnalysisDeveloperData AnalystDesigner

What it does

Claude's D3 knowledge is frozen at an inconsistent point across versions — it mixes D3 v4 and v7 syntax, uses `d3.event` which was removed in v6, generates selections that don't account for D3's update pattern, and produces charts that work in isolation but break when data changes. This skill loads D3 v7 patterns: correct selection and join syntax, proper enter/update/exit, scales configured for real data variance, and interactive features (zoom, brush, tooltip) implemented correctly.

Use case

Creating interactive data visualisations with D3.js — charts that update with data, respond to user interaction, and need to work correctly across data changes. Made by chrisvoncsefalvay, a data visualisation practitioner.

The Prompt

Copy and use immediately
"Build an interactive force-directed graph for this network data."
"Create a zoomable treemap from this hierarchical dataset."
"Build a time series line chart with a brush for zooming into date ranges."
"Make a choropleth map of this regional data with a correct colour scale."
"Create a scatter plot with a regression line and interactive tooltips."

How to use

  1. 1

    Provide your data structure. Claude picks the chart type and scale configuration that suit the data.

  2. 2

    Specify interactivity requirements explicitly: zoom, brush, tooltips, linked views.

  3. 3

    For React integration: Claude wraps D3 correctly using useEffect and refs — no conflicting DOM management.

Input / Output

Input

A dataset (JSON, CSV, or description of the data structure) and the visualisation you want to produce.

Output

D3 v7 visualisation code with correct selection patterns, proper enter/update/exit handling, scales configured for the data range, and interactivity implemented without version conflicts.

Added 15 Mar 2026Submitted by chrisvoncsefalvay👁 50📋 0

Details

Platforms
Claude / Claude CodeGitHub CopilotCursorVS CodeOpenAI Codex
Category
Data Analysis
License
apache-2.0

Stats

📋 Copies0
👁 Views50
👍 Upvotes0

Install with skills.sh

npx skillsadd chrisvoncsefalvay/skills/d3js-visualization

Requires skills.sh CLI

Community Notes

Sign in with GitHub to leave a note.

No notes yet. Be the first to contribute.