Implementacion de D3.js con Claude Code

Optimizando la visualizacion de datos con D3.js y Claude Code

D3.js (Data-Driven Documents) es una poderosa biblioteca de visualizacion que manipula el DOM basandose en datos. Su alto grado de libertad es atractivo, pero tambien es conocida por su alta curva de aprendizaje. Con Claude Code, puedes manejar eficientemente la compleja API de D3.js.

Creacion de un grafico de barras responsivo

> Crea un grafico de barras responsivo con D3.js.
> Con tooltip y animaciones.

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

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

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

  // Barras (con animacion)
  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));
}

Grafico de lineas y grafico de area

> Crea un grafico de lineas para datos de series temporales.
> Con funcion de brush para seleccion de rango.

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

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

Integracion con React

> Implementa un grafico D3.js como componente React.
> Integralo de forma segura con useRef y 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();

    // Escribir la logica de renderizado D3 aqui
    // ...
  }, [data, width, height]);

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

Resumen

Puedes aprovechar eficientemente la rica API de D3.js con Claude Code para construir visualizaciones de datos interactivas. Consulta tambien los fundamentos de visualizacion de datos y el uso de bibliotecas de graficos.

Para mas detalles sobre D3.js, consulta la documentacion oficial de D3.js y la galeria D3 de Observable.