Tutoriel : Créer des graphiques et charts pour le web

Pourquoi la data visualization est essentielle en 2025

Un tableau de 500 lignes est incompréhensible. Le même dataset présenté en graphique raconte une histoire en 2 secondes. La data visualization transforme les données brutes en insights actionnables — et c’est une compétence de plus en plus demandée. Au Sénégal, les startups, ONG et administrations collectent des tonnes de données mais manquent de compétences pour les visualiser efficacement.

Chart.js : la bibliothèque la plus accessible

Chart.js est la bibliothèque de graphiques la plus utilisée au monde. Simple, légère (73 Ko gzip), responsive, et supporte 8 types de graphiques par défaut.

Installation et premier graphique

<!-- CDN : aucune installation nécessaire -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="myChart" width="400" height="200"></canvas>

<script>
const ctx = document.getElementById('myChart').getContext('2d');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun'],
    datasets: [{
      label: 'Revenus (FCFA)',
      data: [450000, 520000, 680000, 590000, 820000, 950000],
      backgroundColor: '#3B82F6',
      borderRadius: 8,
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Revenus mensuels - Premier semestre'
      }
    },
    scales: {
      y: {
        ticks: {
          callback: (v) => v.toLocaleString('fr-FR') + ' F'
        }
      }
    }
  }
});
</script>

Types de graphiques et quand les utiliser

• Bar (barres) — Comparer des catégories. Ex : revenus par mois, utilisateurs par pays
• Line (lignes) — Montrer une évolution dans le temps. Ex : trafic web, croissance CA
• Pie / Doughnut (camembert) — Montrer des proportions. Ex : répartition des sources de trafic. Limitez à 5-6 segments maximum
• Radar — Comparer des profils multi-critères. Ex : compétences techniques d’un candidat
• Scatter (nuage de points) — Montrer la corrélation entre deux variables
• Area (aire) — Comme line mais avec l’aire remplie. Montre le volume en plus de la tendance

Graphique ligne avec données réelles

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4', 'Sem 5', 'Sem 6'],
    datasets: [
      {
        label: 'Visiteurs site',
        data: [1200, 1900, 3000, 5000, 4200, 6100],
        borderColor: '#3B82F6',
        backgroundColor: 'rgba(59,130,246,0.1)',
        fill: true,
        tension: 0.4, // Courbe lissée
      },
      {
        label: 'Conversions',
        data: [45, 78, 120, 210, 185, 290],
        borderColor: '#10B981',
        backgroundColor: 'rgba(16,185,129,0.1)',
        fill: true,
        tension: 0.4,
      }
    ]
  },
  options: {
    responsive: true,
    interaction: {
      mode: 'index',
      intersect: false, // Tooltip sur toute la colonne
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: (ctx) => ctx.dataset.label + ': ' + ctx.parsed.y.toLocaleString('fr-FR')
        }
      }
    }
  }
});

D3.js : la puissance maximale

D3.js (Data-Driven Documents) est LA bibliothèque de référence pour la data visualization avancée. Elle manipule le DOM directement et permet de créer n’importe quel type de visualisation — y compris des cartes, des graphiques interactifs et des animations de données.

Quand choisir D3 plutôt que Chart.js :

• Visualisations personnalisées (treemaps, sankey diagrams, chord diagrams)
• Cartes géographiques interactives (carte du Sénégal par région)
• Animations complexes de données
• Contrôle pixel-perfect sur chaque élément

// D3.js : bar chart SVG
import * as d3 from 'd3';

const data = [
  { region: 'Dakar', population: 3900000 },
  { region: 'Thiès', population: 2100000 },
  { region: 'Diourbel', population: 1800000 },
  { region: 'Saint-Louis', population: 1100000 },
  { region: 'Kaolack', population: 1050000 },
];

const width = 600, height = 400, margin = { t: 20, r: 20, b: 40, l: 100 };

const svg = d3.select('#chart')
  .append('svg')
  .attr('viewBox', `0 0 ${width} ${height}`);

