Visualisations personnalisées dans les tableaux de bord AI/BI

info

Aperçu

Cette fonctionnalité est en aperçu public.

Les visualisations personnalisées vous permettent de personnaliser les graphiques dans les tableaux de bord AI/BI au-delà des types de visualisation intégrés. Les visualisations personnalisées utilisent la bibliothèque Vega-Lite pour générer des graphiques à partir d'une spécification JSON.

Les visualisations personnalisées peuvent restituer des types de graphiques spécialisés qui vont au-delà des options intégrées. L’arbre phylogénétique suivant utilise un layout dirigé par la force pour regrouper les enregistrements associés autour de centres de groupe et de famille partagés :

Pour créer un graphique étape par étape, voir Exemples de visualisations. Pour consulter les spécifications relatives aux autres types de graphiques, voir Plus de spécifications sur les graphiques.

Créer une visualisation personnalisée

Pour créer une visualisation personnalisée :

1. Sélectionnez un dataset.
2. Dans le volet de configuration de la visualisation, sélectionnez Custom Viz sous la section de visualisation Avancée .
3. Dans la section **Champs**, ajoutez les champs que vous souhaitez utiliser. Chaque champ a un Nom unique. Référencez les champs dans votre spécification Vega-Lite en utilisant ces noms.
4. Saisissez votre spécification JSON Vega-Lite dans l’éditeur **Spécification Vega-Lite**.

Colonnes de dataset de référence

Référencez les colonnes dans une spécification Vega-Lite de l'une des manières suivantes :

• Utilisez "field": "{columnName}". L'exemple suivant affecte la colonne xField à l'axe des x :

  JSON

  "encoding": {
    "x": { "field": "xField", "type": "quantitative" }
  }

• Dans les expressions, utilisez datum["{columnName}"] ou datum.{columnName}. L'exemple suivant définit une nouvelle colonne x à partir des colonnes r et angle :

  JSON

  { "calculate": "datum.r * cos(datum.angle)", "as": "x" }

Pour plus d'informations, consultez datum dans la documentation des expressions Vega.

Hériter du thème du tableau de bord

Les visualisations personnalisées s'adaptent automatiquement au thème du tableau de bord, y compris les modes clair et sombre. Les éléments de graphique suivants héritent des valeurs du thème sans aucune modification de vos spécifications :

• Les polices des axes, des légendes, des titres et des en-têtes correspondent aux polices configurées du tableau de bord.
• Les lignes de grille de l’axe correspondent à la couleur de ligne de grille du tableau de bord pour le mode actif.
• L'arrière-plan du graphique est transparent sur l'arrière-plan thématique du widget.

Les paramètres que vous définissez dans le bloc config de votre spécification l'emportent sur les default héritées.

Référencer les valeurs de thème dans les expressions.

Pour styliser les marques avec des valeurs sensibles au thème, référencez les signaux suivants dans une expression Vega-Lite ({ "expr": "..." }) :

Signal	Description
colors	Jetons de couleur prédéfinis pour le mode actif. Utilisez-les pour des valeurs courantes telles que colors.textPrimary.default, colors.gridColor et colors.markHighlightColor. Ne les indexez pas avec [mode]; ils sont déjà résolus.
mode	Le mode couleur actif, soit 'light' soit 'dark'. Utilisez-le pour indexer dashboardTheme champs qui fournissent des variantes par mode.
dashboardTheme	Le thème complet configuré par le propriétaire du tableau de bord, y compris les polices (resolvedFontSettings), la palette catégorielle (visualizationColors) et les couleurs par mode (gridLineColor). Les champs avec des variantes par mode nécessitent l'index [mode].

Signal	Description
colors	Jetons de couleur prédéfinis pour le mode actif. Utilisez-les pour des valeurs courantes telles que colors.textPrimary.default, colors.gridColor et colors.markHighlightColor. Ne les indexez pas avec [mode]; ils sont déjà résolus.
mode	Le mode couleur actif, soit 'light' soit 'dark'. Utilisez-le pour indexer dashboardTheme champs qui fournissent des variantes par mode.
dashboardTheme	Le thème complet configuré par le propriétaire du tableau de bord, y compris les polices (resolvedFontSettings), la palette catégorielle (visualizationColors) et les couleurs par mode (gridLineColor). Les champs avec des variantes par mode nécessitent l'index [mode].

