AI/BI ダッシュボードでのカスタム視覚化

重要

この機能はパブリックプレビュー段階です。

カスタム視覚化を使用すると、組み込みの視覚化の種類以外の AI/BI ダッシュボードでグラフをカスタマイズできます。カスタム視覚化では、 Vega-Lite ライブラリを使用して JSON 仕様からグラフをレンダリングします。

カスタムビジュアライゼーションは、組み込みオプションを超えた専門的なチャートタイプをレンダリングできます。以下の系統樹は、フォース指向型レイアウトを用いて、共有グループおよびファミリーセンターの周囲に関連記録をグループ化しています。

系統樹図の例

チャートをステップバイステップで作成するには、例示の可視化をご覧ください。他のチャートタイプの仕様を参照するには、「さらなるチャート仕様」をご覧ください。

カスタム視覚エフェクトを作成する

カスタムビジュアライゼーションを作成するには:

データセットを選択します。
視覚化の構成ペインで、[Advanced] 視覚化セクションで [Custom Viz] を選択します。
[ フィールド] セクションで、使用するフィールドを追加します。各フィールドには一意の 名前があります。これらの名前を使用して、Vega-Lite 仕様のフィールドを参照します。
Vega-Lite 仕様エディターで、Vega-Lite JSON 仕様を入力します。

参照データセットの列

Vega-Lite 仕様における参照列は、以下のいずれかの方法で構成されます。

"field": "{columnName}" を使用してください。次の例では、 xField 列を x 軸に割り当てます。
```
"encoding": {
  "x": { "field": "xField", "type": "quantitative" }
}
```
式では、 datum["{columnName}"] または datum.{columnName}を使用します。次の例では、x列とr列から新しいangle列を定義します。
```
{ "calculate": "datum.r * cos(datum.angle)", "as": "x" }
```

詳細については、Vega 式のドキュメントの datum を参照してください。

ダッシュボードテーマを継承する

カスタム視覚エフェクトは、明るいモードや暗いモードなど、ダッシュボードのテーマに自動的に適応します。次のグラフ要素は、仕様を変更せずにテーマの値を継承します。

軸、凡例、タイトル、ヘッダーのフォントは、ダッシュボードで構成されているフォントと一致します。
軸グリッド線はアクティブモードのダッシュボードのグリッドライン色と一致しています。
グラフの背景は、ウィジェットのテーマ付き背景の上に透明になります。

仕様の config ブロックで定義した設定は、継承された既定値よりも優先されます。

式内でテーマ値を参照する

テーマに対応する値でマークのスタイルを設定するには、Vega-Lite 式 ({ "expr": "..." }) 内で次のシグナルを参照します。

信号	説明
`colors`	アクティブモードの事前解決済みのカラートークン。これらは、 `colors.textPrimary.default`、 `colors.gridColor`、 `colors.markHighlightColor`などの一般的な値に使用します。 `[mode]`でインデックスを作成しないでください。既に解決されています。
`mode`	アクティブなカラーモード ( `'light'` または `'dark'`)。これを使用して、モードごとのバリアントを提供するフィールド `dashboardTheme` インデックスを作成します。
`dashboardTheme`	フォント (`resolvedFontSettings`)、カテゴリパレット (`visualizationColors`)、モードごとの色 (`gridLineColor`) など、ダッシュボード所有者によって構成された完全なテーマ。モードごとのバリアントを持つフィールドには、 `[mode]` インデックスが必要です。

colors信号とdashboardTheme信号は独立しています。 colors信号はアクティブモード向けに解決された利便トークンを提供し、dashboardThemeは所有者が設定したテーマ全体を公開します。最初colors使用し、フォント、完全なパレット、またはdashboardThemeが提供しない値にcolorsを使用します。

以下の例は、テーマ値を参照する方法を示しています:

テキストマークには、ダッシュボードの本文フォントを使用します。
```
{ "expr": "dashboardTheme.resolvedFontSettings.fieldValue.fontFamily" }
```
アクティブモードには、ダッシュボードのタイトルの色を使用します。
```
{ "expr": "dashboardTheme.resolvedFontSettings.fieldTitle.fontColor[mode]" }
```
ダッシュボードのカテゴリパレットから色を使用します。
```
{ "expr": "dashboardTheme.visualizationColors[0]" }
```

メモ

colorsトークンはすでにアクティブモードで解決済みです。 [mode]インデックスは飛ばして、colors.markHighlightColorではなくcolors.markHighlightColor[mode]を使ってください。 dashboardTheme下のフィールドで、dashboardTheme.gridLineColor[mode]のように各モードバリエーションを持つ場合、[mode]インデックスが必要です。

選択時に他のウィジェットをフィルター処理する

カスタム視覚化はクロスフィルターソースとして機能できます。ユーザーがマークをクリックすると、選択によってダッシュボード上の他のウィジェットがフィルター処理されます。これを有効にするには、予約名 databricks_mark_selectionを持つポイント選択パラメーターを追加します。レンダラーはこの名前を検出し、選択内容をダッシュボードのクロスフィルター状態に接続します。

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

これには次の要件があります。

パラメーター name は、正確に databricks_mark_selectionする必要があります。その他の名前は通常のパラメーターとして扱われ、クロスフィルター処理は行われません。
select.type は、point である必要があります。間隔 (ブラシ) の選択は、クロスフィルターソースとしてサポートされていません。
select.fields は、未加工の列名ではなく、ウィジェット構成の [フィールド ] セクションで定義されているフィールド名を一覧表示する必要があります。
select.fieldsのディメンション (グループ化) フィールドのみを一覧表示します。 SUM(...)やAVG(...)などの集計メジャーは、クロスフィルターを実行できません。
複数のフィールドを選択するには、それらを一覧表示します: "fields": ["categoryName", "regionName"]。

