Como implementar visualizacion de datos con Claude Code

Construyendo graficos eficientemente con Claude Code

La visualizacion de datos es esencial para las aplicaciones web, pero memorizar las especificaciones de API de Chart.js o D3.js es un desafio. Con Claude Code, solo necesitas describir que tipo de grafico deseas y obtendras codigo funcional inmediatamente.

Construyendo un dashboard con Chart.js

Puedes generar un dashboard de ventas usando Chart.js con el siguiente prompt.

> Crea un componente de dashboard de ventas mensuales en React usando Chart.js.
> Que se pueda alternar entre grafico de barras y grafico de lineas.

Ejemplo de codigo generado:

import { useState } from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar, Line } from "react-chartjs-2";

ChartJS.register(
  CategoryScale, LinearScale, BarElement,
  LineElement, PointElement, Title, Tooltip, Legend
);

const salesData = {
  labels: ["Ene", "Feb", "Mar", "Abr", "May", "Jun"],
  datasets: [
    {
      label: "Ventas ($K)",
      data: [120, 190, 150, 210, 180, 250],
      backgroundColor: "rgba(99, 102, 241, 0.5)",
      borderColor: "rgb(99, 102, 241)",
      borderWidth: 2,
    },
  ],
};

const options = {
  responsive: true,
  plugins: {
    legend: { position: "top" as const },
    title: { display: true, text: "Informe de ventas mensuales" },
  },
};

export function SalesDashboard() {
  const [chartType, setChartType] = useState<"bar" | "line">("bar");

  return (
    <div className="p-4">
      <div className="mb-4 flex gap-2">
        <button
          onClick={() => setChartType("bar")}
          className={chartType === "bar" ? "btn-active" : "btn"}
        >
          Grafico de barras
        </button>
        <button
          onClick={() => setChartType("line")}
          className={chartType === "line" ? "btn-active" : "btn"}
        >
          Grafico de lineas
        </button>
      </div>
      {chartType === "bar" ? (
        <Bar data={salesData} options={options} />
      ) : (
        <Line data={salesData} options={options} />
      )}
    </div>
  );
}

Visualizacion de datos en tiempo real

Tambien es facil implementar actualizaciones de graficos en tiempo real con datos obtenidos de una API.

import { useEffect, useRef } from "react";
import { Chart } from "chart.js/auto";

export function RealtimeChart({ endpoint }: { endpoint: string }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const chartRef = useRef<Chart | null>(null);

  useEffect(() => {
    if (!canvasRef.current) return;

    chartRef.current = new Chart(canvasRef.current, {
      type: "line",
      data: {
        labels: [],
        datasets: [{
          label: "Datos en tiempo real",
          data: [],
          borderColor: "rgb(34, 197, 94)",
          tension: 0.3,
        }],
      },
      options: {
        animation: { duration: 300 },
        scales: { x: { display: true }, y: { beginAtZero: true } },
      },
    });

    const interval = setInterval(async () => {
      const res = await fetch(endpoint);
      const { value, timestamp } = await res.json();
      const chart = chartRef.current;
      if (!chart) return;

      chart.data.labels!.push(timestamp);
      chart.data.datasets[0].data.push(value);

      // Mostrar solo las ultimas 20 entradas
      if (chart.data.labels!.length > 20) {
        chart.data.labels!.shift();
        chart.data.datasets[0].data.shift();
      }
      chart.update();
    }, 2000);

    return () => {
      clearInterval(interval);
      chartRef.current?.destroy();
    };
  }, [endpoint]);

  return <canvas ref={canvasRef} />;
}

Generacion automatica de graficos desde datos CSV

Cuando pides a Claude Code que “cree una funcion que muestre un grafico desde un archivo CSV cargado”, implementa todo, desde la lectura del archivo hasta el analisis y la visualizacion.

function csvToChartData(csv: string) {
  const lines = csv.trim().split("\n");
  const headers = lines[0].split(",");
  const labels = lines.slice(1).map((line) => line.split(",")[0]);

  const datasets = headers.slice(1).map((header, i) => ({
    label: header,
    data: lines.slice(1).map((line) => parseFloat(line.split(",")[i + 1])),
    borderColor: `hsl(${i * 60}, 70%, 50%)`,
    backgroundColor: `hsla(${i * 60}, 70%, 50%, 0.2)`,
  }));

  return { labels, datasets };
}

Para la escritura efectiva de prompts, consulta 5 tips para mejorar tus prompts. Para tecnicas de productividad con Claude Code, consulta los 10 tips para triplicar tu productividad.

Resumen

Claude Code acelera dramaticamente la implementacion de visualizacion de datos. Desde la configuracion de Chart.js hasta la logica de transformacion de datos y funciones interactivas, obtienes codigo funcional solo describiendo tus requisitos.

Para mas detalles, consulta la documentacion oficial de Claude Code.