Les signaux colors et dashboardTheme sont indépendants. Le signal colors fournit des jetons pratiques résolus pour le mode actif, tandis que dashboardTheme expose le thème complet configuré par le propriétaire. Utilisez d'abord colors, et utilisez dashboardTheme pour les polices, la palette complète ou toute valeur que colors ne fournit pas.

Les exemples suivants montrent comment référencer des valeurs de thème :

• Utiliser la police de corps du tableau de bord pour un repère de texte :

  JSON

  { "expr": "dashboardTheme.resolvedFontSettings.fieldValue.fontFamily" }

• Utilisez la couleur du titre du tableau de bord pour le mode actif :

  JSON

  { "expr": "dashboardTheme.resolvedFontSettings.fieldTitle.fontColor[mode]" }

• Utilisez une couleur de la palette catégorielle du tableau de bord :

  JSON

  { "expr": "dashboardTheme.visualizationColors[0]" }

remarque

Les jetons colors sont déjà résolus pour le mode actif. Ignorez l’index [mode] et utilisez colors.markHighlightColor, pas colors.markHighlightColor[mode]. Les champs sous dashboardTheme qui possèdent des variantes par mode, telles que dashboardTheme.gridLineColor[mode], nécessitent l’index [mode].

Filtrez d'autres widgets selon la sélection

Une visualisation personnalisée peut servir de source de filtrage croisé : lorsqu'un utilisateur clique sur une marque, la sélection filtre les autres widgets du tableau de bord. Pour ce faire, ajoutez un paramètre de sélection de point avec le nom réservé databricks_mark_selection. Le moteur de rendu détecte ce nom et connecte la sélection à l'état de filtrage croisé du tableau de bord.

JSON

"params": [
  {
    "name": "databricks_mark_selection",
    "select": { "type": "point", "fields": ["categoryName"] }
  }
]

Les exigences suivantes s'appliquent :

• Le paramètre name doit être exactement databricks_mark_selection. Tout autre nom est traité comme un paramètre régulier et n'entraîne pas de filtrage croisé.
• select.type doit être point. Les sélections d'intervalle (balayage) ne sont pas prises en charge comme sources de filtrage croisé.
• select.fields doivent lister les noms de champ définis dans la section Champs de la configuration du widget, et non les noms de colonne bruts.
• Répertoriez uniquement les champs de dimension (regroupement) dans select.fields. Les mesures agrégées, telles que SUM(...) ou AVG(...), ne peuvent pas piloter un filtre croisé.
• Pour sélectionner plusieurs champs, listez-les ensemble : "fields": ["categoryName", "regionName"].

Mettre en évidence les marques sélectionnées

Pour mettre en surbrillance les marques sélectionnées, utilisez les conditions stroke et strokeWidth sur une marque basée sur le remplissage (telle que bar, arc ou rect) et maintenez l'encodage color lié à votre champ. Utilisez { "expr": "colors.markHighlightColor" } pour le trait afin que la surbrillance reste lisible dans les modes clair et sombre.

L'exemple suivant filtre le reste du tableau de bord par categoryName lorsqu'une barre est cliquée. Les barres sélectionnées reçoivent un contour thématique, et les barres non sélectionnées s'estompent tout en conservant leur encodage de couleur.

Spécification JSON

JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": { "name": "databricks_query" },
  "width": "container",
  "height": "container",
  "config": { "autosize": { "type": "fit", "contains": "padding" } },
  "params": [
    {
      "name": "databricks_mark_selection",
      "select": { "type": "point", "fields": ["categoryName"] }
    }
  ],
  "mark": { "type": "bar", "stroke": null },
  "encoding": {
    "x": { "field": "categoryName", "type": "nominal" },
    "y": { "field": "salesValue", "type": "quantitative" },
    "color": { "field": "categoryName", "type": "nominal" },
    "fillOpacity": {
      "condition": { "param": "databricks_mark_selection", "value": 1 },
      "value": 0.3
    }
    "stroke": {
      "condition": {
        "param": "databricks_mark_selection",
        "empty": false,
        "value": { "expr": "colors.markHighlightColor" }
      },
      "value": null
    },
    "strokeWidth": {
      "condition": { "param": "databricks_mark_selection", "empty": false, "value": 2 },
      "value": 0
    }
  }
}

