Omniの可視化をもっと柔軟に！カスタムチャートを使ってワードクラウドグラフを作成してみた

2025.12.19

こんにちは、業務効率化ソリューション部のikumiです。

今回はOmniの カスタムチャート を作成してみましたので、その内容について紹介していきます。
Omniの基本のチャートは棒グラフやマップチャートなど充実していますが、さらに高度なビジュアライズを実装したい場合にはカスタムチャートが有効です。カスタムチャートを使うことで、サンキーチャートやワードクラウドなど基本のチャートにないグラフを作成することが可能です。
 カスタムチャートの作り方Omniのカスタムチャートは、以下の2つの方法で実装することが可能です。
1. Vega-Lite視覚化
JSONベースの視覚化仕様である Vega-Lite で視覚化を作成できます
Omniのチャートの多くは、Vega-Liteで実装されており、チャートのコードを直接編集してカスタマイズすることも可能です
2. iframeカスタム視覚化
Markdownタイルでiframeタグを活用することで、外部でホストされたHTMLコンテンツを埋め込むことができます
Omniの公式ドキュメントに、Vega-Liteで作成したサンプルのカスタムチャートがあるので、今回はそれを使って試してみます。
公式Doc：Custom visualizations
 早速やってみる今回は、サンプルのワードクラウドの作成を試してみるので、まずは必要なデータ形式に沿ったクエリを作成しました
取引件数の多いブランドのワードクラウドを作成するため、項目はBrand、大きさはCount(*)を使用
また、それ以外のフィールドについてはドキュメント通りの内容を反映しました


続いて、ドキュメントに記載のワードクラウド用のコードを確認し、今回のデータ用に修正を反映します
{
  "mark": "text",
  "width": "container",
  "height": "container",
  "transform": [
    {
      "as": "DIM",
      "calculate": "datum['brand_ana__tran.brand']" -->'category'の部分を修正
    },
    {
      "as": "SIZE",
      "calculate": "datum['brand_ana__tran.frequency']" -->'frequency'の部分を修正
    },
    {
      "as": "COLOR",
      "calculate": "datum['brand_ana__tran.l_category']" -->色分け用にl_categoryをビューに追加し、'department'の部分を修正
    },
    {
      "as": "X",
      "calculate": "random() * (0.9 - 0.1)+ 0.1"
    },
    {
      "as": "Y",
      "calculate": "random()"
    }
  ],
  "encoding": {
    "x": {
      "axis": null,
      "field": "X"
    },
    "y": {
      "axis": null,
      "field": "Y"
    },
    "size": {
      "field": "SIZE",
      "legend": null
    },
    "text": {
      "field": "DIM"
    },
    "color": {
      "field": "COLOR",
      "scale": {
        "scheme": "tableau20"
      },
      "legend": null
    }
  }
}
Chart設定から、{...}マークを押し、コードを入力しSAVEすると、ワードクラウドを作成することができました！

ここの状態から、カラータイプの変更と凡例の表示設定を追加してみると、想定通りのグラフも作ることができました

 さいごにいかがでしたでしょうか。この類のコーディングは得意ではないので、まずは簡単そうなものから取り組んでみましたが、パパっとグラフを作成することができました！ほかにも様々なカスタムチャートのサンプルが提供されていましたので、皆様も素敵なダッシュボードの作成に挑戦してみてください✨