【ThoughtSpotチャートシリーズ】MuzeStudioのMark一覧

2025年8月28日 2025年8月28日 15分8秒

AkimasaKajitani

ThoughtSpotのMuzeStudioのMarkについて解説します

Muze StudioのMarkとは？

Muze Studioにおいて、Markは非常に重要な要素です。グラフにどのような形状で書いていくか、というのはMarkで設定していきます。つまり、Markとはグラフタイプ、といってもあながち間違いではありません。

Muze Studioで利用可能なMarkは以下の７種類です。

point
bar
line
area
text
tick
arc

それぞれどのような形状になるのか見ていきましょう。また、それぞれのMarkで簡単に表現できるグラフを書き、サンプルを提示していきたいと思います。

Markはどこに書く？

さて、Markはどこに設定していくのでしょうか？

基本的には「layers」に設定していきます。layersで「mark」の属性の値としてそれぞれのMarkの形状を設定していく形になります。

具体的には以下のサンプルを御覧ください。

Point

Pointは、点を描画するMarkです。基本的に最初から透明度が設定されています。

サンプルコードは以下のとおりです。

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

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

上のコードによるサンプルグラフは以下のとおりです。

上のサンプルグラフでは、カテゴリごとに売上の合計がポイントで表示されています。さすがに今のこのサンプルのような使い方はあまり行わないと思いますので・・・このようなケースは通常は棒グラフで表現します。このようなポイントを使う場面は、基本的には散布図などですね。

散布図だと以下のようなコードになります。detailに集計単位となるものの属性を入れていきます。

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

muze.canvas()
.rows(["Total 売上"])
.columns(["Total 利益"])
.detail(["サブカテゴリ"])
.data(data)
.layers([
    {
        mark:"point",
    }
])
.mount("#chart")

上のコードによるサンプルグラフは以下の通りになり、サブカテゴリごとの売上と利益の散布図が描かれています。

Bar

Muze StudioはデフォルトではマークがBarになって表示されます。そのため、Layersを設定しなくても自動的に棒グラフになるのが基本的な動作となっています。

サンプルコードは以下のとおりです。

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

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

上のコードによるサンプルグラフは以下のとおりです。

カテゴリごとに売上の棒グラフが作成されています。

Line

Lineもまたグラフのパーツとしては非常に基本的なものです。

サンプルコードは以下の通りとなります。

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

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

上のコードによるサンプルグラフは以下のとおりです。

Lineは主に時系列グラフなどで使われることが多く、このよう属性のアイテムごとの比較には使われません。

ところで、Lineを使った折れ線グラフでは、各値のところにポイントが欲しいことがあります。これは単純に同じデータから追加のレイヤを作成すればよいのですが、このようなケースでは「Point」を使っていきます。ただし、マークの「Point」はデフォルトでは半透明になっているので、encodingのopacityパラメータを調整しないと若干不自然です。以下のようなコードでPointをレイヤーで折れ線グラフに重ねて、データポイントを強調するグラフを描画できます。

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

muze.canvas()
.rows(["Total 売上"])
.columns(["カテゴリ"])
.data(data)
.layers([
    {
	      mark:"line",
    },
    {
	      mark:"point",
          encoding: {
            opacity:{
                value:1,
            },
          },
    },
])
.mount("#chart")

上のコードによるサンプルグラフは以下のとおりです。

Area

Areaを使ったグラフは、Line（折れ線）を使ったグラフの亜種です。

サンプルコードとしてはシンプルです。

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

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

上のコードによるサンプルグラフは以下のとおりです。

カテゴリごとにエリアを描いています。ただ、通常は折れ線グラフと同じく、時系列グラフで多用されます。

Tick

Tickは基本的には横長の棒ですが、性質的にはポイントに近い形です。ただし、スタートとエンドを設定できます。Tickを使ってリファレンスラインを書くことが可能です。

サンプルコードは以下のとおりです。

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

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

上のコードによるサンプルグラフは以下のとおりです。

目標値などをTickで描画すると、目標値と実績値など重ねて見やすいかと思います。

Arc

Arcは円グラフの素（もと）です。そのまま描画すると、単なる大きめのポイントになります。

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

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

上のサンプルコードによるグラフは以下のとおりです。

さすがにこれはちょっと使い道が思いつかないですよね・・・やはり円グラフとして書いた方が良いと思います。

実際に円グラフとして使う場合は、以下のようにencodingにangleとcolorを指定して使います。

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

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

上のサンプルコードによるグラフは以下のとおりです。実はこのタイプの単純な円グラフはThoughtSpotの標準グラフにはありません。

さらに応用すると、ドーナツチャートも書けます。

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

muze.canvas()
.rows([])
.columns([])
.data(data)
.layers([
    {
        mark:"arc",
        encoding:{
            angle:"Total 売上",
            color:"カテゴリ",
            radius: {
                range: function range(_range) {
                return [_range[0]+100, _range[1]];
                },
            },
        },
    },
])
.mount("#chart")

上のように、ドーナツチャートではradiusに指定が必要です。

ところで、円グラフの場合は、そのままencodingにテキストプロパティを設定すれば、値が表示されます。

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

muze.canvas()
.rows([])
.columns([])
.data(data)
.layers([
    {
        mark:"arc",
        encoding:{
            angle:"Total 売上",
            color:"カテゴリ",
            text:"Total 売上"
        }
    },
])
.mount("#chart")

上のサンプルコードによるグラフは以下のとおりです。

値の書式などはまた別途指定する必要があります（別途紹介したいと思います）。

Text

Textマークを使う場合は、encodingプロパティにも設定が必要です。

サンプルコードは以下のとおりです。

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

muze.canvas()
.rows(["Total 売上"])
.columns(["カテゴリ"])
.data(data)
.layers([
    {
        mark:"text",
        encoding:{
            text:"Total 売上"
        }
    },
])
.mount("#chart")

上のサンプルコードによるサンプルグラフは以下のとおりです。