Redimensionner automatiquement un graphique

Pour qu'un graphique se redimensionne pour s'adapter à son conteneur, ajoutez les paramètres suivants au niveau supérieur de votre spécification :

JSON

"width": "container",
"height": "container",
"config": {
  "autosize": {
    "type": "fit",
    "contains": "padding"
  }
}

Exemples de visualisations

Les exemples suivants présentent étape par étape la création d’une visualisation personnalisée, d’un simple graphique en couches à un arbre phylogénétique plus avancé.

Graphique en couches avec une moyenne mobile

Cet exemple crée un diagramme en couches qui trace des points de données de température bruts avec une superposition de ligne de moyenne mobile, en utilisant les données météorologiques des datasets d'exemple Databricks.

1. Créez un dataset avec la query suivante :

   SQL

   SELECT date, temperature AS temp_max
   FROM samples.accuweather.historical_hourly_imperial
   WHERE city_name = 'singapore'
   ORDER BY date;

2. Dans le volet de configuration de la visualisation, sous Avancé , sélectionnez Custom Viz .

3. Sélectionnez le dataset que vous avez créé à l’étape précédente.

4. Dans la section Champs , ajoutez un champ pour la colonne de date et définissez son Nom sur date.

5. Ajoutez un champ pour la colonne de température et définissez son Nom sur temp_max.

6. Copiez la spécification suivante dans l’éditeur de spécification Vega-Lite . Si l’axe des x est tronqué, consultez Redimensionner un graphique automatiquement.

Spécification JSON

JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": "container",
  "config": {
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "data": { "name": "databricks_query" },
  "transform": [
    {
      "window": [{ "field": "temp_max", "op": "mean", "as": "rolling_mean" }],
      "frame": [-15, 15]
    }
  ],
  "encoding": {
    "x": { "field": "date", "type": "temporal", "title": "Date" },
    "y": {
      "type": "quantitative",
      "scale": { "zero": false },
      "axis": { "title": "Max temperature and rolling mean" }
    }
  },
  "layer": [
    {
      "mark": { "type": "point", "opacity": 0.3 },
      "encoding": { "y": { "field": "temp_max", "title": "Max temperature" } }
    },
    {
      "mark": { "type": "line", "color": "red", "size": 3 },
      "encoding": { "y": { "field": "rolling_mean", "title": "Rolling mean of max temperature" } }
    }
  ]
}

Arbre phylogénétique

Cet exemple utilise un petit ensemble de données échantillons pour construire l'arbre phylogénétique affiché en haut de cette page. Vega-Lite trace des points aux coordonnées que vous fournissez, mais il ne calcule pas lui-même les positions des nœuds pour un diagramme réseau. Ce calcul se produit dans la query avant que les données n'atteignent le graphique, où la query précalcule les coordonnées x et y de chaque point. La query émet trois types d'enregistrements que la spécification rend sous forme de couches distinctes : les lignes path dessinent les branches courbes, les lignes node dessinent les cercles des feuilles et les lignes label positionnent les étiquettes de groupe.

1. Effectuez le download des données d'exemple. Chaque ligne représente une découverte de fossile, dig_longitude et dig_latitude indiquant ses coordonnées sur le site de fouilles.

Download les données d’échantillon

2. Cliquez sur Tableaux de bord dans la barre latérale.

3. Cliquez sur Créer un tableau de bord .

4. Cliquez sur l’onglet tab .

5. Cliquez sur Add data , puis cliquez sur Upload data .

6. Déposez le fichier download dans le volet Créer ou modifier une table à partir d’un upload .

7. Choisissez le catalogue et le schéma où vous souhaitez stocker la table, puis saisissez un nom de table.

8. Cliquez sur Créer une table . La table complète est automatiquement ajoutée en tant que dataset.

9. Cliquez sur Ajouter un dataset SQL et collez la query. Dans la clause FROM de la query, remplacez les noms du catalogue, du schéma et de la table par ceux que vous avez utilisés lors de la création de la table.

10. Créez la visualisation personnalisée en suivant les étapes décrites dans Créer une visualisation personnalisée. Dans la section Champs , ajoutez les champs suivants, en utilisant chaque nom de champ comme Nom : record_type, x, y, fossil_tag, point_order, suborder, roar_score, clade_label, genus_symbol, family_taxon et label_text. Utilisez la spécification comme JSON Vega-Lite.

