Installer la compétence belt CLI : npx skills add belt-sh/cli
Visualisation de données
Créez des visualisations de données claires et efficaces via l'interface CLI inference.sh.
Démarrage rapide
Nécessite l'interface CLI inference.sh (belt). Instructions d'installation
belt login
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nmois = [\"Jan\", \"Fév\", \"Mar\", \"Avr\", \"Mai\", \"Juin\"]\nchiffre_affaires = [42, 48, 55, 61, 72, 89]\n\nfig, ax = plt.subplots(figsize=(10, 6))\nax.bar(mois, chiffre_affaires, color=\"#3b82f6\", width=0.6)\nax.set_ylabel(\"Chiffre d'affaires (K€)\")\nax.set_title(\"Croissance mensuelle du chiffre d'affaires\", fontweight=\"bold\")\nfor i, v in enumerate(chiffre_affaires):\n ax.text(i, v + 1, f\"{v}K€\", ha=\"center\", fontweight=\"bold\")\nplt.tight_layout()\nplt.savefig(\"revenus.png\", dpi=150)\nprint(\"Enregistré\")"
}'
Guide de sélection des graphiques
Quel graphique pour quelles données ?
| Relation des données | Meilleur graphique | À ne jamais utiliser |
|---|
| Évolution dans le temps | Graphique en lignes | Diagramme circulaire |
| Comparaison de catégories | Graphique à barres (horizontal pour beaucoup de catégories) | Graphique en lignes |
| Partie d'un tout | Barres empilées, treemap | Diagramme circulaire (controversé mais : la barre est toujours plus claire) |
| Distribution | Histogramme, boîte à moustaches | Graphique à barres |
| Corrélation | Nuage de points | Graphique à barres |
| Classement | Graphique à barres horizontal | Barres verticales, camembert |
| Géographique | Carte choroplèthe | Graphique à barres |
| Composition dans le temps | Graphique en aires empilées | Multiples diagrammes circulaires |
| Métrique unique | Grand nombre (carte KPI) | Tout graphique (excessif) |
| Flux / processus | Diagramme de Sankey | Graphique à barres |
Le problème du diagramme circulaire
Les diagrammes circulaires sont presque toujours un mauvais choix :
❌ Problèmes des diagrammes circulaires :
- Difficile de comparer des parts de taille similaire
- Impossible de représenter plus de 5 à 6 catégories
- Les diagrammes circulaires 3D sont toujours mauvais
- Impossible de lire les valeurs exactes
✅ Utilisez plutôt :
- Graphique à barres horizontal (comparaison facile)
- Barres empilées (partie d'un tout)
- Treemap (parties hiérarchiques)
- Un simple tableau (si la précision compte)
Règles de conception
Axes
| Règle | Pourquoi |
|---|
| Toujours commencer l'axe Y à 0 (graphiques à barres) | Empêche une visualisation trompeuse |
| Les graphiques en lignes PEUVENT commencer au-dessus de 0 | Lorsqu'on montre l'évolution, pas les valeurs absolues |
| Étiqueter les deux axes | Le lecteur ne doit pas deviner les unités |
| Supprimer les grilles inutiles | Réduire le bruit visuel |
| Utiliser des étiquettes horizontales | Le texte vertical est difficile à lire |
| Trier les graphiques à barres par valeur | N'utilisez pas l'ordre alphabétique sauf raison valable |
Couleur
| Principe | Application |
|---|
| Max 5 à 7 couleurs par graphique | Au-delà, illisible |
| Mettre en évidence une seule chose | Griser tout le reste, colorer le point d'attention |
| Séquentielle pour la magnitude | Clair → foncé pour bas → haut |
| Divergente pour positif/négatif | Rouge ← neutre → bleu |
| Catégorielle pour les groupes | Teintes distinctes, luminosité similaire |
| Adapté aux daltoniens | Éviter uniquement rouge/vert — ajouter des formes ou des étiquettes |
| Signification cohérente | Si bleu = chiffre d'affaires, gardez-le bleu partout |
Bonnes palettes de couleurs
sequentielle = ["#eff6ff", "#bfdbfe", "#60a5fa", "#2563eb", "#1d4ed8"]
divergente = ["#ef4444", "#f87171", "#d1d5db", "#34d399", "#10b981"]
categorielle = ["#3b82f6", "#f59e0b", "#10b981", "#8b5cf6", "#ef4444"]
cb_safe = ["#0077BB", "#33BBEE", "#009988", "#EE7733", "#CC3311"]
Texte et étiquettes
| Élément | Règle |
|---|
| Titre | Énonce l'insight, pas le type de données. "Le chiffre d'affaires a doublé au T2" pas "Graphique du chiffre d'affaires T2" |
| Annotations | Signaler les points de données clés directement sur le graphique |
| Légende | Éviter si possible — étiqueter directement sur les lignes/barres du graphique |
| Taille de police | Minimum 12px, 14px+ pour les présentations |
| Format des nombres | Utiliser K, M, B pour les grands nombres (42K pas 42 000) |
| Étiquettes de données | Ajouter aux barres/points lorsque les valeurs exactes comptent |
Recettes de graphiques
Graphique en lignes (série temporelle)
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(12, 6))\nfig.patch.set_facecolor(\"white\")\n\nmois = [\"Jan\", \"Fév\", \"Mar\", \"Avr\", \"Mai\", \"Juin\", \"Juil\", \"Aoû\", \"Sep\", \"Oct\", \"Nov\", \"Déc\"]\ncette_annee = [120, 135, 148, 162, 178, 195, 210, 228, 245, 268, 290, 320]\nannee_derniere = [95, 102, 108, 115, 122, 130, 138, 145, 155, 165, 178, 190]\n\nax.plot(mois, cette_annee, color=\"#3b82f6\", linewidth=2.5, marker=\"o\", markersize=6, label=\"2024\")\nax.plot(mois, annee_derniere, color=\"#94a3b8\", linewidth=2, linestyle=\"--\", label=\"2023\")\nax.fill_between(range(len(mois)), annee_derniere, cette_annee, alpha=0.1, color=\"#3b82f6\")\n\nax.annotate(\"320K\", xy=(11, 320), fontsize=14, fontweight=\"bold\", color=\"#3b82f6\")\nax.annotate(\"190K\", xy=(11, 190), fontsize=12, color=\"#94a3b8\")\n\nax.set_ylabel(\"Chiffre d'affaires (K€)\", fontsize=12)\nax.set_title(\"Le chiffre d'affaires a augmenté de 68 % en un an\", fontsize=16, fontweight=\"bold\")\nax.legend(fontsize=12)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.grid(axis=\"y\", alpha=0.3)\nplt.tight_layout()\nplt.savefig(\"graphique-lignes.png\", dpi=150)\nprint(\"Enregistré\")"
}'
Graphique à barres horizontal (comparaison)
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(10, 6))\n\ncategories = [\"Email\", \"Réseaux sociaux\", \"SEO\", \"Annonces payantes\", \"Parrainage\", \"Direct\"]\nvaleurs = [12, 18, 35, 22, 8, 5]\ncouleurs = [\"#94a3b8\"] * len(valeurs)\ncouleurs[2] = \"#3b82f6\" # Mettre en évidence le gagnant\n\n# Trier par valeur\ntri = sorted(zip(valeurs, categories, couleurs))\nvaleurs, categories, couleurs = zip(*tri)\n\nax.barh(categories, valeurs, color=couleurs, height=0.6)\nfor i, v in enumerate(valeurs):\n ax.text(v + 0.5, i, f\"{v}%\", va=\"center\", fontsize=12, fontweight=\"bold\")\n\nax.set_xlabel(\"% du trafic total\", fontsize=12)\nax.set_title(\"Le SEO génère le plus de trafic\", fontsize=16, fontweight=\"bold\")\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nplt.tight_layout()\nplt.savefig(\"graphique-barres.png\", dpi=150)\nprint(\"Enregistré\")"
}'
Carte KPI / Grand nombre
belt app run infsh/html-to-image --input '{
"html": "<div style=\"display:flex;gap:20px;padding:20px;background:white;font-family:system-ui\"><div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px;width:200px;text-align:center\"><p style=\"color:#64748b;font-size:14px;margin:0\">Chiffre d'affaires mensuel</p><p style=\"font-size:48px;font-weight:900;margin:8px 0;color:#1e293b\">89K€</p><p style=\"color:#22c55e;font-size:14px;margin:0\">↑ 23 % vs le mois dernier</p></div><div style=\"background:#f8fafc;border:1px solid
}'
Heatmap
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport numpy as np\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(10, 6))\n\njours = [\"Lun\", \"Mar\", \"Mer\", \"Jeu\", \"Ven\", \"Sam\", \"Dim\"]\nheures = [\"9h\", \"10h\", \"11h\", \"12h\", \"13h\", \"14h\", \"15h\", \"16h\", \"17h\"]\ndonnees = np.random.randint(10, 100, size=(len(heures), len(jours)))\ndonnees[2][1] = 95 # Mardi 11h pic\ndonnees[2][3] = 88 # Jeudi 11h\n\nim = ax.imshow(donnees, cmap=\"Blues\", aspect=\"auto\")\nax.set_xticks(range(len(jours)))\nax.set_yticks(range(len(heures)))\nax.set_xticklabels(jours, fontsize=12)\nax.set_yticklabels(heures, fontsize=12)\n\nfor i in range(len(heures)):\n for j in range(len(jours)):\n couleur = \"white\" if donnees[i][j] > 60 else \"black\"\n ax.text(j, i, donnees[i][j], ha=\"center\", va=\"center\", fontsize=10, color=couleur)\n\nax.set_title(\"Trafic du site Web par jour et heure\", fontsize=16, fontweight=\"bold\")\nplt.colorbar(im, label=\"Visiteurs\")\nplt.tight_layout()\nplt.savefig(\"heatmap.png\", dpi=150)\nprint(\"Enregistré\")"
}'
Narration avec les données
L'arc narratif
| Étape | Quoi faire | Exemple |
|---|
| 1. Contexte | Présenter ce que le lecteur doit savoir | "Nous suivons le coût d'acquisition client mensuellement" |
| 2. Tension | Montrer le problème ou le changement | "Le CAC a augmenté de 40 % au T3" |
| 3. Résolution | Montrer l'insight ou la solution | "Mais le LTV a augmenté de 80 %, donc l'économie unitaire s'est améliorée" |
Titre comme insight
❌ Titres descriptifs (ce que montre le graphique) :
"Chiffre d'affaires T3 par gamme de produits"
"Utilisateurs actifs mensuels 2024"
"Résultats de l'enquête de satisfaction client"
✅ Titres insight (ce que signifie le graphique) :
"Le produit Entreprise génère 70 % de la croissance du chiffre d'affaires"
"La croissance des utilisateurs s'est accélérée après le lancement du niveau gratuit"
"Le temps de réponse du support est le premier facteur de satisfaction"
Techniques d'annotation
| Technique | Quand l'utiliser |
|---|
| Étiquette de pointage | Mettre en évidence un point de données spécifique ("Pic : 320K") |
| Ligne de référence | Afficher un objectif/référence ("Objectif : 100K") |
| Zone ombrée | Marquer une période ("Fenêtre de lancement produit") |
| Flèche + texte | Attirer l'attention sur un changement de tendance |
| Ligne avant/après | Montrer l'impact d'un événement |
Graphiques en mode sombre
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\n# Thème sombre\nplt.rcParams.update({\n \"figure.facecolor\": \"#0f172a\",\n \"axes.facecolor\": \"#0f172a\",\n \"axes.edgecolor\": \"#334155\",\n \"axes.labelcolor\": \"white\",\n \"text.color\": \"white\",\n \"xtick.color\": \"white\",\n \"ytick.color\": \"white\",\n \"grid.color\": \"#1e293b\"\n})\n\nfig, ax = plt.subplots(figsize=(12, 6))\nmois = [\"Jan\", \"Fév\", \"Mar\", \"Avr\", \"Mai\", \"Juin\"]\nvaleurs = [45, 52, 58, 72, 85, 98]\n\nax.plot(mois, valeurs, color=\"#818cf8\", linewidth=3, marker=\"o\", markersize=8)\nax.fill_between(range(len(mois)), valeurs, alpha=0.15, color=\"#818cf8\")\nax.set_title(\"Croissance MRR : sur la bonne voie pour 100K€\", fontsize=18, fontweight=\"bold\")\nax.set_ylabel(\"MRR (K€)\", fontsize=13)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.grid(axis=\"y\", alpha=0.2)\n\nfor i, v in enumerate(valeurs):\n ax.annotate(f\"{v}K€\", (i, v), textcoords=\"offset points\", xytext=(0, 12), ha=\"center\", fontsize=11, fontweight=\"bold\")\n\nplt.tight_layout()\nplt.savefig(\"graphique-sombre.png\", dpi=150, facecolor=\"#0f172a\")\nprint(\"Enregistré\")"
}'
Erreurs courantes
| Erreur | Problème | Correction |
|---|
| Diagrammes circulaires | Difficiles à comparer, toujours trompeurs | Utiliser des graphiques à barres ou des treemaps |
| L'axe Y ne commence pas à 0 (graphiques à barres) | Exagère les différences | Commencer à 0 pour les barres, OK de tronquer pour les lignes |
| Trop de couleurs | Bruit visuel, confusion | Max 5 à 7 couleurs, ne mettre en évidence que l'essentiel |
| Pas de titre ou titre générique | Le lecteur ne connaît pas l'insight | Titre = le point clé, pas le type de données |
| Graphiques 3D | Déforme les données, aspect non professionnel | Toujours utiliser la 2D |
| Double axe Y | Trompeur, difficile à lire | Utiliser deux graphiques séparés |
| Tri alphabétique sur les graphiques à barres | Cache l'histoire | Trier par valeur (du plus grand au plus petit) |
| Absence d'étiquettes sur les axes | Le lecteur ne peut pas interpréter | Toujours étiqueter avec les unités |
| Chartjunk (éléments décoratifs) | Distrait des données | Supprimer tout ce qui ne transmet pas d'information |
| Codage couleur uniquement rouge/vert | Les utilisateurs daltoniens ne peuvent pas lire | Utiliser des formes, motifs ou palettes adaptées aux daltoniens |
Compétences connexes
npx skills add inference-sh/skills@pitch-deck-visuals
npx skills add inference-sh/skills@technical-blog-writing
npx skills add inference-sh/skills@competitor-teardown
Parcourir toutes les applications : belt app list