Muze Studioで拡張するThoughtSpotの表現力（基本編）

2025年7月8日 2025年7月7日 16分50秒

AkimasaKajitani

AkimasaKajitaniです。今回は、ThoughtSpotバージョン10.8でベータ版として利用できるようになったMuze Studioについて、ThoughtSpotが本来持っているチャートと比較してどのような場面で役立てるか考えてみたいと思います。

ちゃちゃっと作れるThoughtSpotチャート

ThoughtSpotのチャートは、ちゃちゃっと作れるところが魅力です。どのようなグラフに対応していたか少しおさらいしてみましょう。

上のThoughtSpotが対応しているグラフについて、グラフ名を一般的な名称でまとめてみました。

棒グラフ（横、縦、積み上げ）
折れ線グラフ
折れ線・棒の複合グラフ（積み上げ含む）
面グラフ（積み上げ含む）
円グラフ（ドーナツチャート）
散布図（バブルチャート含む）
表（ヒートマップ、ピボットテーブル含む）
KPIグラフ（AIを組み込んだ多機能グラフ）
ウォーターフォール図
パレート図
キャンドルスティック
レーダー
サンキー
じょうごグラフ
ツリーマップ
地図（バブルチャート、ヒートマップ、面グラフ）

これらのグラフは、ThoughtSpotでは、行、列、スライスを指定すれば簡単に作ることができます。しかしながら、もう少し一捻りしたグラフが欲しいこともあるかと思います。そのような時にMuze Studioが役に立ちます。

Muze Studioだからできること

Muze Studioを使えば、ThoughtSpotがデフォルトで持っていない表現を行うことができます。実際どのようなことが可能なのでしょうか？

ここでは、デフォルトのグラフ以外でできることを探っていきたいと思います。Muze Studioの特徴的なグラフ描画の機能は、以下のとおりです。

透明色の利用
グラフの重ね合わせ
属性ごとにグラフを作成

これらの機能を使うことで様々なグラフを描くことが可能です。これらを使うことで以下のようなチャートに対応することが可能です。

柔軟な散布図（バブルチャート、色にメジャーを指定した散布図）
パイチャート
属性ごとにグラフを作成
様々なグラフのスモールマルチプル
ガントチャート
リファレンスラインの追加
グラデーション色を使った折れ線グラフ
ハイライト化された折れ線グラフ
折れ線と値の範囲を持つエリアグラフ（予測の信頼区間を表現するような場合に使われるグラフ）

ちなみに、Muze StudioはデフォルトのThoughtSpotのグラフと同様にドリルダウンの利用やフィルターをかけることができます。これは大変うれしいことです。外部連携の際にもともと持っている機能が使えない、ということも多いので、それに比べるとMuze Studioは安心して利用することができます。

また、Muze Studioはこれ以外にも事前定義のドリルダウンを実装したり、HTML/CSSのカスタマイズや内部のデータ加工などもできてしまうなどと、非常に高機能です（その分コード書かないといけないのは大変かもしれませんが・・・）。そして、コードベースなので、コピペが簡単、というのもポイントです。形だけ作っておけば、あとはコピペで量産できてしまうのは非常に便利ですね。

サンプル

それぞれのサンプルチャートを見ていきましょう。今回は代表的なチャートに絞り込んでご紹介します。

柔軟な散布図

サイズを使った表現をしたい（バブルチャートの作成）

ThoughtSpotのデフォルトの散布図では、値の大きさをサイズで表現することができません。少し言い換えると、いわゆるバブルチャートを作成することができない、ということです。サイズが利用できると、３軸での表現ができますし、さらに色を使えば４軸の表現が可能です。ここではサイズを利用したバブルチャートを作成してみましょう。

以下のグラフでは、

行（rows）に「Total 利益」、列（columns）に「Total 売上」、スライス用項目（detail）に「顧客名」を設定しています。その上でサイズ設定として「Total 数量」を指定しています。

以下はコードです。

const { muze, getDataFromSearchQuery } = viz;
  
const data = getDataFromSearchQuery();

muze.canvas()
.columns(["Total 売上"])
.rows(["Total 利益"])
.detail(["顧客名"])
.data(data)
.layers([
    {
        mark: "point",
        encoding:{
            size:{
                field: "Total 数量",
                value: () => {
                    return 0.01; //サイズ調整
                },
            },
        },
    },
])
.mount("#chart")

上のコードの通り、Layersプロパティのencoding内でsizeを指定します。デフォルトだとサイズが大きすぎるので、サイズ調整を行っています。

色をメジャーで表現したい

ThoughtSpotのデフォルトの散布図では、色の指定に数値項目を設定できません。Muze Studioならできます！

以下のグラフでは、

行（rows）に「Total 利益」、列（columns）に「Total 売上」、スライス用項目（detail）に「顧客名」を設定しています。その上で色設定として「Total 数量」を指定しています。

以下はコードです。

const { muze, getDataFromSearchQuery } = viz;
  
const data = getDataFromSearchQuery();

muze.canvas()
.columns(["Total 売上"])
.rows(["Total 利益"])
.detail(["顧客名"])
.data(data)
.layers([
    {
        mark: "point",
        encoding:{
            color:"Total 数量"
        },
    },
])
.config({
    legend: {
        color: {
            range: ["#eaf2f8", "#1b4f72"],
        },
    }, 
})
.mount("#chart")

