D3.js Implementation with Claude Code

D3.jsデータ可視化をClaude Codeで効率化する

D3.js（Data-Driven Documents）は、データに基づいてDOMを操作する強力な可視化ライブラリです。自由度の高さが魅力ですが、学習コストも高いことで知られます。Claude Codeを活用すれば、D3.jsの複雑なAPIを効率的に扱えます。

レスポンシブ棒グラフの作成

> D3.jsでレスポンシブな棒グラフを作成して。
> ツールチップとアニメーション付きで。

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})`);

  // スケール
  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]);

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

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

  // ツールチップ
  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');

  // バー（アニメーション付き）
  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));
}

折れ線グラフとエリアチャート

> 時系列データの折れ線グラフを作って。
> ブラシ機能で範囲選択もできるようにして。

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]);

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

  // エリア
  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との統合

> D3.jsのチャートをReactコンポーネントとして実装して。
> useRefとuseEffectで安全に統合して。

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描画ロジックをここに記述
    // ...
  }, [data, width, height]);

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

Summary

D3.jsの豊富なAPIをClaude Codeで効率的に活用し、インタラクティブなデータ可視化を構築できます。データ可視化の基本やチャートライブラリ活用も参考にしてください。

D3.jsの詳細はD3.js公式ドキュメントおよびObservable D3ギャラリーを参照してください。