> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coreweave.com/llms.txt
> Use this file to discover all available pages before exploring further.
> Tutoriel sur l’utilisation de la fonctionnalité de graphiques personnalisés dans l’interface W&B
# Tutoriel : utiliser les graphiques personnalisés
Les graphiques personnalisés vous permettent de contrôler à la fois les données chargées dans un panneau et leur mode de visualisation. Ce tutoriel vous guide pas à pas : journalisation des données, création d’une requête, personnalisation de la spécification Vega du graphique et enregistrement du résultat en vue de sa réutilisation. Il s’adresse aux utilisateurs qui souhaitent aller au-delà des types de graphiques par défaut et adapter les visualisations à des données précises.
À la fin de ce tutoriel, vous disposerez dans votre projet d’un graphique personnalisé fonctionnel, que vous pourrez enregistrer comme préréglage, ainsi que d’un histogramme composite en bonus, à adapter à vos propres données.
Journaliser des données dans W\&B
Avant de pouvoir visualiser quoi que ce soit dans un graphique personnalisé, votre run doit journaliser les données que vous souhaitez afficher. Utilisez [wandb.Run.config](/fr/products/wandb/track/config) pour les valeurs ponctuelles définies au début de l’entraînement, comme les hyperparamètres. Utilisez [wandb.Run.log()](/fr/products/wandb/track/log) pour les séries de points qui évoluent au fil du temps, et journalisez des tableaux 2D personnalisés avec `wandb.Table()`. Nous vous recommandons de ne pas dépasser 10 000 points de données par clé journalisée.
```python theme={"system"}
with wandb.init() as run:
# Journaliser un tableau de données personnalisé
my_custom_data = [[x1, y1, z1], [x2, y2, z2]]
run.log(
{"custom_data_table": wandb.Table(data=my_custom_data, columns=["x", "y", "z"])}
)
```
[Essayez un notebook d’exemple rapide](https://bit.ly/custom-charts-colab) pour journaliser les tableaux de données ; à l’étape suivante, vous configurerez des graphiques personnalisés. Découvrez le rendu des graphiques obtenus dans le [rapport en direct](https://forge.coreweave.com/wandb/demo-team/custom-charts/reports/Custom-Charts--VmlldzoyMTk5MDc).
Une fois vos données journalisées, vous pouvez les récupérer dans un panneau de graphique personnalisé.
Créer une requête
Une requête indique au graphique personnalisé quelles données journalisées charger. Après avoir journalisé les données à visualiser, accédez à la page de votre projet et cliquez sur le bouton **`+`** pour ajouter un panneau, puis sélectionnez **Custom Chart**. Vous pouvez suivre les étapes dans le [workspace de démonstration des graphiques personnalisés](https://app.wandb.ai/demo-team/custom-charts).
Ajouter une requête
1. Cliquez sur `summary` et sélectionnez `historyTable` pour configurer une nouvelle requête qui extrait les données de l’historique du run.
2. Saisissez la clé sous laquelle vous avez journalisé le `wandb.Table()`. Dans l’extrait de code précédent, il s’agit de `custom_data_table`. Dans le [notebook d’exemple](https://bit.ly/custom-charts-colab), les clés sont `pr_curve` et `roc_curve`. Pour plus d’informations sur **`summaryTable`**, **`historyTable`** et **`tableKey`**, consultez [Construire la requête GraphQL](/fr/products/wandb/app/features/custom-charts#build-the-graphql-query).
Définir les champs Vega
Une fois la requête définie, vous pouvez associer vos colonnes journalisées aux encodages visuels du graphique à l’aide des menus déroulants des champs Vega :
* **axe X :** runSets\_historyTable\_r (rappel)
* **axe Y :** runSets\_historyTable\_p (précision)
* **couleur :** runSets\_historyTable\_c (étiquette de classe)
Personnaliser le graphique
La visualisation par défaut constitue un bon point de départ, mais vous pouvez modifier la spécification Vega pour changer de type de graphique, ajouter des titres et affiner l’apparence. Pour passer d’un nuage de points à un graphique en courbes, cliquez sur **Edit** afin de modifier la spécification Vega de ce graphique intégré. Pour suivre ces étapes, consultez le [workspace de démonstration des graphiques personnalisés](https://app.wandb.ai/demo-team/custom-charts).
Modifiez la spécification Vega pour personnaliser la visualisation :
* Ajoutez des titres au graphique, à la légende, à l’axe X et à l’axe Y (définissez "title" pour chaque champ).
* Remplacez la valeur "point" de "mark" par "line".
* Supprimez le champ "size", qui n’est pas utilisé.
Enregistrez un préréglage pour réutiliser la même configuration de graphique dans d’autres panneaux du projet. Pour l’enregistrer comme préréglage réutilisable ailleurs dans ce projet, cliquez sur **Save as** en haut de la page. Voici le résultat, accompagné d’une courbe ROC.
Bonus : histogrammes composites
Cette section montre comment créer un graphique personnalisé plus avancé, un histogramme composite qui superpose deux distributions dans la même vue, afin d’illustrer ce qu’il est possible de faire une fois que vous maîtrisez la modification de la spécification Vega.
Les histogrammes permettent de visualiser des distributions numériques pour mieux comprendre de grands jeux de données. Les histogrammes composites affichent plusieurs distributions sur les mêmes intervalles, ce qui vous permet de comparer au moins deux métriques entre différents modèles ou entre différentes classes au sein de votre modèle. Pour un modèle de segmentation sémantique qui détecte des objets dans des scènes de conduite, vous pouvez comparer l’efficacité d’une optimisation de la précision par rapport à celle de l’Intersection over Union (IoU), ou chercher à savoir dans quelle mesure différents modèles détectent les voitures (régions étendues et fréquentes dans les données) par rapport aux panneaux de signalisation (régions beaucoup plus petites et moins fréquentes). Dans le [Colab de démonstration](https://bit.ly/custom-charts-colab), vous pouvez comparer les scores de confiance de deux des dix classes d’êtres vivants.
Pour créer votre propre version du panneau d’histogramme composite personnalisé :
1. Créez un nouveau panneau de graphique personnalisé dans votre workspace ou votre rapport (en ajoutant une visualisation **Custom Chart**). Cliquez sur **Edit** en haut à droite pour modifier la spécification Vega à partir de n’importe quel type de panneau intégré.
2. Remplacez cette spécification Vega intégrée par le [code de départ d’un histogramme composite dans Vega](https://gist.github.com/staceysv/9bed36a2c0c2a427365991403611ce21). Vous pouvez modifier le titre principal, les titres des axes, le domaine d’entrée et tout autre détail directement dans cette spécification Vega [à l’aide de la syntaxe Vega](https://vega.github.io/). Par exemple, vous pouvez modifier les couleurs ou ajouter un troisième histogramme.
3. Modifiez la requête dans le panneau de droite pour charger les bonnes données depuis vos journaux wandb. Ajoutez le champ `summaryTable` et définissez la valeur `tableKey` correspondante sur `class_scores` pour récupérer le `wandb.Table` journalisé par votre run. Vous pouvez ainsi remplir les deux ensembles d’intervalles de l’histogramme (`red_bins` et `blue_bins`) à l’aide des menus déroulants, avec les colonnes du `wandb.Table` journalisé sous le nom `class_scores`. Par exemple, vous pouvez choisir les scores de prédiction de la classe `animal` pour les intervalles rouges et ceux de `plant` pour les intervalles bleus.
4. Vous pouvez continuer à modifier la spécification Vega et la requête jusqu’à ce que le graphique affiché dans l’aperçu du rendu vous convienne. Une fois terminé, cliquez sur **Save as** en haut et donnez un nom à votre graphique personnalisé afin de pouvoir le réutiliser. Cliquez ensuite sur **Apply from panel library** pour finaliser votre graphique.
Voici un exemple de résultat issu d’une courte expérience : un entraînement sur seulement 1 000 exemples pendant une seule époque génère un modèle convaincu que la plupart des images ne sont pas des plantes, mais incertain quant aux images susceptibles d’être des animaux.
## Related topics
- [Utiliser les graphiques de traces](/fr/products/wandb/weave/guides/tracking/trace-plots.md)