claude-d3js-skill

🥈Silver

Create interactive data visualizations with d3.js. Build custom charts, network diagrams, geographic maps, and complex SVG graphics with fine-grained control over visual elements and interactions.

15570Updated 4mo ago

Intermediate30min to implementautomation

Saves ~30 min per use

Quick InstallView Source

git clone https://github.com/chrisvoncsefalvay/claude-d3js-skill.git

Works with:

Claude

Overview

About This Skill

This skill provides guidance for creating sophisticated, interactive data visualizations using d3.js across any JavaScript environment—vanilla, React, Vue, Svelte, and others. D3.js excels at binding data to DOM elements and applying data-driven transformations to create publication-quality visualizations with precise control over every visual element. Use this skill for custom chart types, network and geographic visualizations, complex interactions like pan and zoom, and smooth transitions that standard charting libraries cannot provide. The skill covers core workflows including setup, integration patterns, responsive sizing, and common visualization patterns like bar charts.

How to Use

Import d3 via npm or CDN, then use the skill's two main integration patterns: Pattern A for direct DOM manipulation with transitions and interactions, or Pattern B for declarative rendering within framework templates. Follow the standard visualization structure covering dimensions, scales, axes, data binding, and responsive sizing with ResizeObserver or window resize listeners.

Use Cases

Building custom chart types and novel data visualizations

Creating interactive network diagrams and force-directed graph layouts

Developing geographic visualizations with custom projections

Implementing complex pan, zoom, and brush interactions

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/chrisvoncsefalvay/claude-d3js-skill

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

I need help creating a d3.js visualization for [COMPANY] in the [INDUSTRY] sector. I have [DATA] that I want to visualize. Can you generate the complete HTML, CSS, and JavaScript code for a [TYPE OF VISUALIZATION] that effectively represents this data?

Example Output

# D3.js Visualization for TechCorp in the Software Industry

## HTML Code
```html
<!DOCTYPE html>
<html>
<head>
  <title>TechCorp Revenue Trends</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    .bar {
      fill: steelblue;
    }
    .bar:hover {
      fill: orange;
    }
    .axis text {
      font-size: 12px;
    }
  </style>
</head>
<body>
  <svg width="800" height="500"></svg>
  <script src="script.js"></script>
</body>
</html>
```

## JavaScript Code
```javascript
// Load the data
const data = [
  { year: 2018, revenue: 1200000 }, 
  { year: 2019, revenue: 1500000 }, 
  { year: 2020, revenue: 1800000 }, 
  { year: 2021, revenue: 2200000 }, 
  { year: 2022, revenue: 2700000 }
];

// Set up the SVG
const svg = d3.select("svg");
const margin = { top: 20, right: 30, bottom: 40, left: 50 };
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;

// Create scales
const x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
x.domain(data.map(d => d.year));

const y = d3.scaleLinear().rangeRound([height, 0]);
y.domain([0, d3.max(data, d => d.revenue)]);

// Draw the chart
svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`)
  .selectAll(".bar")
  .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("x", d => x(d.year))
    .attr("y", d => y(d.revenue))
    .attr("width", x.bandwidth())
    .attr("height", d => height - y(d.revenue))
    .on("mouseover", function(event, d) {
      d3.select(this).attr("fill", "orange");
      svg.append("text").attr("class", "tooltip")
        .attr("x", x(d.year) + x.bandwidth() / 2)
        .attr("y", y(d.revenue) - 5)
        .text(`Revenue: $${d.revenue}`);
    })
    .on("mouseout", function() {
      d3.select(this).attr("fill", "steelblue");
      svg.select(".tooltip").remove();
    });

// Add axes
svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`)
  .call(d3.axisBottom(x));

svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`)
  .call(d3.axisLeft(y).ticks(5, "s"));

// Add labels
svg.append("text").attr("transform", `translate(${margin.left + width / 2},${margin.top + height + 30})`)
  .style("text-anchor", "middle").text("Year");

svg.append("text").attr("transform", "rotate(-90)")
  .attr("y", 15).attr("x", -(height / 2) - 30)
  .style("text-anchor", "middle").text("Revenue (USD)");

svg.append("text").attr("transform", `translate(${margin.left + width / 2},${margin.top - 10})`)
  .style("text-anchor", "middle").text("TechCorp Annual Revenue").style("font-size", "16px");
```