Requête SQL

SQL

WITH base AS (
  SELECT
    fossil_tag,
    genus_symbol,
    clade_label,
    suborder,
    family_taxon,
    dig_longitude,
    dig_latitude,
    roar_score
  FROM
    `my_catalog`.`default`.`dino_table`
),
root_pt AS (
  SELECT
    AVG(dig_longitude) AS rx,
    AVG(dig_latitude) AS ry
  FROM
    base
),
group_pts AS (
  SELECT
    suborder,
    AVG(dig_longitude) AS gx,
    AVG(dig_latitude) AS gy
  FROM
    base
  GROUP BY
    suborder
),
family_pts AS (
  SELECT
    suborder,
    family_taxon,
    AVG(dig_longitude) AS fx,
    AVG(dig_latitude) AS fy
  FROM
    base
  GROUP BY
    suborder,
    family_taxon
),
ctx AS (
  SELECT
    b.fossil_tag,
    b.suborder,
    b.family_taxon,
    b.clade_label,
    b.genus_symbol,
    b.dig_longitude,
    b.dig_latitude,
    b.roar_score,
    r.rx,
    r.ry,
    g.gx,
    g.gy,
    f.fx,
    f.fy
  FROM
    base b
      CROSS JOIN root_pt r
      JOIN group_pts g
        ON b.suborder = g.suborder
      JOIN family_pts f
        ON b.suborder = f.suborder
        AND b.family_taxon = f.family_taxon
),
waypoints AS (
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    0 AS point_order,
    rx AS x,
    ry AS y
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    1,
    rx + 0.30 * (gx - rx),
    ry + 0.30 * (gy - ry)
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    2,
    gx + 0.15 * (fx - gx),
    gy + 0.15 * (fy - gy)
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    3,
    gx + 0.50 * (fx - gx) + 0.03 * (dig_longitude - fx),
    gy + 0.50 * (fy - gy) + 0.03 * (dig_latitude - fy)
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    4,
    fx + 0.15 * (dig_longitude - fx),
    fy + 0.15 * (dig_latitude - fy)
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    5,
    fx + 0.65 * (dig_longitude - fx),
    fy + 0.65 * (dig_latitude - fy)
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    6,
    dig_longitude,
    dig_latitude
  FROM
    ctx
)
SELECT
  fossil_tag,
  suborder,
  point_order,
  x,
  y,
  family_taxon,
  clade_label,
  genus_symbol,
  roar_score,
  'path' AS record_type,
  CAST(NULL AS STRING) AS label_text
FROM
  waypoints
UNION ALL
SELECT
  fossil_tag,
  suborder,
  99 AS point_order,
  dig_longitude AS x,
  dig_latitude AS y,
  family_taxon,
  clade_label,
  genus_symbol,
  roar_score,
  'node' AS record_type,
  CAST(NULL AS STRING) AS label_text
FROM
  base
UNION ALL
SELECT
  g.suborder AS fossil_tag,
  g.suborder AS suborder,
  100 AS point_order,
  g.gx
    + (g.gx - r.rx)
      * CASE LOWER(g.suborder)
        WHEN 'titanosauria' THEN 0.10
        WHEN 'hadrosauria' THEN 0.25
        WHEN 'ornithopoda' THEN 1.30
        WHEN 'stegosauria' THEN 0.73
        ELSE 0.55
      END AS x,
  g.gy
    + (g.gy - r.ry)
      * CASE LOWER(g.suborder)
        WHEN 'titanosauria' THEN 0.10
        WHEN 'hadrosauria' THEN 0.25
        WHEN 'ornithopoda' THEN 1.30
        WHEN 'stegosauria' THEN 0.73
        ELSE 0.55
      END AS y,
  CAST(NULL AS STRING) AS family_taxon,
  CAST(NULL AS STRING) AS clade_label,
  CAST(NULL AS STRING) AS genus_symbol,
  CAST(NULL AS DOUBLE) AS roar_score,
  'label' AS record_type,
  g.suborder AS label_text
FROM
  group_pts g CROSS JOIN root_pt r

Spécification JSON

JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "name": "databricks_query" },
  "width": "container",
  "height": "container",
  "background": "white",
  "config": {
    "autosize": { "type": "fit", "contains": "padding" },
    "view": { "stroke": null }
  },
  "layer": [
    {
      "transform": [{ "filter": "datum.record_type === 'path'" }],
      "mark": {
        "type": "line",
        "interpolate": "basis",
        "strokeCap": "round",
        "strokeJoin": "round"
      },
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "y": {
          "field": "y",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "detail": { "field": "fossil_tag", "type": "nominal" },
        "order": { "field": "point_order", "type": "quantitative" },
        "color": {
          "field": "suborder",
          "type": "nominal",
          "scale": { "scheme": "tableau10" },
          "legend": null
        },
        "opacity": { "value": 0.3 },
        "strokeWidth": { "value": 0.8 }
      }
    },
    {
      "transform": [{ "filter": "datum.record_type === 'node'" }],
      "mark": {
        "type": "circle",
        "opacity": 0.9,
        "stroke": "white",
        "strokeWidth": 0.3
      },
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "y": {
          "field": "y",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "color": {
          "field": "suborder",
          "type": "nominal",
          "scale": { "scheme": "tableau10" },
          "legend": { "title": "Suborder", "orient": "right" }
        },
        "size": {
          "field": "roar_score",
          "type": "quantitative",
          "scale": { "domain": [0, 100], "range": [4, 150] },
          "legend": null
        },
        "tooltip": [
          { "field": "clade_label", "title": "Clade" },
          { "field": "genus_symbol", "title": "Symbol" },
          { "field": "suborder", "title": "Suborder" },
          { "field": "family_taxon", "title": "Family" },
          { "field": "roar_score", "title": "Roar Score", "format": ".1f" }
        ]
      }
    },
    {
      "transform": [{ "filter": "datum.record_type === 'label'" }],
      "mark": {
        "type": "text",
        "fontSize": 12,
        "fontWeight": "bold",
        "opacity": 0.85
      },
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "y": {
          "field": "y",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "text": { "field": "label_text", "type": "nominal" },
        "color": {
          "field": "suborder",
          "type": "nominal",
          "scale": { "scheme": "tableau10" },
          "legend": null
        }
      }
    }
  ]
}

Plus de spécifications de graphique

Les spécifications suivantes présentent les graphiques qui ne sont pas disponibles en tant que types de visualisation intégrés. Pour plus d'exemples, consultez les galeries d'exemples Vega-Lite.

Graphique à puces

categoryField``currentFieldDéfinissez,, paceField et targetField dans la section **Champs**.

Spécification JSON

JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": "container",
  "data": { "name": "databricks_query" },
  "config": {
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "transform": [
    {
      "fold": ["targetField", "paceField", "currentField"],
      "as": ["measure_name", "measure_value"]
    },
    {
      "calculate": "toNumber(datum.measure_value)",
      "as": "measure_value"
    },
    {
      "calculate": "{ \"targetField\": \"Target\", \"paceField\": \"Pace\", \"currentField\": \"Current\" }[datum.measure_name]",
      "as": "measure_label"
    },
    {
      "calculate": "indexof([\"Target\", \"Pace\", \"Current\"], datum.measure_label)",
      "as": "measure_order"
    }
  ],
  "layer": [
    {
      "mark": "bar",
      "params": [
        {
          "name": "legend_click",
          "select": { "type": "point", "fields": ["measure_label"] },
          "bind": "legend"
        }
      ],
      "encoding": {
        "color": { "field": "measure_label" },
        "opacity": { "value": 0 }
      }
    },
    {
      "transform": [{ "filter": { "param": "legend_click" } }],
      "layer": [
        {
          "layer": [
            {
              "mark": { "type": "bar", "tooltip": true },
              "encoding": { "color": { "field": "measure_label", "legend": null } },
              "transform": [{ "filter": { "field": "measure_label", "oneOf": ["Pace"] } }]
            },
            {
              "mark": { "type": "bar", "height": 7, "tooltip": true },
              "encoding": { "color": { "field": "measure_label", "legend": null } },
              "transform": [{ "filter": { "field": "measure_label", "oneOf": ["Current"] } }]
            },
            {
              "mark": { "type": "tick", "tooltip": true, "thickness": 3 },
              "encoding": { "color": { "field": "measure_label", "legend": null } },
              "transform": [{ "filter": { "field": "measure_label", "oneOf": ["Target"] } }]
            }
          ],
          "encoding": {
            "x": {
              "field": "measure_value",
              "type": "quantitative",
              "stack": null,
              "title": "Value",
              "axis": { "orient": "bottom" }
            },
            "color": {
              "scale": {
                "domain": ["Target", "Pace", "Current"],
                "range": ["#000000", "#bcbcbc", "#A66BBF"]
              }
            },
            "order": {
              "field": "measure_order",
              "type": "quantitative",
              "sort": "descending"
            }
          }
        }
      ],
      "encoding": {
        "y": {
          "field": "categoryField",
          "type": "ordinal",
          "title": "Category",
          "axis": { "labelOverlap": true }
        },
        "tooltip": [
          { "field": "categoryField", "type": "nominal", "title": "Category" },
          { "field": "currentField", "type": "quantitative", "title": "Current" },
          { "field": "paceField", "type": "quantitative", "title": "Pace" },
          { "field": "targetField", "type": "quantitative", "title": "Target" }
        ]
      }
    }
  ]
}

