Comment implémenter la visualisation de données avec Claude Code

Construire des graphiques efficacement avec Claude Code

La visualisation de données est essentielle pour les applications web, mais mémoriser les spécifications des API de Chart.js ou D3.js est un défi. Avec Claude Code, il suffit de décrire le type de graphique souhaité pour obtenir du code fonctionnel immédiatement.

Construire un tableau de bord avec Chart.js

Vous pouvez générer un tableau de bord de ventes avec Chart.js grâce au prompt suivant.

> Crée un composant de tableau de bord de ventes mensuelles en React avec Chart.js.
> Permets de basculer entre graphique en barres et graphique en courbes.

Exemple de code généré :

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: ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin"],
  datasets: [
    {
      label: "Ventes (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: "Rapport de ventes mensuelles" },
  },
};

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"}
        >
          Graphique en barres
        </button>
        <button
          onClick={() => setChartType("line")}
          className={chartType === "line" ? "btn-active" : "btn"}
        >
          Graphique en courbes
        </button>
      </div>
      {chartType === "bar" ? (
        <Bar data={salesData} options={options} />
      ) : (
        <Line data={salesData} options={options} />
      )}
    </div>
  );
}

Visualisation de données en temps réel

Il est aussi facile d’implémenter des mises à jour de graphiques en temps réel avec des données récupérées depuis une 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: "Données en temps réel",
          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);

      // Afficher uniquement les 20 dernières entrées
      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} />;
}

Génération automatique de graphiques à partir de CSV

Quand vous demandez à Claude Code de « créer une fonctionnalité qui affiche un graphique à partir d’un fichier CSV uploadé », il implémente tout, de la lecture du fichier au parsing et à l’affichage.

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

Pour une rédaction efficace de prompts, consultez 5 astuces pour de meilleurs prompts. Pour les techniques de productivité avec Claude Code, consultez 10 astuces pour tripler votre productivité.

Résumé

Claude Code accélère considérablement l’implémentation de la visualisation de données. De la configuration de Chart.js à la logique de transformation des données et aux fonctionnalités interactives, vous obtenez du code fonctionnel simplement en décrivant vos besoins.

Pour plus de détails, consultez la documentation officielle de Claude Code.