> ## 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.

# Aperçu des graphiques personnalisés

> Créez des graphiques personnalisés dans vos projets W&B à l’aide de visualisations Vega

export const AriaChatBubbles = ({prompt, response}) => {
  const [isDark, setIsDark] = useState(false);
  const [promptCopied, setPromptCopied] = useState(false);
  useEffect(() => {
    const root = document.documentElement;
    const sync = () => setIsDark(root.classList.contains('dark'));
    sync();
    const obs = new MutationObserver(sync);
    obs.observe(root, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => obs.disconnect();
  }, []);
  useEffect(() => {
    if (!promptCopied) {
      return undefined;
    }
    const timeout = setTimeout(() => setPromptCopied(false), 2000);
    return () => clearTimeout(timeout);
  }, [promptCopied]);
  const copyText = text => {
    navigator.clipboard.writeText(text).then(() => setPromptCopied(true)).catch(console.error);
  };
  const userBg = isDark ? '#363C44' : '#F8F8F8';
  const userBorder = isDark ? '#4B535C' : '#DFE0E2';
  const textColor = isDark ? '#E8E8E9' : '#2B3038';
  const iconColor = isDark ? '#8F949E' : '#79808A';
  const iconHoverBg = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.05)';
  const bubbleText = {
    fontSize: '15px',
    color: textColor,
    overflowWrap: 'anywhere'
  };
  const bubbleBase = {
    maxWidth: '85%'
  };
  const copyIcon = promptCopied ? <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    color: '#FCBC32'
  }}>
      <path d="M20 6 9 17l-5-5" />
    </svg> : <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
    </svg>;
  return <div aria-label="ARIA chat example" className="not-prose flex flex-col gap-3" role="group">
      {}
      <div className="flex w-full justify-end">
        <div className="flex w-fit items-start gap-1 rounded-2xl py-2 pl-3 pr-1.5" style={{
    ...bubbleBase,
    backgroundColor: userBg,
    border: `1px solid ${userBorder}`
  }}>
          <div className="min-w-0 flex-1 hyphens-auto whitespace-pre-wrap" style={bubbleText}>
            {prompt}
          </div>
          <button type="button" className="mt-0.5 shrink-0 rounded-lg p-1.5 cursor-pointer" style={{
    color: iconColor,
    background: 'transparent'
  }} onMouseEnter={e => {
    e.currentTarget.style.backgroundColor = iconHoverBg;
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = 'transparent';
  }} onClick={() => copyText(prompt)} aria-label="Copy user prompt">
            {copyIcon}
          </button>
        </div>
      </div>
      {}
      <div className="flex w-full justify-start">
        <div className="w-fit rounded-2xl py-2 px-3" style={{
    ...bubbleBase,
    border: '1px solid #CDF4F7'
  }}>
          <div className="hyphens-auto whitespace-pre-wrap" style={bubbleText}>
            {response}
          </div>
        </div>
      </div>
    </div>;
};

Les graphiques personnalisés vous permettent de visualiser les données journalisées exactement comme vous le souhaitez, au-delà des options par défaut fournies par W\&B. Utilisez-les lorsque vous devez représenter des relations, des distributions ou des métriques d’évaluation de modèle que les panneaux intégrés ne prennent pas en charge, comme des courbes précision-rappel, des histogrammes personnalisés ou la superposition de plusieurs expériences.

