D3js Visualization

This pulls together the D3.js patterns you actually need for building interactive charts. It covers the selection and data binding fundamentals, then gives you working implementations of bar charts, line charts, and pie charts with proper margins and scales. The interactivity section is solid, showing how to add tooltips with proper positioning, smooth transitions, and zoom controls. What I like here is that it doesn't oversell D3's complexity. You get the core concepts like scaleLinear and scaleBand explained clearly, plus the join pattern for clean updates. The accessibility notes are brief but on point. Good reference when you need to spin up a visualization quickly without digging through the full D3 documentation.

skills.sh installs: 189
GitHub stars: 9
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bbeierle12/skill-mcp-claude --skill d3js-visualization --agent claude-code

Installs into .claude/skills of the current project.

Files

D3.js Visualization

Core Concepts

Selection and Data Binding

// Select elements
const svg = d3.select('#chart')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

// Bind data to elements
svg.selectAll('rect')
  .data(data)
  .join('rect')
  .attr('x', (d, i) => i * barWidth)
  .attr('y', d => height - scale(d.value))
  .attr('width', barWidth - 1)
  .attr('height', d => scale(d.value));

Scales

// Linear scale (continuous → continuous)
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([0, width]);

// Band scale (discrete → continuous)
const xScale = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([0, width])
  .padding(0.1);

// Time scale
const xScale = d3.scaleTime()
  .domain([startDate, endDate])
  .range([0, width]);

// Color scale
const colorScale = d3.scaleOrdinal(d3.schemeCategory10);

Axes

// Create axes
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

// Append to SVG
svg.append('g')
  .attr('class', 'x-axis')
  .attr('transform', `translate(0, ${height})`)
  .call(xAxis);

SKILL.md on GitHub