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

muze.canvas()
.rows(["Total sales"])
.columns(["Total profit"])
.detail(["RecordID"])
.layers([
    {
        mark:"point"
    }
])
.data(data)
.mount("#chart")

ここでは、muze.canvas()オブジェクトに対して各種設定を行っています。

.rows()メソッドには、Y軸に表示したいメジャー（ここでは"Total sales"）を指定します
.columns()メソッドには、X軸に表示したいメジャー（ここでは"Total profit"）を指定します
.detail()メソッドには、各ポイントを一意に識別するための列（ここでは"RecordID"）を設定します
.layers()メソッドでは、「mark」に「"point"」を指定することで、散布図として描画しています

このコードを実行することで、以下のような散布図が表示されます。

.detail()メソッドは、ThoughtSpotの散布図（デフォルト）における「スライス」のような役割を持つ設定です。

これを設定しない場合、各データポイントが一意に識別されず、以下のように複数のデータが１つのポイントに集約されてしまいます。

散布図のカスタマイズ

次に、作成した散布図をカスタマイズし、見た目を調整していきます。

マーカーの色分け

カテゴリごとに色をつけるには、.layers()メソッドを修正します。

.layers([
    {
        mark:"point",
        encoding:{
            color:"region"
        }
    }
])

このように.layers()メソッド内の、encodingキーにオブジェクトを設定します。colorにカテゴリ列（この例では「region」）を指定することで、地域ごとにマーカーの色分けができます。

ちなみにメジャー項目も色分けに使用することができます。

例えば、「score」という0~1の連続値を「color」に指定すると、以下のようにスコアの値に応じてグラデーションで色分けされた散布図が表示されます。

カテゴリ別にマーカーの形状を変更

マーカーの形状は、カテゴリ列を使って変更することができます。.layers()メソッドを修正します。

.layers([
    {
        mark:"point",
        encoding:{
            color:"region",
            shape:"category"  // ← 新しく追加
        }
    }
])

shapeキーに「category」というカテゴリ列を指定しています。この設定により、「category」の値に応じて、マーカーの形状が自動的に変わります。

マーカーにラベルを表示

散布図のマーカーに、任意のラベルを表示することができます。こちらも、.layersメソッドを修正します。

.layers([
    {
        mark:"point",
        encoding:{
            color:"region",
            shape:"category",
            text:"region"  // ← 新しく追加
        }
    }
])

textキーに「region」というカテゴリ列を追加しています。これにより、「region」の値がマーカーのラベルとして表示されます。