Anatomie

Le composant enveloppe un SVG 300×300 centré dans une colonne flex qui affiche aussi une ligne de légende en dessous. Dans le SVG, quatre polygones concentriques forment la grille d'arrière-plan, à 25/50/75/100% du rayon. Des lignes radiales fines relient le centre à chaque extrémité d'axe. Par-dessus, un `<motion.path>` par option trace le polygone de données rempli. Des `<motion.circle>` décalés marquent chaque point de données. Les labels texte se positionnent 24px au-delà des extrémités, calculés au même angle polaire que leur axe.

Comment ça marche

Les primitives clés sont `polarToXY` (convertit un angle 0-360° et un rayon en coordonnées x/y SVG, décalé de -90° pour que le premier axe pointe vers le haut) et `buildPath` (mappe chaque valeur sur son point et les joint avec des commandes SVG M/L). Chaque `<motion.path>` anime `pathLength` de 0 à 1 via `whileInView`, avec un décalage de 0.3s entre les options. Les cercles de données utilisent un décalage secondaire : `0.5 + optionIndex * 0.3 + axisIndex * 0.05` secondes, pour qu'ils apparaissent le long du tracé pendant le dessin. La courbe d'accélération `[0.16, 1, 0.3, 1]` est un cubic-bezier personnalisé qui donne une sensation rapide-puis-lente.

Comment le coder en React

1. Mettre en place les helpers de géométrie polaire

   Écris deux fonctions pures : `polarToXY` convertit un angle en degrés et un rayon en coordonnées SVG x/y (soustrait 90° pour que 0° pointe vers le haut), et `buildPath` transforme un tableau de valeurs 0-100 en chaîne SVG fermée. Toutes deux sont en JavaScript pur, sans bibliothèque.

   function polarToXY(angle: number, r: number): [number, number] {
     const rad = ((angle - 90) * Math.PI) / 180;
     return [CENTER + r * Math.cos(rad), CENTER + r * Math.sin(rad)];
   }
   
   function buildPath(values: number[], count: number): string {
     return values
       .map((v, i) => {
         const angle = (360 / count) * i;
         const [x, y] = polarToXY(angle, (v / 100) * RADIUS);
         return `${i === 0 ? "M" : "L"}${x},${y}`;
       })
       .join(" ") + " Z";
   }

2. Dessiner la grille et les axes

   Affiche 4 éléments `<polygon>` concentriques en calculant chaque sommet à `(niveau / LEVELS) * RADIUS` selon chaque angle d'axe. Ajoute ensuite une `<line>` par axe du centre à son extrémité. Les deux utilisent la variable CSS `--color-border` pour s'adapter automatiquement à n'importe quel preset de thème.

   {Array.from({ length: LEVELS }).map((_, li) => {
     const r = ((li + 1) / LEVELS) * RADIUS;
     const pts = axes
       .map((_, ai) => polarToXY((360 / count) * ai, r).join(","))
       .join(" ");
     return <polygon key={li} points={pts} fill="none" stroke="var(--color-border)" strokeWidth="1" opacity={0.5} />;
   })}

3. Animer les polygones de données avec pathLength

   Pour chaque jeu de données, affiche un `<motion.path>` avec le résultat de `buildPath`. Anime `pathLength` de 0 à 1 avec `whileInView` pour déclencher le dessin au scroll. Décale plusieurs options avec `delay: index * 0.3` pour qu'elles apparaissent l'une après l'autre.

   <motion.path
     d={buildPath(opt.values, count)}
     fill="var(--color-accent)"
     fillOpacity={0.15}
     stroke="var(--color-accent)"
     strokeWidth={2}
     initial={{ opacity: 0, pathLength: 0 }}
     whileInView={{ opacity: 1, pathLength: 1 }}
     viewport={{ once: true }}
     transition={{ duration: 1, delay: index * 0.3, ease: [0.16, 1, 0.3, 1] }}
   />

4. Ajouter les cercles de données décalés et les labels

   Mappe sur chaque valeur de chaque option pour afficher un `<motion.circle>` à la position polaire calculée. Utilise un délai composé `0.5 + optionIndex * 0.3 + axisIndex * 0.05` pour que les cercles semblent parcourir le tracé. Place les éléments `<text>` 24px au-delà de l'extrémité du rayon pour les labels d'axe, avec `textAnchor='middle'` et `dominantBaseline='central'` pour un centrage correct quel que soit l'angle.

Quand l'utiliser

Utilise un graphique radar pour comparer 2-3 options sur 5-8 dimensions qualitatives ou notées simultanément : comparatifs de fonctionnalités sur une page de tarification SaaS, profils de compétences, fiches de spécifications produit. Évite-le quand tes données sont ordinales ou séquentielles (un graphique en barres ou en courbes est plus clair), quand tu as plus de 3 options (les polygones superposés deviennent illisibles), ou quand des valeurs numériques précises sont nécessaires (le radar met en avant la forme, pas les chiffres).

Utilisé par

• GitHub, Utilise des visualisations de compétences de type radar dans les profils développeurs et les analyses de contributions.
• Notion, Les dashboards tiers Notion intègrent fréquemment des graphiques radar pour les matrices de compétences d'équipe et le suivi OKR.
• HubSpot, Les dashboards d'analyse de contacts et de deals utilisent des graphiques radar pour afficher les scores multi-attributs d'un coup d'œil.

FAQ