Jauge.

Définissez $valueField et $totalField dans la section **Champs**.

Spécification JSON

JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "width": "container",
  "height": "container",
  "data": { "name": "databricks_query" },
  "config": {
    "concat": { "spacing": 0 },
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "params": [
    { "name": "ring_max", "expr": "min(width, height) / 2 - 16" },
    { "name": "ring_width", "expr": "max(12, (min(width, height) / 2) * 0.12)" },
    { "name": "ring_gap", "expr": "max(4, (min(width, height) / 2) * 0.03)" },
    { "name": "label_color", "value": "#000000" },
    { "name": "ring_background_opacity", "value": 0.3 },
    { "name": "ring0_percent", "value": 100 },
    { "name": "ring0_outer", "expr": "ring_max + 2" },
    { "name": "ring0_inner", "expr": "ring_max + 1" },
    { "name": "ring1_outer", "expr": "ring0_inner - ring_gap" },
    { "name": "ring1_inner", "expr": "ring1_outer - ring_width" },
    { "name": "ring1_middle", "expr": "(ring1_outer + ring1_inner) / 2" },
    { "name": "arc_size", "expr": "220" }
  ],
  "transform": [
    { "as": "ratio", "calculate": "datum['$valueField'] / datum['$totalField']" },
    { "as": "_arc_start_degrees", "calculate": "360 - ( arc_size / 2 )" },
    { "as": "_arc_end_degrees", "calculate": "0 + ( arc_size / 2 )" },
    { "as": "_arc_start_radians", "calculate": "2 * 3.14 * ( datum['_arc_start_degrees'] - 360 ) / 360" },
    { "as": "_arc_end_radians", "calculate": "2 * 3.14 * datum['_arc_end_degrees'] / 360" },
    { "as": "_arc_total_radians", "calculate": "datum['_arc_end_radians'] - datum['_arc_start_radians']" },
    { "as": "_ring_start_radians", "calculate": "datum['_arc_start_radians']" },
    {
      "as": "_ring_end_radians",
      "calculate": "datum['_arc_start_radians'] + ( datum['_arc_total_radians'] * datum['ratio'] )"
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "arc",
        "color": "lightgrey",
        "theta": { "expr": "datum['_arc_start_radians']" },
        "radius": { "expr": "ring1_outer" },
        "theta2": { "expr": "datum['_arc_end_radians']" },
        "radius2": { "expr": "ring1_inner" },
        "cornerRadius": 10
      }
    },
    {
      "name": "RING",
      "mark": {
        "type": "arc",
        "theta": { "expr": "datum['_ring_start_radians']" },
        "radius": { "expr": "ring1_outer" },
        "theta2": { "expr": "datum['_ring_end_radians']" },
        "radius2": { "expr": "ring1_inner" },
        "cornerRadius": 10
      },
      "encoding": {
        "color": {
          "value": "#307E31",
          "condition": [
            { "test": "datum['ratio'] < 0.33", "value": "#880808" },
            { "test": "datum['ratio'] < 0.66", "value": "#E49B0F" }
          ]
        }
      }
    },
    {
      "mark": { "type": "text", "fontSize": 40 },
      "encoding": {
        "text": { "field": "$valueField" },
        "color": {
          "value": "#307E31",
          "condition": [
            { "test": "datum['ratio'] < 0.33", "value": "#880808" },
            { "test": "datum['ratio'] < 0.66", "value": "#E49B0F" }
          ]
        }
      }
    }
  ]
}