Créez des graphiques personnalisés dans votre projet W\&B. Journalisez des tableaux de données quelconques et visualisez-les exactement comme vous le souhaitez. Contrôlez finement les polices, les couleurs et les infobulles avec [Vega](https://vega.github.io/vega/).

* Code : essayez un exemple de [notebook Colab](https://tiny.cc/custom-charts).
* Vidéo : regardez un [guide pas à pas en vidéo](https://www.youtube.com/watch?v=3-N9OV6bkSM).
* Exemple : [notebook de démonstration](https://colab.research.google.com/drive/1g-gNGokPWM2Qbc8p1Gofud0_5AoZdoSD?usp=sharing) rapide avec Keras et Sklearn.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/supported_charts.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=bb143b9d057cd857f52a611ee43c68ac" alt="Graphiques pris en charge, issus de vega.github.io/vega" max-width="90%" width="2634" height="588" data-path="products/wandb/_media/supported_charts.png" />
</Frame>

<h2 id="how-it-works">
  Fonctionnement
</h2>

1. **Journaliser les données** : depuis votre script, journalisez la [configuration](/fr/products/wandb/track/config) et les données de synthèse.
2. **Personnaliser le graphique** : récupérez les données journalisées à l’aide d’une requête [GraphQL](https://graphql.org). Visualisez ensuite les résultats de votre requête avec [Vega](https://vega.github.io/vega/), une grammaire de visualisation.
3. **Journaliser le graphique** : appelez votre propre préréglage depuis votre script avec `wandb.plot_table()`.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/pr_roc.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=efc4dc6aeb7c1819fc65f13bdf810524" alt="Courbes PR et ROC" width="1114" height="422" data-path="products/wandb/_media/pr_roc.png" />
</Frame>

Si les données attendues n’apparaissent pas, il est possible que la colonne recherchée ne soit pas journalisée dans les runs sélectionnés. Enregistrez votre graphique, revenez au tableau des runs et vérifiez les runs sélectionnés à l’aide de l’icône en forme d’**œil**.

<h2 id="log-charts-from-a-script">
  Journaliser des graphiques depuis un script
</h2>

Les sections suivantes décrivent deux façons de journaliser des graphiques directement depuis votre script d’entraînement : les préréglages de graphiques intégrés, qui couvrent les visualisations courantes, et les préréglages personnalisés, qui vous permettent de réutiliser vos propres spécifications Vega.

<h3 id="built-in-presets">
  Préréglages intégrés
</h3>

W\&B propose plusieurs préréglages de graphiques intégrés que vous pouvez journaliser directement depuis votre script, notamment des graphiques en courbes, des nuages de points, des graphiques à barres, des histogrammes, des courbes PR et des courbes ROC.

<Tabs>
  <Tab title="Graphique en courbes">
    `wandb.plot.line()`

    Journalisez un graphique en courbes personnalisé, c’est-à-dire une liste ordonnée de points (x,y) reliés entre eux sur des axes x et y arbitraires.

    ```python theme={"system"}
    with wandb.init() as run:
      data = [[x, y] for (x, y) in zip(x_values, y_values)]
      table = wandb.Table(data=data, columns=["x", "y"])
      run.log(
          {
              "my_custom_plot_id": wandb.plot.line(
                  table, "x", "y", title="Custom Y vs X Line Plot"
              )
          }
      )
    ```

    Un graphique en courbes journalise des courbes selon deux dimensions quelconques. Si vous représentez deux listes de valeurs l’une en fonction de l’autre, les deux listes doivent contenir exactement le même nombre de valeurs (par exemple, chaque point doit avoir une valeur x et une valeur y).

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/app_ui-line_plot.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=cabfa82b081566a0de6f27fbe0339148" alt="Graphique en courbes personnalisé" width="1930" height="1228" data-path="products/wandb/_media/app_ui-line_plot.png" />
    </Frame>

    [Voir un exemple de rapport](https://forge.coreweave.com/wandb/wandb/plots/reports/Custom-Line-Plots--VmlldzoyNjk5NTA) ou [essayer un exemple de notebook Google Colab](https://tiny.cc/custom-charts).
  </Tab>

  <Tab title="Nuage de points">
    `wandb.plot.scatter()`

    Journalisez un nuage de points personnalisé, c’est-à-dire une liste de points (x, y) sur deux axes quelconques x et y.

    ```python theme={"system"}
    with wandb.init() as run:
      data = [[x, y] for (x, y) in zip(class_x_prediction_scores, class_y_prediction_scores)]
      table = wandb.Table(data=data, columns=["class_x", "class_y"])
      run.log({"my_custom_id": wandb.plot.scatter(table, "class_x", "class_y")})
    ```

    Vous pouvez l’utiliser pour journaliser des points de nuage sur deux dimensions quelconques. Notez que si vous tracez deux listes de valeurs l’une en fonction de l’autre, les deux listes doivent contenir exactement le même nombre de valeurs (par exemple, chaque point doit avoir un x et un y).

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/app_ui-demo_scatter_plot.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=983038a223cb182045b4280b2ea42334" alt="Nuage de points" width="2194" height="940" data-path="products/wandb/_media/app_ui-demo_scatter_plot.png" />
    </Frame>

    [Voir un exemple de rapport](https://forge.coreweave.com/wandb/wandb/plots/reports/Custom-Scatter-Plots--VmlldzoyNjk5NDQ) ou [essayer un exemple de notebook Google Colab](https://tiny.cc/custom-charts).
  </Tab>

  <Tab title="Graphique à barres">
    `wandb.plot.bar()`

    Journalisez un graphique à barres personnalisé (une liste de valeurs étiquetées représentées sous forme de barres) :

    ```python theme={"system"}
    with wandb.init() as run:
      data = [[label, val] for (label, val) in zip(labels, values)]
      table = wandb.Table(data=data, columns=["label", "value"])
      run.log(
          {
              "my_bar_chart_id": wandb.plot.bar(
                  table, "label", "value", title="Custom Bar Chart"
              )
          }
      )
    ```

    Vous pouvez l’utiliser pour journaliser n’importe quel graphique à barres. Notez que les listes doivent contenir exactement le même nombre d’étiquettes et de valeurs (par exemple, chaque point de données doit avoir une étiquette et une valeur).

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/demo_bar_plot.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=384008b16e360f00de5d354110d2c6ea" alt="Graphique à barres de démonstration" width="659" height="579" data-path="products/wandb/_media/demo_bar_plot.png" />
    </Frame>

    [Voir un exemple de rapport](https://forge.coreweave.com/wandb/wandb/plots/reports/Custom-Bar-Charts--VmlldzoyNzExNzk) ou [essayer un exemple de notebook Google Colab](https://tiny.cc/custom-charts).
  </Tab>

  <Tab title="Histogramme">
    `wandb.plot.histogram()`

    Journalisez un histogramme personnalisé (qui répartit une liste de valeurs en intervalles selon leur nombre ou leur fréquence d’occurrence). Par exemple, supposons que vous disposiez d’une liste de scores de confiance des prédictions (`scores`) et que vous souhaitiez visualiser leur distribution :

    ```python theme={"system"}
    with wandb.init() as run:
      data = [[s] for s in scores]
      table = wandb.Table(data=data, columns=["scores"])
      run.log({"my_histogram": wandb.plot.histogram(table, "scores", title=None)})
    ```

    Vous pouvez l’utiliser pour journaliser n’importe quel histogramme. Notez que `data` est une liste de listes, conçue pour représenter un tableau 2D de lignes et de colonnes.

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/app_ui-demo_custom_chart_histogram.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=d6a64f7b06e6c5e4eb359d0566f2d2bd" alt="Histogramme personnalisé" width="1252" height="558" data-path="products/wandb/_media/app_ui-demo_custom_chart_histogram.png" />
    </Frame>

    [Voir un exemple de rapport](https://forge.coreweave.com/wandb/wandb/plots/reports/Custom-Histograms--VmlldzoyNzE0NzM) ou [essayer un exemple de notebook Google Colab](https://tiny.cc/custom-charts).
  </Tab>

  <Tab title="Courbe PR">
    `wandb.plot.pr_curve()`

    Créez une [courbe précision-rappel](https://scikit-learn.org/stable/modules/generated/sklearn.metrics.precision_recall_curve.html#sklearn.metrics.precision_recall_curve) en une seule ligne de code :

    ```python theme={"system"}
    with wandb.init() as run:
      plot = wandb.plot.pr_curve(ground_truth, predictions, labels=None, classes_to_plot=None)

      run.log({"pr": plot})
    ```

    Vous pouvez journaliser ce graphique dès que votre code a accès aux éléments suivants :

    * Les scores prédits par un modèle (`predictions`) sur un ensemble d'exemples.
    * Les étiquettes de vérité terrain (`ground_truth`) correspondant à ces exemples.
    * `labels` (facultatif) : une liste des étiquettes ou des noms de classes (`labels=["cat", "dog", "bird"...]` si l'index d'étiquette 0 correspond à cat, 1 à dog, 2 à bird, etc.).
    * `classes_to_plot` (facultatif) : un sous-ensemble (toujours sous forme de liste) des étiquettes à afficher dans le graphique.

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/demo_average_precision_lines.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=5ca37e1a93a51e5e431ed2e5176aadf7" alt="Courbes précision-rappel" width="852" height="441" data-path="products/wandb/_media/demo_average_precision_lines.png" />
    </Frame>

    [Voir un exemple de rapport](https://forge.coreweave.com/wandb/wandb/plots/reports/Plot-Precision-Recall-Curves--VmlldzoyNjk1ODY) ou [essayer un exemple de notebook Google Colab](https://colab.research.google.com/drive/1mS8ogA3LcZWOXchfJoMrboW3opY1A8BY?usp=sharing).
  </Tab>

  <Tab title="Courbe ROC">
    `wandb.plot.roc_curve()`

    Créez une [courbe ROC](https://scikit-learn.org/stable/modules/generated/sklearn.metrics.roc_curve.html#sklearn.metrics.roc_curve) en une seule ligne :

    ```python theme={"system"}
    with wandb.init() as run:
      # ground_truth est une liste d’étiquettes réelles, predictions est une liste de scores prédits
      ground_truth = [0, 1, 0, 1, 0, 1]
      predictions = [0.1, 0.4, 0.35, 0.8, 0.7, 0.9]

      # Créer le graphique de la courbe ROC
      # labels est une liste facultative de noms de classes, classes_to_plot est un sous-ensemble facultatif de ces étiquettes à afficher
      plot = wandb.plot.roc_curve(
          ground_truth, predictions, labels=None, classes_to_plot=None
      )

      run.log({"roc": plot})
    ```

    Vous pouvez journaliser ce graphique dès lors que votre code a accès aux éléments suivants :

    * Les scores prédits par un modèle (`predictions`) sur un ensemble d’exemples.
    * Les étiquettes de vérité terrain (`ground_truth`) correspondant à ces exemples.
    * `labels` (facultatif) : une liste des étiquettes ou des noms de classes (`labels=["cat", "dog", "bird"...]` si l’index d’étiquette 0 correspond à chat, 1 à chien, 2 à oiseau, etc.).
    * `classes_to_plot` (facultatif) : un sous-ensemble de ces étiquettes (toujours sous forme de liste) à afficher sur le graphique.

    <Frame>
      <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/app_ui-demo_custom_chart_roc_curve.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=130ec1646d32f67f396b1cd9d645cd36" alt="Courbe ROC" width="1338" height="788" data-path="products/wandb/_media/app_ui-demo_custom_chart_roc_curve.png" />
    </Frame>

    [Voir un exemple de rapport](https://forge.coreweave.com/wandb/wandb/plots/reports/Plot-ROC-Curves--VmlldzoyNjk3MDE) ou [essayer un exemple de notebook Google Colab](https://colab.research.google.com/drive/1_RMppCqsA8XInV_jhJz32NCZG6Z5t1RO?usp=sharing).
  </Tab>
</Tabs>

<h3 id="custom-presets">
  Préréglages personnalisés
</h3>

Modifiez un préréglage intégré ou créez-en un nouveau, puis enregistrez le graphique. Utilisez l’ID du graphique pour journaliser des données dans ce préréglage personnalisé directement depuis votre script. [Essayez un exemple de notebook Google Colab](https://tiny.cc/custom-charts).

```python theme={"system"}
# Créer un tableau contenant les colonnes à représenter
table = wandb.Table(data=data, columns=["step", "height"])

# Associer les colonnes du tableau aux champs du graphique
fields = {"x": "step", "value": "height"}

# Utiliser le tableau pour alimenter le nouveau preset de graphique personnalisé
# Pour utiliser votre propre preset de graphique enregistré, modifiez vega_spec_name
my_custom_chart = wandb.plot_table(
    vega_spec_name="carey/new_chart",
    data_table=table,
    fields=fields,
)
```

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/custom_presets.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=7649b471b0f085152be14cb2f949749f" alt="Préréglages de graphiques personnalisés" max-width="90%" width="2946" height="728" data-path="products/wandb/_media/custom_presets.png" />
</Frame>

<h2 id="log-data">
  Journaliser des données
</h2>

Avant de pouvoir visualiser quoi que ce soit dans un graphique personnalisé, votre script doit journaliser les données sous-jacentes dans un format que l’éditeur de graphiques peut interroger. Vous pouvez journaliser les types de données suivants depuis votre script et les utiliser dans un graphique personnalisé :

* **Config** : paramètres initiaux de votre expérience (vos variables indépendantes). Cela inclut tous les champs nommés que vous avez journalisés comme clés dans `wandb.Run.config` au début de l’entraînement. Par exemple, `wandb.Run.config.learning_rate = 0.0001`.
* **Summary** : valeurs uniques journalisées pendant l’entraînement (vos résultats ou variables dépendantes). Par exemple, `wandb.Run.log({"val_acc" : 0.8})`. Si vous écrivez plusieurs fois dans cette clé pendant l’entraînement via `wandb.Run.log()`, la synthèse prend la dernière valeur de cette clé.
* **History** : la série temporelle complète du scalaire journalisé est accessible à la requête via le champ `history`.
* **summaryTable** : pour journaliser une liste de plusieurs valeurs, utilisez un `wandb.Table()` afin d’enregistrer ces données, puis interrogez-les dans votre panneau personnalisé.
* **historyTable** : pour consulter les données d’historique, interrogez `historyTable` dans votre panneau de graphique personnalisé. Chaque fois que vous appelez `wandb.Table()` ou journalisez un graphique personnalisé, vous créez un nouveau tableau dans l’historique pour cette étape.

<h3 id="log-a-custom-table">
  Journaliser un tableau personnalisé
</h3>

Utilisez `wandb.Table()` pour journaliser vos données sous forme de tableau 2D. En général, chaque ligne de ce tableau représente un point de données, et chaque colonne correspond aux champs ou dimensions de chaque point de données que vous souhaitez représenter sur un graphique. Lorsque vous configurez un panneau personnalisé, le tableau complet est accessible via la clé transmise à `wandb.Run.log()` (`custom_data_table` dans l’exemple suivant). Chaque champ est accessible via le nom de sa colonne (`x`, `y` et `z`). Vous pouvez journaliser des tableaux à plusieurs étapes au cours de votre expérience. Chaque tableau peut contenir au maximum 10 000 lignes. [Essayez un exemple de notebook Google Colab](https://tiny.cc/custom-charts).

```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"])}
  )
```

<h2 id="customize-the-chart">
  Personnaliser le graphique
</h2>

Après avoir journalisé vos données, créez un graphique dans la W\&B App en choisissant les valeurs journalisées à récupérer et la manière de les afficher. Pour commencer, ajoutez un nouveau graphique personnalisé, puis modifiez la requête afin de sélectionner les données de vos runs visibles. La requête utilise [GraphQL](https://graphql.org) pour récupérer les données des champs config, summary et history de vos runs.

Vous pouvez également demander à ARIA de créer un graphique personnalisé à partir d’une description. Ouvrez ARIA depuis le Workspace de votre projet et décrivez le graphique souhaité :

<AriaChatBubbles prompt="Créez un nuage de points de la précision de validation en fonction de la perte d’entraînement pour les runs visibles, avec des points colorés selon le taux d’apprentissage." response="Je vais ajouter un panneau de graphique personnalisé qui affiche la précision de validation sur l’axe X et la perte d’entraînement sur l’axe Y, avec des points colorés selon le taux d’apprentissage défini dans la configuration de chaque run." />

<h3 id="build-the-graphql-query">
  Construire la requête GraphQL
</h3>

L’éditeur de graphiques personnalisés exécute une requête GraphQL sur les runs que vous avez sélectionnés dans le workspace du projet ou dans le rapport. Dans l’éditeur de requêtes, ajoutez les champs dont vous avez besoin. Vous pouvez choisir parmi `config`, `summary`, `history`, `summaryTable` et `historyTable`, ce qui vous évite, dans la plupart des cas, d’écrire la requête de A à Z.

Chaque source de la requête correspond à des données journalisées différentes :

* **Config** récupère les valeurs de [configuration de run](/fr/products/wandb/track/config) (hyperparamètres et autres paramètres).
* **Summary** récupère les valeurs de [synthèse](/fr/products/wandb/track/log). Par défaut, la synthèse d’une clé journalisée avec `wandb.Run.log()` contient la dernière valeur écrite pour cette clé. Pour utiliser un autre agrégat, appelez `wandb.Run.define_metric(..., summary=...)` avec `"min"`, `"max"`, `"mean"`, `"best"` ou `"none"`. Pour définir directement une valeur, affectez-la avec `wandb.Run.summary["key"] = value`.
* **History** récupère des séries temporelles scalaires depuis l’historique du run (par exemple, `loss` ou `accuracy` à chaque étape). Utilisez **history** lorsque vous avez besoin de la courbe complète, et pas seulement de la valeur finale.
* **`summaryTable`** charge un [`wandb.Table`](/fr/products/wandb/ref/python/data-types/table) depuis la synthèse du run. Utilisez-le lorsque le tableau qui vous intéresse est stocké sous forme d’instantané unique dans le run (par exemple, une matrice de confusion journalisée une seule fois à la fin).
* **`historyTable`** charge un [`wandb.Table`](/fr/products/wandb/ref/python/data-types/table) depuis l’historique du run. Chaque fois que vous journalisez un tableau avec `wandb.Run.log()`, vous ajoutez à l’historique du run une nouvelle étape qui contient ce tableau. Utilisez **`historyTable`** lorsque le tableau évolue au fil du temps ou lorsque vous souhaitez activer le sélecteur d’étape dans l’éditeur de graphiques personnalisés (voir [Comment afficher un curseur d’étape dans un graphique personnalisé ?](/fr/support/models/articles/how-do-you-show-a-step-slider-in-a-custo)).

Pour **`summaryTable`** et **`historyTable`**, définissez **`tableKey`** sur la clé de dictionnaire utilisée dans `wandb.Run.log()`, et non sur un nom de colonne du [`wandb.Table`](/fr/products/wandb/ref/python/data-types/table).

Les exemples suivants couvrent les cas les plus courants :

* Tracer les colonnes d’un tableau journalisé à chaque étape (par exemple, une courbe PR) : ajoutez **`historyTable`**, définissez **`tableKey`** sur votre clé journalisée (par exemple, `pr_curve`), puis associez les colonnes du tableau dans **Chart fields**. Voir le [guide pas à pas des graphiques personnalisés](/fr/products/wandb/app/features/custom-charts/walkthrough).
* Tracer les colonnes d’un tableau stocké dans la synthèse (par exemple, les scores par classe pour un histogramme composite) : ajoutez **`summaryTable`**, puis définissez **`tableKey`** sur cette clé (le tutoriel utilise `class_scores`). Voir [Bonus : histogrammes composites](/fr/products/wandb/app/features/custom-charts/walkthrough#bonus-composite-histograms).
* Tracer une métrique scalaire au fil des étapes d’entraînement : ajoutez la métrique depuis **history**. Si vous l’ajoutez uniquement depuis **summary**, le graphique n’affiche qu’une seule valeur par run.

**Noms des champs du graphique**

Une fois la requête exécutée, **Chart fields** répertorie les colonnes que vous pouvez lier à la spécification Vega. Les noms commencent souvent par `runSets_` et reflètent les champs de requête sélectionnés. Sélectionnez-les dans les listes déroulantes situées à côté de chaque espace réservé `${field:...}` plutôt que de les saisir à la main.

Si une colonne n’apparaît jamais, assurez-vous que la clé existe dans les runs sélectionnés, ouvrez la page du run pour vérifier comment les données ont été journalisées, puis déterminez si **`summaryTable`** ou **`historyTable`** correspond à ce mode de journalisation.

Les graphiques personnalisés s’appuient sur cette requête de panneau basée sur GraphQL. Les [panneaux de requête](/fr/products/wandb/app/features/panels/query-panels) utilisent un autre langage d’expression et font l’objet d’une documentation distincte.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/customize_chart.gif?s=5cc3c07f0d355e8fd592a79a1ed958e4" alt="Création d’un graphique personnalisé" max-width="90%" width="1942" height="1334" data-path="products/wandb/_media/customize_chart.gif" />
</Frame>

<h3 id="custom-visualizations">
  Visualisations personnalisées
</h3>

Sélectionnez un **Chart** dans le coin supérieur droit pour partir d’un préréglage par défaut. Sélectionnez ensuite **Chart fields** pour associer les données récupérées par la requête aux champs correspondants de votre graphique.

L’image suivante montre comment sélectionner une métrique, puis l’associer aux champs du graphique à barres.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/demo_make_a_custom_chart_bar_chart.gif?s=d4881d3bb9356f51bd2ceb36a80b9418" alt="Création d’un graphique à barres personnalisé" max-width="90%" width="2804" height="1588" data-path="products/wandb/_media/demo_make_a_custom_chart_bar_chart.gif" />
</Frame>

<h3 id="edit-vega">
  Modifier Vega
</h3>

Cliquez sur **Edit** en haut du panneau pour passer en mode d’édition [Vega](https://vega.github.io/vega/). Vous pouvez y définir une [spécification Vega](https://vega.github.io/vega/docs/specification/) qui crée un graphique interactif dans l’interface utilisateur. Vous pouvez modifier tous les aspects du graphique : par exemple, changer le titre, choisir une autre palette de couleurs ou afficher les courbes sous forme de série de points plutôt que de lignes continues. Vous pouvez également modifier les données elles-mêmes, par exemple en utilisant une transformation Vega pour regrouper un tableau de valeurs en intervalles afin d’obtenir un histogramme. L’aperçu du panneau se met à jour de manière interactive, ce qui vous permet de voir l’effet de vos modifications au fur et à mesure que vous éditez la spécification Vega ou la requête. Pour plus d’informations, voir la [documentation et les tutoriels Vega](https://vega.github.io/vega/).

**Références de champs**

Pour importer des données de W\&B dans votre graphique, ajoutez des chaînes de modèle de la forme `"${field:<field-name>}"` à n’importe quel endroit de votre spécification Vega. Une liste déroulante apparaît alors dans la zone **Chart fields**, à droite, qui vous permet de sélectionner une colonne de résultat de requête à associer à Vega.

Pour définir une valeur par défaut pour un champ, utilisez la syntaxe suivante : `"${field:<field-name>:<placeholder text>}"`

<h3 id="save-chart-presets">
  Enregistrer des préréglages de graphique
</h3>

Enregistrez un préréglage pour réutiliser la même définition Vega dans plusieurs panneaux et projets, sans avoir à la recréer à chaque fois. Pour appliquer les modifications à un panneau de visualisation précis, utilisez le bouton situé en bas de la fenêtre modale. Vous pouvez aussi enregistrer la spécification Vega pour la réutiliser ailleurs dans votre projet. Pour enregistrer la définition de graphique réutilisable, cliquez sur **Save as** en haut de l’éditeur Vega, puis nommez votre préréglage.

<h2 id="reports-and-guides">
  Reports et guides
</h2>

Les reports suivants présentent des exemples de bout en bout et des explorations approfondies de l’utilisation concrète des graphiques personnalisés.

* [The W\&B Machine Learning Visualization IDE](https://forge.coreweave.com/wandb/wandb/posts/reports/The-W-B-Machine-Learning-Visualization-IDE--VmlldzoyNjk3Nzg)
* [Visualiser les modèles NLP basés sur l’attention](https://forge.coreweave.com/wandb/kylegoyette/gradientsandtranslation2/reports/Visualizing-NLP-Attention-Based-Models-Using-Custom-Charts--VmlldzoyNjg2MjM)
* [Visualiser l’effet de l’attention sur le flux des gradients](https://forge.coreweave.com/wandb/kylegoyette/gradientsandtranslation/reports/Visualizing-The-Effect-of-Attention-on-Gradient-Flow-Using-Custom-Charts--VmlldzoyNjg1NDg)
* [Journaliser des courbes arbitraires](https://forge.coreweave.com/wandb/stacey/presets/reports/Logging-Arbitrary-Curves--VmlldzoyNzQyMzA)

<h2 id="common-use-cases">
  Cas d’utilisation courants
</h2>

Les graphiques personnalisés sont utiles lorsque les panneaux par défaut ne permettent pas de représenter ce que vous souhaitez montrer. Par exemple :

* Personnaliser des graphiques à barres avec des barres d’erreur
* Afficher des métriques de validation de modèle qui nécessitent des coordonnées x-y personnalisées (comme les courbes précision-rappel)
* Superposer, sous forme d’histogrammes, les distributions de données de deux modèles ou expériences différents
* Montrer l’évolution d’une métrique à l’aide d’instantanés pris à plusieurs moments de l’entraînement
* Créer une visualisation unique, pas encore disponible dans W\&B, et la partager avec d’autres personnes


## Related topics

- [Aperçu des graphiques personnalisés](/fr/products/wandb/ref/python/custom-charts.md)
