D3.js Implementation with Claude Code

Streamlining D3.js Data Visualization With Claude Code

D3.js (Data-Driven Documents) is a powerful visualization library that manipulates the DOM based on data. Its flexibility is its main appeal, but it’s also known for a steep learning curve. With Claude Code, you can efficiently work with D3.js’s complex APIs.

Creating a Responsive Bar Chart

> Create a responsive bar chart with D3.js.
> Include tooltips and animations.

import * as d3 from 'd3';

interface DataItem {
  label: string;
  value: number;
}

function createBarChart(
  container: string,
  data: DataItem[]
) {
  const margin = { top: 20, right: 20, bottom: 40, left: 50 };
  const width = 600 - margin.left - margin.right;
  const height = 400 - margin.top - margin.bottom;

  const svg = d3.select(container)
    .append('svg')
    .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`)
    .append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

  // Scales
  const x = d3.scaleBand()
    .domain(data.map(d => d.label))
    .range([0, width])
    .padding(0.2);

  const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)!])
    .nice()
    .range([height, 0]);

  // Axes
  svg.append('g')
    .attr('transform', `translate(0,${height})`)
    .call(d3.axisBottom(x));

  svg.append('g')
    .call(d3.axisLeft(y));

  // Tooltip
  const tooltip = d3.select(container)
    .append('div')
    .attr('class', 'tooltip')
    .style('opacity', 0)
    .style('position', 'absolute')
    .style('background', '#333')
    .style('color', '#fff')
    .style('padding', '8px')
    .style('border-radius', '4px');

  // Bars (with animation)
  svg.selectAll('.bar')
    .data(data)
    .join('rect')
    .attr('class', 'bar')
    .attr('x', d => x(d.label)!)
    .attr('width', x.bandwidth())
    .attr('y', height)
    .attr('height', 0)
    .attr('fill', '#6366f1')
    .on('mouseover', (event, d) => {
      tooltip.transition().duration(200).style('opacity', 0.9);
      tooltip.html(`${d.label}: ${d.value}`)
        .style('left', `${event.pageX + 10}px`)
        .style('top', `${event.pageY - 28}px`);
    })
    .on('mouseout', () => {
      tooltip.transition().duration(300).style('opacity', 0);
    })
    .transition()
    .duration(800)
    .delay((_, i) => i * 100)
    .attr('y', d => y(d.value))
    .attr('height', d => height - y(d.value));
}

Line and Area Charts

> Create a line chart for time-series data.
> Also allow range selection using a brush.

function createLineChart(
  container: string,
  data: { date: Date; value: number }[]
) {
  const margin = { top: 20, right: 20, bottom: 80, left: 50 };
  const width = 800 - margin.left - margin.right;
  const height = 400 - margin.top - margin.bottom;
  const brushHeight = 40;

  const svg = d3.select(container)
    .append('svg')
    .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`);

  const g = svg.append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

  const x = d3.scaleTime()
    .domain(d3.extent(data, d => d.date) as [Date, Date])
    .range([0, width]);

  const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)!])
    .nice()
    .range([height - brushHeight - 10, 0]);

  // Line
  const line = d3.line<{ date: Date; value: number }>()
    .x(d => x(d.date))
    .y(d => y(d.value))
    .curve(d3.curveMonotoneX);

  // Area
  const area = d3.area<{ date: Date; value: number }>()
    .x(d => x(d.date))
    .y0(height - brushHeight - 10)
    .y1(d => y(d.value))
    .curve(d3.curveMonotoneX);

  g.append('path')
    .datum(data)
    .attr('fill', 'rgba(99, 102, 241, 0.1)')
    .attr('d', area);

  g.append('path')
    .datum(data)
    .attr('fill', 'none')
    .attr('stroke', '#6366f1')
    .attr('stroke-width', 2)
    .attr('d', line);

  g.append('g')
    .attr('transform', `translate(0,${height - brushHeight - 10})`)
    .call(d3.axisBottom(x));

  g.append('g').call(d3.axisLeft(y));
}

React Integration

> Implement the D3.js chart as a React component.
> Use useRef and useEffect to integrate it safely.

import { useRef, useEffect } from 'react';
import * as d3 from 'd3';

interface ChartProps {
  data: { label: string; value: number }[];
  width?: number;
  height?: number;
}

export function BarChart({ data, width = 600, height = 400 }: ChartProps) {
  const svgRef = useRef<SVGSVGElement>(null);

  useEffect(() => {
    if (!svgRef.current || data.length === 0) return;

    const svg = d3.select(svgRef.current);
    svg.selectAll('*').remove();

    // D3 rendering logic goes here
    // ...
  }, [data, width, height]);

  return <svg ref={svgRef} viewBox={`0 0 ${width} ${height}`} />;
}

Summary

You can efficiently use D3.js’s rich API with Claude Code to build interactive data visualizations. See the data visualization basics and using chart libraries for related topics.

For more on D3.js, see the official D3.js documentation and the Observable D3 gallery.