Graphique radar

Définissez $key et $value dans la section **Champs**.

Spécification JSON

JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": "container",
  "config": {
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "data": { "name": "databricks_query" },
  "transform": [
    { "window": [{ "op": "row_number", "as": "category" }] },
    { "calculate": "datum.category - 1", "as": "category" },
    {
      "joinaggregate": [
        { "op": "count", "as": "numCategories" },
        { "op": "max", "field": "$value", "as": "maxValue" }
      ]
    },
    { "calculate": "2 * PI * datum.category / datum.numCategories", "as": "angle" },
    { "calculate": "100 * datum['$value'] / datum.maxValue", "as": "r" },
    { "calculate": "datum.r * cos(datum.angle)", "as": "x" },
    { "calculate": "datum.r * sin(datum.angle)", "as": "y" },
    { "calculate": "110 * cos(datum.angle)", "as": "label_x" },
    { "calculate": "110 * sin(datum.angle)", "as": "label_y" }
  ],
  "layer": [
    {
      "transform": [
        { "joinaggregate": [{ "op": "count", "as": "numCategories" }] },
        { "aggregate": [{ "op": "max", "field": "numCategories", "as": "numCategories" }] },
        { "calculate": "[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]", "as": "cats" },
        { "flatten": ["cats"], "as": ["cat"] },
        { "filter": "datum.cat <= datum.numCategories" },
        { "calculate": "2 * PI * datum.cat / datum.numCategories", "as": "angle" },
        { "calculate": "100 * cos(datum.angle)", "as": "x" },
        { "calculate": "100 * sin(datum.angle)", "as": "y" }
      ],
      "mark": { "type": "line", "color": "#ddd", "strokeWidth": 1 },
      "encoding": {
        "x": { "field": "x", "type": "quantitative", "scale": { "domain": [-120, 120] }, "axis": null },
        "y": { "field": "y", "type": "quantitative", "scale": { "domain": [-120, 120] }, "axis": null },
        "order": { "field": "cat" }
      }
    },
    {
      "transform": [
        { "joinaggregate": [{ "op": "count", "as": "numCategories" }] },
        { "aggregate": [{ "op": "max", "field": "numCategories", "as": "numCategories" }] },
        { "calculate": "[20,40,60,80,100]", "as": "levels" },
        { "flatten": ["levels"], "as": ["level"] },
        { "calculate": "[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]", "as": "cats" },
        { "flatten": ["cats"], "as": ["cat"] },
        { "filter": "datum.cat <= datum.numCategories" },
        { "calculate": "2 * PI * datum.cat / datum.numCategories", "as": "angle" },
        { "calculate": "datum.level", "as": "r" },
        { "calculate": "datum.r * cos(datum.angle)", "as": "x" },
        { "calculate": "datum.r * sin(datum.angle)", "as": "y" }
      ],
      "mark": { "type": "line", "color": "#ddd", "strokeWidth": 1 },
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "y", "type": "quantitative" },
        "detail": { "field": "level" },
        "order": { "field": "cat" }
      }
    },
    {
      "mark": { "type": "line", "color": "#9467bd", "strokeWidth": 2, "interpolate": "linear-closed" },
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "y", "type": "quantitative" },
        "order": { "field": "category" }
      }
    },
    {
      "mark": { "type": "point", "filled": true, "size": 50, "color": "#9467bd" },
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "y", "type": "quantitative" }
      }
    },
    {
      "mark": { "type": "text", "fontSize": 14, "fontWeight": "bold" },
      "encoding": {
        "x": { "field": "label_x", "type": "quantitative" },
        "y": { "field": "label_y", "type": "quantitative" },
        "text": { "field": "$key", "type": "nominal" }
      }
    }
  ],
  "view": { "stroke": null }
}

Graphique radial

Définissez $valueField et $colorField dans la section **Champs**.

Spécification JSON

JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "width": "container",
  "height": "container",
  "config": {
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "data": { "name": "databricks_query" },
  "transform": [
    {
      "aggregate": [{ "op": "sum", "field": "$valueField", "as": "total" }],
      "groupby": ["$colorField"]
    },
    {
      "window": [{ "op": "rank", "as": "rank" }],
      "sort": [{ "field": "total", "order": "descending" }]
    }
  ],
  "layer": [
    {
      "mark": { "type": "arc", "innerRadius": 20, "stroke": "#fff" }
    }
  ],
  "encoding": {
    "theta": {
      "field": "total",
      "type": "quantitative",
      "scale": { "type": "sqrt" },
      "stack": true,
      "sort": "descending"
    },
    "radius": { "field": "total", "scale": { "type": "sqrt", "zero": true } },
    "color": {
      "field": "$colorField",
      "type": "nominal",
      "title": "Sub-Category",
      "sort": { "field": "total", "order": "descending" },
      "legend": { "orient": "right" }
    },
    "tooltip": [
      { "field": "$colorField", "type": "nominal", "title": "Sub-Category" },
      { "field": "total", "type": "quantitative", "title": "Sales" }
    ]
  },
  "view": { "stroke": null }
}

Graphique en rayons de soleil

Définissez outerGroupField, innerGroupField et sizeField dans la section Champs .

Spécification JSON

JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": "container",
  "data": { "name": "databricks_query" },
  "config": {
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "transform": [
    { "calculate": "datum['outerGroupField']", "as": "OUTSIDE" },
    { "calculate": "datum['innerGroupField']", "as": "INSIDE" },
    { "calculate": "datum.OUTSIDE + '-' + datum.INSIDE", "as": "OUT_IN" },
    { "calculate": "toNumber(datum['sizeField'])", "as": "SIZE" }
  ],
  "resolve": {
    "scale": { "color": "independent" },
    "legend": { "color": "independent" }
  },
  "layer": [
    {
      "mark": {
        "type": "arc",
        "tooltip": true,
        "innerRadius": { "expr": "min(width, height)/9" },
        "outerRadius": { "expr": "min(width, height)/3" }
      },
      "encoding": {
        "theta": { "field": "SIZE", "type": "quantitative", "stack": true },
        "color": {
          "field": "OUT_IN",
          "type": "ordinal",
          "sort": "ascending",
          "title": "Inner Grouping",
          "scale": {
            "range": [
              "#1DF9B9",
              "#1DE5B9",
              "#1DD1B9",
              "#1DBDB9",
              "#1DA9B9",
              "#3DF23B",
              "#3DDA3B",
              "#3DC23B",
              "#3DAA3B",
              "#3D923B"
            ]
          }
        },
        "order": { "field": "OUT_IN", "sort": "ascending" },
        "tooltip": [
          { "field": "OUTSIDE", "type": "nominal", "title": "Outer Grouping" },
          { "field": "INSIDE", "type": "nominal", "title": "Inner Grouping" },
          { "field": "SIZE", "type": "quantitative", "title": "Count" }
        ]
      }
    },
    {
      "transform": [
        {
          "aggregate": [{ "op": "sum", "field": "SIZE", "as": "total_users" }],
          "groupby": ["OUTSIDE"]
        }
      ],
      "mark": {
        "type": "arc",
        "tooltip": true,
        "innerRadius": { "expr": "min(width, height)/3" }
      },
      "encoding": {
        "theta": {
          "field": "total_users",
          "type": "quantitative",
          "stack": true,
          "sort": "ascending",
          "title": "Users Count"
        },
        "color": {
          "field": "OUTSIDE",
          "type": "ordinal",
          "sort": "ascending",
          "title": "Outer Grouping",
          "scale": { "range": ["#1DD1B9", "#3DC23B"] }
        },
        "order": { "field": "OUTSIDE", "sort": "ascending" },
        "tooltip": [
          { "field": "OUTSIDE", "type": "nominal", "title": "Outer Grouping" },
          { "field": "total_users", "type": "quantitative", "title": "Count" }
        ]
      }
    }
  ]
}

Limitations

• Les graphiques Treemap ne sont pas pris en charge. Vega-Lite ne prend pas en charge les treemaps.
• Les marques d’image ne prennent en charge que les URL d’image base64 data: intégrées (par exemple, data:image/png;base64,...) de 37 Ko ou moins, au format PNG, JPEG ou WebP. Les URL d'images distantes (https: ou http:), les URL relatives, les images SVG et les URL d'images basées sur des champs ou des expressions ne sont pas prises en charge.