D3.js Implementation dengan Claude Code

D3.jsデータvisualisasi dengan Claude Code: efisiensi

D3.js（Data-Driven Documents） 、データ berdasarkan DOM operasi 強力なvisualisasilibrary.自由度 高さ 魅力 す 、学習コスト juga 高いこ dan 知られ.Claude Code pemanfaatanすれば、D3.js kompleksなAPI efisien 扱え.

pembuatan レスポンシブ棒grafik

> D3.js dengan レスポンシブな棒grafik buatkan.
> toolsチップ dan animasi付き dengan 。

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

  // toolsチップ
  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');

  // バー（animasi付き）
  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));
}

折れ線grafikとエリアchart

> 時系列データ 折れ線grafik buatkan.
> ブラシ機能 dengan 範囲選択 juga dengan きるよう.

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

Integrasi dengan React

> D3.js chart Reactkomponen dan してimplementasiして。
> useRef dan useEffect dengan aman integrasiして。

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 efisien pemanfaatanし、インタラクティブなデータvisualisasi pembangunan bisa dilakukan.データvisualisasi dasarやchartlibrarypemanfaatan juga bisa dijadikan referensi.

Untuk D3.jsの詳細, lihat D3.js公式ドキュメントおよびObservable D3ギャラリー.