Looker ビジュアリゼーション クックブックを最大限に活用する: デカルトグラフでの条件付き書式のカスタマイズ

特定の条件を満たす値を視覚的にハイライト表示することで、ユーザーはデータの傾向を迅速に特定できます。このパターンは、条件付き書式と呼ばれることもあります。

たとえば、このページの最大値、最小値、パーセンタイル値を色分けするの例にある可視化によって、ユーザーは最低販売月と最高売上月を簡単に特定できます。

Looker では、テキストと表グラフの可視化設定にある組み込みオプションを使用して、テキストや表グラフに条件付き書式を適用できます。座標グラフの場合は、グラフ構成エディタを使用してデータ値に条件付き書式を設定できます。

グラフ構成エディタでは、series formatters 属性を使用して、特定の条件を満たす値に条件付き書式を適用できます。適用できる条件付き書式のルールをいくつか紹介します。

  • この値は指定した値より大きいか、小さいか、または同じです。

    たとえば、100 より大きい数値に条件付き書式を適用するには、select: 'value > 100' を使用します。

  • 値は、系列の最小値または最大値です。

    たとえば、最大値に条件付き書式を適用するには、select: 'max' を使用します。

  • 値が指定されたパーセンタイルランク内にある。

    たとえば、上位 10 パーセンタイルの値に条件付き書式を適用するには、select: 'percent_rank >= 0.9' を使用します。

  • X 軸の値は指定された値と一致します。

    たとえば、X 軸の値が「コロンビア」の系列に条件付き書式を適用するには、select: name = Columbia を使用します。

この Cookbook では、次のチュートリアルを提供しています。

最大値、最小値、パーセンタイル値を色分けする

select 属性と style 属性を使用すると、デカルトグラフのデータの最大値と最小値の色、および指定したパーセンタイルに該当する値を指定できます。

材料

前提条件

条件付き形式でテーブル ビジュアリゼーションを作成するには、次のものが必要です。

例: 列の可視化

セールスチームは、1 年間の月ごとの売上傾向をすばやく特定したいと考えています。月別にグループ化された合計費用を可視化で表示できます。

条件付き書式を使用すると、特定の目標を満たす値をハイライト表示できるため、ユーザーがデータをより明確に把握できます。

この例では、営業チームが以下の値をハイライト表示したいと考えています。

  • [合計費用] の最小値がある列は赤色になります。
  • [合計費用] の最大値がある列は緑色になります。
  • 下位 30 パーセンタイルの [合計費用] の列はオレンジ色になります。
  • その他の列はすべてグレー表示されます。

この条件付き書式を座標グラフに適用する手順は次のとおりです。

  1. Explore でのデカルト可視化の表示、または Look やダッシュボードでのデカルト可視化の編集ができます。
  2. 可視化の [編集] メニューを開きます。
  3. [プロット] タブの [グラフ構成の編集] ボタンをクリックします。Looker で [グラフ構成の編集] ダイアログが表示されます。

  4. [グラフ構成（オーバーライド）] セクションを選択し、次の JSON を入力します。

    {
  series: [{
    color: 'gray',
    formatters: [{
        select: 'max',
        style: {
          color: 'green',
        }
      },
      {
        select: 'percent_rank <= 0.3',
        style: {
          color: 'orange'
        }
      },
      {
        select: 'min',
        style: {
          color: 'red'
        }
      },
    ]
  }]
}

  5. 変更を適用するには、[適用] をクリックします。

営業チームはどの月のパフォーマンスが低かったかをすばやく把握し、その月を調査して何が起こったのかを特定できるようになりました。

可視化をカスタマイズしたら、保存できます。Explore で可視化を表示した場合は、Explore を保存します。Look またはダッシュボードを編集した場合は、[保存] をクリックします。

例: 散布図の可視化

条件付き書式を散布図の可視化に適用するには、style.color 属性の代わりに style.marker.fillColor 属性と style.marker.lineColor 属性の色を指定します。

lineColor 属性は、散布図の各点の輪郭の色を設定します。fillColor 属性は、散布図の各点の内側の色を設定します。

前の例を変更する手順は次のとおりです。

  1. Explore で散布図の可視化を表示したり、Look またはダッシュボードで散布図の可視化を編集したりできます。
  2. 可視化の [編集] メニューを開きます。
  3. [プロット] タブの [グラフ構成の編集] ボタンをクリックします。Looker で [グラフ構成の編集] ダイアログが表示されます。

  4. [グラフ構成（オーバーライド）] セクションを選択し、次の JSON を入力します。

    {
  series: [{
    color: 'gray',
    formatters: [{
        select: 'max',
        style: {
          marker: {
            fillColor: 'green',
            lineColor: 'green'
          }
        }
      },
      {
        select: 'percent_rank <= 0.3',
        style: {
          marker: {
            fillColor: 'orange',
            lineColor: 'orange'
          }
        }
      },
      {
        select: 'min',
        style: {
          marker: {
            fillColor: 'red',
            lineColor: 'red'
          }
        }
      }
    ]
  }]
}

  5. [適用] をクリックして、変更を適用します。

出来上がった可視化では、最小値、最大値、下位 30% の値が書式設定ルールに沿って色付けされます。

可視化をカスタマイズしたら、保存できます。Explore で可視化を表示した場合は、Explore を保存します。Look またはダッシュボードを編集した場合は、[保存] をクリックします。

条件付き書式の条件を組み合わせる

select 属性で AND と OR を使用して、条件付き書式ルールで論理式を結合できます。

材料

前提条件

条件付き形式でテーブル ビジュアリゼーションを作成するには、次のものが必要です。

例

セールスチームは、特定の条件を満たす月をすばやく特定したいと考えています。月別にグループ化された合計費用を可視化で表示できます。

条件付き書式を使用すると、特定の目標を満たす値をハイライト表示できるため、ユーザーがデータをより明確に把握できます。

この例では、営業チームが以下の値をハイライト表示したいと考えています。

  • [合計費用] の値が $43,000～$45,000 である列は紫色で表示されます。
  • その他の列はすべてグレー表示されます。

この条件付き書式を座標グラフに適用する手順は次のとおりです。

  1. Explore でのデカルト可視化の表示、または Look やダッシュボードでのデカルト可視化の編集ができます。
  2. 可視化の [編集] メニューを開きます。
  3. [プロット] タブの [グラフ構成の編集] ボタンをクリックします。Looker で [グラフ構成の編集] ダイアログが表示されます。

  4. [グラフ構成（オーバーライド）] セクションを選択し、次の JSON を入力します。

    {
  series: [{
    color: 'gray',
    formatters: [{
        select: 'value >= 43000 AND value <= 45000',
        style: {
          color: 'purple',
        }
      },
    ]
  }]
}

  5. 変更を適用するには、[適用] をクリックします。

セールスチームは、3 月、4 月、9 月の収益が 43,000～45,000 ドルであることをすばやく把握し、それらの月に何が起こったのかを詳しく調査できます。

可視化をカスタマイズしたら、保存できます。Explore で可視化を表示した場合は、Explore を保存します。Look またはダッシュボードを編集した場合は、[保存] をクリックします。