D3.js-Implementierung mit Claude Code

D3.js-Datenvisualisierung mit Claude Code optimieren

D3.js (Data-Driven Documents) ist eine leistungsstarke Visualisierungsbibliothek, die DOM auf Basis von Daten manipuliert. Die hohe Flexibilität ist attraktiv, aber die Lernkurve ist bekanntlich steil. Mit Claude Code können Sie die komplexe API von D3.js effizient nutzen.

Responsives Balkendiagramm erstellen

> Erstelle ein responsives Balkendiagramm mit D3.js.
> Mit Tooltip und Animation.

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

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

  // Achsen
  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');

  // Balken (mit 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));
}

Liniendiagramm und Flächendiagramm

> Erstelle ein Liniendiagramm für Zeitreihendaten.
> Mit Brush-Funktion zur Bereichsauswahl.

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

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

  // Fläche
  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));
}

Integration mit React

> Implementiere D3.js-Charts als React-Komponente.
> Sichere Integration mit useRef und 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-Zeichenlogik hier einfügen
    // ...
  }, [data, width, height]);

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

Zusammenfassung

Nutzen Sie die umfangreiche API von D3.js effizient mit Claude Code, um interaktive Datenvisualisierungen zu erstellen. Siehe auch Grundlagen der Datenvisualisierung und Chart-Bibliotheken nutzen.

Details zu D3.js finden Sie in der offiziellen D3.js-Dokumentation und der Observable D3-Galerie.