色設定は、上の通りlayersプロパティの中のencodingオプションで項目を指定し、configプロパティのlegendのcolorプロパティで色の指定を行います。ちょい複雑！

もちろん色とサイズを組み合わせた設定も可能ですのでチャレンジしてみてください。

パイチャート

デフォルトのThoughtSpotのチャートでは、円グラフとしてはドーナツチャートを利用することができます。一方で、Muze Studioでは円グラフの変わり種としてパイチャートを描くことができます。

以下のグラフでは、

半径（radius）に「Total 売上」、角度（angle）に「Total 利益」、テキスト（text）に「サブカテゴリ」、色設定として「カテゴリ」を指定しています。

以下はコードです。思った以上にシンプルです。

const { muze, getDataFromSearchQuery } = viz;
  
const data = getDataFromSearchQuery();

muze.canvas()
.layers([
    {
        mark: "arc",
        encoding:{
            color: "カテゴリ",
            radius: "Total 売上",
            angle: "Total 利益",
            text: "サブカテゴリ",
        },
    },
])
.data(data)
.mount("#chart") // mount your chart

各プロパティに設定したい項目名をあてはめていくだけです！

属性ごとにグラフを作成

Muze Studio内では、属性ごとにグラフを作成する場合の属性によって分割される部分をファセットと呼んでいます。これを使うことで属性ごとに作るグラフをコンパクトに作成することができます。

以下のグラフでは、

行（rows）に「Total 売上」、列（columns）に「年」「カテゴリ」、色（color）に「カテゴリ」を設定しています。ポイントは、行や列に複数の項目を入れることで自動的にファセットが作られる、ということです。なお、数値項目を入れるとファセットではなく軸の値になってしまうため、今回のように年をファセットにしたい場合は事前に属性に変換しておく必要があります（今回は事前にto_string関数を使っています）。

以下はコードです。非常にシンプルですね。

const { muze, getDataFromSearchQuery } = viz;
  
const data = getDataFromSearchQuery();

muze.canvas()
  .columns(["年","カテゴリ"])
  .rows(["Total 売上"])
  .color("カテゴリ")
  .layers([
    { mark: 'bar',
      },    
  ])
  .data(data)
  .mount("#chart");

columns、rowへどのような順番でどのように設定するかで見え方が変わってきますが、ここは慣れ、でしょうか（某BIツールユーザーだと勘が働くかと思います）。

様々なグラフのスモールマルチプル

ファセットを使ったスモールマルチプルは上の方法で可能ですが、相関を見たいような場合各数値項目の全パターンで散布図を作ります。これもMuze Studioで思ったより簡単に作ることができます。

以下のグラフでは、スモールマルチプルを作成する数値項目として、「Total 売上」「Total 利益」「Total 数量」「Average 割引率」を定義しています。各ポイントを区別するための集計単位（detail）として「顧客名」を指定しています。

以下はコードです。思った以上にシンプルですが、数値型のフィールドを先にリストとして定義し、行の中で反転させています。

const { muze, getDataFromSearchQuery } = viz;
  
const data = getDataFromSearchQuery();
const Fields = ["Total 売上","Total 利益","Total 数量","Average 割引率"]
muze.canvas()
  .columns(Fields)
  .rows(Fields.slice().reverse())
  .detail(["顧客名"])
  .layers([
    {
      mark: "point",
      outline: false,
    }
  ])

  .data(data)
  .mount("#chart") // mount your chart

出てくるグラフの表現は複雑に見えますが、コード自体は非常にシンプルです。

ガントチャート

ガントチャートもMuze Studioで作ることが可能です。ただ、やはり設定項目は多少複雑になります。

以下のグラフでは、オーダー日と出荷日をベースにガントチャート化していますが、出荷日とオーダー日の差分を事前に数式で作成しています（「Duration」という項目名で、diff_days(出荷日,オーダー日)）という計算をしています。

行（rows）として「オーダー Id」、列（column）として、[muze.Operators.share("Day(オーダー日)", "Day(出荷日)")]、Detailとして「Duration」を指定しています。また、Layersの中で、スタートのX地点（x）を「Day(オーダー日)」、次のXの地点（x0）を「Day(出荷日)」、色指定（color）として属性項目の「出荷モード」を指定しています。

以下はコードです。少々複雑です。

  const { muze, getDataFromSearchQuery } = viz;

  const data = getDataFromSearchQuery();

  muze.canvas()
    .columns([muze.Operators.share("Day(オーダー日)", "Day(出荷日)")])
    .rows(["オーダー Id"])
    .detail(["Duration"])
    .layers([
      {
        mark: "bar",
        encoding: {
          x: "Day(オーダー日)",
          x0: "Day(出荷日)",
          color: "出荷モード",
        },
      },
    ])
    .config({
      columns: { //列ヘッダを下にするためのコード
        headers: {
          show: false,
        },
      },
      axes: {
        x: {
            name: "Time",
            nice: false,
        },  
      },
    })
    .data(data)
    .mount("#chart"); // mount your chart

残りのグラフはまた別の機会に紹介します！

※ThoughtSpot バージョン 10.10.0.cl-73時点の情報です