const x = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.population)])
  .range([margin.l, width - margin.r]);

const y = d3.scaleBand()
  .domain(data.map(d => d.region))
  .range([margin.t, height - margin.b])
  .padding(0.3);

// Barres
svg.selectAll('rect')
  .data(data)
  .join('rect')
  .attr('x', margin.l)
  .attr('y', d => y(d.region))
  .attr('width', d => x(d.population) - margin.l)
  .attr('height', y.bandwidth())
  .attr('fill', '#3B82F6')
  .attr('rx', 4);

// Labels
svg.selectAll('.label')
  .data(data)
  .join('text')
  .attr('x', margin.l - 8)
  .attr('y', d => y(d.region) + y.bandwidth() / 2)
  .attr('text-anchor', 'end')
  .attr('dominant-baseline', 'middle')
  .text(d => d.region);

Alternatives modernes

Recharts (React)

import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { mois: 'Jan', revenus: 450000 },
  { mois: 'Fév', revenus: 520000 },
  { mois: 'Mar', revenus: 680000 },
];

function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <XAxis dataKey="mois" />
        <YAxis tickFormatter={(v) => (v/1000) + 'K'} />
        <Tooltip formatter={(v) => v.toLocaleString('fr-FR') + ' FCFA'} />
        <Bar dataKey="revenus" fill="#3B82F6" radius={[8,8,0,0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}

ApexCharts (framework-agnostique)

ApexCharts offre un excellent compromis entre la simplicité de Chart.js et la puissance de D3. Interactivité riche par défaut (zoom, pan, export PNG/SVG), animations fluides, et une API déclarative. Idéal pour les dashboards d’entreprise.

Observable Plot (le plus simple)

import * as Plot from '@observablehq/plot';

// Un graphique en UNE ligne
const chart = Plot.barY(data, {x: 'mois', y: 'revenus', fill: '#3B82F6'}).plot();
document.querySelector('#chart').append(chart);

Bonnes pratiques de data visualization

• Commencez par la question — « Quelle information le lecteur doit-il retenir ? » dicte le type de graphique. Ne choisissez pas le type par esthétique
• Simplifiez — Supprimez les gridlines inutiles, les légendes évidentes, les bordures décoratives. Chaque pixel doit servir la compréhension
• Couleurs intentionnelles — Utilisez la couleur pour mettre en avant, pas pour décorer. Gris par défaut, couleur d’accent pour les données importantes
• Annotations — Ajoutez du texte directement sur le graphique pour guider l’interprétation. « Pic de trafic après la campagne Facebook » est plus utile qu’un point de données isolé
• Responsive — Les graphiques doivent être lisibles sur mobile. Utilisez des conteneurs SVG avec viewBox ou ResponsiveContainer
• Accessibilité — Ne transmettez jamais l’information uniquement par la couleur (daltonisme). Ajoutez des patterns, labels directs, et un tableau de données en alternative
• Format des nombres — Au Sénégal, utilisez le format français : 1 250 000 FCFA (espace comme séparateur de milliers, pas de virgule)

Cas pratique : dashboard analytics

Un dashboard type pour un site e-commerce sénégalais combine plusieurs graphiques :

• KPI cards en haut : CA du jour, nombre de commandes, panier moyen, taux de conversion — pas des graphiques mais des chiffres grands et lisibles
• Line chart : Évolution du CA sur 30 jours avec comparaison période précédente
• Bar chart horizontal : Top 10 produits vendus
• Doughnut : Répartition des modes de paiement (Wave 45%, Orange Money 30%, Carte 15%, Espèces 10%)
• Heatmap : Heures et jours de la semaine avec le plus de commandes
• Table : Dernières commandes avec statut (en cours, livrée, annulée)

La data visualization n’est pas un exercice artistique — c’est un outil de communication. Le meilleur graphique est celui qui transmet son message en moins de 5 secondes, sans que le lecteur ait besoin de réfléchir. Maîtrisez Chart.js pour 80% de vos besoins, et apprenez D3.js quand vous avez besoin de visualisations sur mesure.