> ## Documentation Index
> Fetch the complete documentation index at: https://wb-21fd5541-wbdocs-1882.mintlify.site/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 des graphiques personnalisés

Utilisez des graphiques personnalisés pour contrôler les données chargées dans un panneau et la manière dont elles sont visualisées.

<div id="1-log-data-to-wb">
  ## 1. Enregistrez des données dans W\&B
</div>

Commencez par enregistrer des données dans votre script. Utilisez [wandb.Run.config](/fr/models/track/config/) pour des valeurs uniques définies au début de l’entraînement, comme les hyperparamètres. Utilisez [wandb.Run.log()](/fr/models/track/log/) pour plusieurs points au fil du temps, et enregistrez des tableaux 2D personnalisés avec `wandb.Table()`. Nous vous recommandons d’enregistrer jusqu’à 10 000 points de données par clé enregistrée.

```python theme={null}
with wandb.init() as run: 

  # Journalisation d'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, puis, à l’étape suivante, nous configurerons des graphiques personnalisés. Voyez le rendu des graphiques obtenus dans le [rapport en direct](https://app.wandb.ai/demo-team/custom-charts/reports/Custom-Charts--VmlldzoyMTk5MDc).

<div id="2-create-a-query">
  ## 2. Créer une requête
</div>

Une fois que vous avez enregistré des données à visualiser, accédez à la page de votre projet et cliquez sur le bouton **`+`** pour ajouter un nouveau panneau, puis sélectionnez **Graphique personnalisé**. Vous pouvez suivre les étapes dans l’[espace de travail de démonstration des graphiques personnalisés](https://app.wandb.ai/demo-team/custom-charts).

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/g98EkbyZbbkyMi8o/images/app_ui/create_a_query.png?fit=max&auto=format&n=g98EkbyZbbkyMi8o&q=85&s=8b1534f3b741cb00543ff3b6c09f9419" alt="Graphique personnalisé vide" width="2204" height="968" data-path="images/app_ui/create_a_query.png" />
</Frame>

<div id="add-a-query">
  ### Ajouter une requête
</div>

1. Cliquez sur `summary` et sélectionnez `historyTable` pour configurer une nouvelle requête qui extrait des données de l’historique du run.
2. Saisissez la clé sous laquelle vous avez enregistré le `wandb.Table()`. Dans le code snippet ci-dessus, c’était `my_custom_table` . Dans le [notebook d’exemple](https://bit.ly/custom-charts-colab), les clés sont `pr_curve` et `roc_curve`.

<div id="set-vega-fields">
  ### Définir les champs Vega
</div>

Maintenant que les résultats de la requête sont chargés dans ces colonnes, vous pouvez les sélectionner dans les menus déroulants des champs Vega :

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/gvIZGkH-i0H7aNZQ/images/app_ui/set_vega_fields.png?fit=max&auto=format&n=gvIZGkH-i0H7aNZQ&q=85&s=64486923bcecaf97b6ce8b88088db689" alt="Chargement des colonnes à partir des résultats de la requête pour définir les champs Vega" width="2572" height="950" data-path="images/app_ui/set_vega_fields.png" />
</Frame>

* **axe x :** runSets\_historyTable\_r (rappel)
* **axe y :** runSets\_historyTable\_p (précision)
* **couleur :** runSets\_historyTable\_c (étiquette de classe)

<div id="3-customize-the-chart">
  ## 3. Personnaliser le graphique
</div>

Le résultat est déjà plutôt bon, mais je voudrais passer d’un nuage de points à un graphique en courbes. Cliquez sur **Edit** pour modifier la spécification Vega de ce graphique intégré. Suivez les étapes dans l’[espace de travail de démonstration des graphiques personnalisés](https://app.wandb.ai/demo-team/custom-charts).

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/Sb3q6Nn7xrh8SB3Y/images/general/custom-charts-1.png?fit=max&auto=format&n=Sb3q6Nn7xrh8SB3Y&q=85&s=da8012c8942a5915bf5a17cf3a635212" alt="Sélection d’un graphique personnalisé" width="416" height="67" data-path="images/general/custom-charts-1.png" />
</Frame>

J’ai mis à jour la spécification Vega pour personnaliser la visualisation :

* ajouter des titres pour le graphique, la légende, l’axe des x et l’axe des y (définissez « title » pour chaque champ)
* remplacer la valeur de « mark » de « point » par « line »
* supprimer le champ « size » inutilisé

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/g98EkbyZbbkyMi8o/images/app_ui/customize_vega_spec_for_pr_curve.png?fit=max&auto=format&n=g98EkbyZbbkyMi8o&q=85&s=30ccb341e1f171bb8f11949c6f8fa823" alt="Spécification Vega de la courbe PR" width="2070" height="1244" data-path="images/app_ui/customize_vega_spec_for_pr_curve.png" />
</Frame>

Pour enregistrer cela en tant que préréglage que vous pourrez réutiliser ailleurs dans ce projet, cliquez sur **Save as** en haut de la page. Voici à quoi ressemble le résultat, avec une courbe ROC :

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/Sb3q6Nn7xrh8SB3Y/images/general/custom-charts-2.png?fit=max&auto=format&n=Sb3q6Nn7xrh8SB3Y&q=85&s=74ae2558ee5a3a8469fd5bd3447c122f" alt="Graphique de la courbe PR" width="1114" height="422" data-path="images/general/custom-charts-2.png" />
</Frame>

<div id="bonus-composite-histograms">
  ## Bonus : histogrammes composites
</div>

Les histogrammes permettent de visualiser des distributions numériques pour nous aider à comprendre des jeux de données plus volumineux. Les histogrammes composites présentent plusieurs distributions sur les mêmes bins, ce qui permet de comparer deux métriques ou plus entre différents modèles, ou différentes classes au sein d’un même modèle. Pour un modèle de segmentation sémantique qui détecte des objets dans des scènes de conduite, on peut par exemple comparer l’efficacité d’une optimisation pour l’accuracy par rapport à l’intersection over union (IOU), ou chercher à savoir dans quelle mesure différents modèles détectent les voitures (régions grandes et fréquentes dans les données) par rapport aux panneaux de signalisation (régions bien plus petites et moins fréquentes). Dans [la démo Colab](https://bit.ly/custom-charts-colab), vous pouvez comparer les scores de confiance de deux des dix classes d’êtres vivants.

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/g98EkbyZbbkyMi8o/images/app_ui/composite_histograms.png?fit=max&auto=format&n=g98EkbyZbbkyMi8o&q=85&s=857916a3b8bc49ff44b6f274b42b8098" alt="Histogramme composite" width="1518" height="608" data-path="images/app_ui/composite_histograms.png" />
</Frame>

Pour créer votre propre version du panneau d’histogramme composite personnalisé :

1. Créez un nouveau panneau Graphique personnalisé dans votre Workspace ou rapport (en ajoutant une visualisation « Graphique personnalisé »). Cliquez sur le bouton « 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 mon [code MVP pour un histogramme composite en Vega](https://gist.github.com/staceysv/9bed36a2c0c2a427365991403611ce21). Vous pouvez modifier directement dans cette spécification Vega, [avec la syntaxe Vega](https://vega.github.io/), le titre principal, les titres des axes, le domaine d’entrée et tout autre détail (vous pouvez changer les couleurs ou même ajouter un troisième histogramme :)).
3. Modifiez la requête à droite pour charger les bonnes données depuis vos logs wandb. Ajoutez le champ `summaryTable` et définissez le `tableKey` correspondant sur `class_scores` pour récupérer le `wandb.Table` enregistré par votre run. Cela vous permettra d’alimenter les deux ensembles de bins de l’histogramme (`red_bins` et `blue_bins`) via les menus déroulants avec les colonnes du `wandb.Table` enregistré sous `class_scores`. Dans mon exemple, j’ai choisi les scores de prédiction de la classe `animal` pour les bins rouges et `plant` pour les bins bleus.
4. Vous pouvez continuer à modifier la spécification Vega et la requête jusqu’à ce que le graphique affiché dans l’aperçu vous convienne. Une fois terminé, cliquez sur **Save as** en haut et donnez un nom à votre graphique personnalisé pour pouvoir le réutiliser. Cliquez ensuite sur **Apply from panel library** pour finaliser votre graphique.

Voici à quoi ressemblent mes résultats après une expérience très brève : un entraînement sur seulement 1 000 exemples pendant une époque produit un modèle très confiant dans le fait que la plupart des images ne sont pas des plantes, et très incertain quant aux images qui pourraient être des animaux.

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/Sb3q6Nn7xrh8SB3Y/images/general/custom-charts-3.png?fit=max&auto=format&n=Sb3q6Nn7xrh8SB3Y&q=85&s=b9dbf6e84bd263664739bd9ad79eba7c" alt="Configuration du graphique" width="1646" height="600" data-path="images/general/custom-charts-3.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/Sb3q6Nn7xrh8SB3Y/images/general/custom-charts-4.png?fit=max&auto=format&n=Sb3q6Nn7xrh8SB3Y&q=85&s=93d954530d5c376bd54578f873bfc0ec" alt="Résultat du graphique" width="1358" height="1274" data-path="images/general/custom-charts-4.png" />
</Frame>