選択したマークを強調表示する

選択したマークを強調表示するには、塗りつぶしベースのマーク (stroke、strokeWidth、barなど) のarc条件とrect条件を使用し、colorエンコードをフィールドにバインドしたままにします。ストロークに { "expr": "colors.markHighlightColor" } を使用して、明るいモードと暗いモードの両方でハイライトを読みやすくします。

次の例では、バーがクリックされたときに categoryName して、ダッシュボードの残りの部分をフィルター処理します。選択したバーはテーマ付きのストロークを取得し、選択されていないバーは色のエンコードを維持しながら暗くなります。

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
    }
  }
}

チャートを自動的にサイズ変更する

コンテナーに合わせてグラフのサイズを変更するには、仕様の最上位レベルに次の設定を追加します。

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

可視化の例

以下の例では、シンプルな層状チャートからより高度な系統樹まで、カスタムの可視化を段階的に説明しています。

ローリング平均を持つ層状チャート

この例では、Databricks のサンプルデータセットに含まれる気象データを使用して、生の気温データポイントをプロットし、その上に移動平均線を重ねたレイヤードチャートを作成します。

赤いロール平均線が散在点に引かれた層状気温チャート

次のクエリを使用してデータセットを作成します。

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

視覚化の設定ペインで、詳細設定 の下の Custom Viz を選択します。
前の手順で作成したデータセットを選択します。
[ フィールド] セクションで、日付列のフィールドを追加し、その名前を date に設定します。
温度列のフィールドを追加し、 その名前 を temp_maxに設定します。

次の仕様を Vega-Lite 仕様 エディターにコピーします。 x軸がクリップされている場合は、「自動的にサイズ変更」をご覧ください。

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

系統樹

この例では、少数のサンプルデータを用いて、このページ上部に示す系統樹を構築しています。 Vega-Lite あなたが提供した座標に点をプロットしますが、ネットワーク図自体のノード位置は計算しません。この計算は、データがチャートに到達する前にクエリで行われ、クエリは各点のx座標とy座標を事前に計算します。クエリは3つのレコードタイプを発行し、仕様はそれらを別々のレイヤーとして描画します。 path 行は曲線の枝を描き、 node 行は葉の円を描き、 label 行はグループラベルの位置を割り当てます。

サンプルデータをダウンロードします。各行は化石の発見を表し、 dig_longitude と dig_latitude は発掘地点の座標を示しています。

サンプルデータをダウンロードしてください
サイドバーで [ダッシュボード] をクリックします。
[ ダッシュボードの作成] をクリックします。
[データ] タブをクリックします。
「 データ追加」をクリックし、次に 「データをアップロード」をクリックします。
ダウンロードしたファイルをファイルアップロードペイン の「作成または変更」テーブル に置きます。
テーブルを保存したい カタログ と スキーマ を選択し、テーブル名を入力します。
[ テーブルの作成] をクリックします。テーブル全体が自動的にデータセットとして追加されます。
「 SQL データセットを追加 」をクリックしてクエリを貼り付けてください。クエリの FROM 節で、カタログ、スキーマ、テーブルの名前を作成したときに使った名前に置き換えます。
カスタムビジュアライゼーションを作成し、Create custom visualizationの手順に従ってください。 フィールドセクションでは、各フィールド名を名前として使う以下のフィールドを追加します:record_type、x、y、fossil_tag、point_order、suborder、roar_score、clade_label、genus_symbol、family_taxon、label_text。仕様を Vega-Lite jsonとして使ってください。

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

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
        }
      }
    }
  ]
}

さらなるチャート仕様

次の仕様は、組み込みの視覚化の種類として使用できないグラフを示しています。その他の例については、Vega-Lite のサンプルギャラリーを参照してください。

ブレットチャート

categoryField セクションで、currentField、paceField、targetField、およびを定義します。

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

計器

ゲージグラフの例。

$valueField セクションで$totalFieldとを定義します。

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

レーダーチャート

レーダーチャートの例。

$key セクションで$valueとを定義します。

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 }
}

放射状グラフ

放射状グラフの例。

$valueField セクションで$colorFieldとを定義します。

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 }
}

サンバースト図

サンバーストグラフの例。

outerGroupField セクションでinnerGroupField、sizeField、およびを定義します。

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

制限事項

ツリーマップグラフはサポートされていません。 Vega-Lite はツリーマップをサポートしていません。
イメージマークは、PNG、JPEG、または WebP 形式で、37 KB 以下のインライン base64 data: 画像 URL (たとえば、 data:image/png;base64,...) のみをサポートします。リモート画像 URL (https: または http:)、相対 URL、SVG 画像、フィールドまたは式駆動型の画像 URL はサポートされていません。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-08-13

AI/BI ダッシュボードでのカスタム視覚化

カスタム視覚エフェクトを作成する

参照データセットの列

ダッシュボード テーマを継承する

式内でテーマ値を参照する

選択時に他のウィジェットをフィルター処理する

選択したマークを強調表示する

チャートを自動的にサイズ変更する

可視化の例

ローリング平均を持つ層状チャート

系統樹

さらなるチャート仕様

ブレット チャート

計器

レーダー チャート

放射状グラフ

サンバースト図

制限事項

フィードバック

その他のリソース

ダッシュボードテーマを継承する

ブレットチャート

レーダーチャート