【Tableau】マークの形状を利用して、利益の昨対比の評価を天気マークで表現する方法

# 1.はじめに
会社のキックオフ資料や新聞などの業界天気図では業績や動向をの良し悪しを天気マークを利用して表現しています。本記事では天気マークでの良し悪しの表現をTableauでどのように行うかを記載します。Tableauのマークの形状を用いて表示しますので、**まだマークの形状を使ったことがない方、今ぱっとやり方をイメージできなかった方はぜひ本記事を読んでみてください。**

# 2.概要
**マークの形状は、対象データの種類に応じてマークの形を指定できる機能です。** 指定できるマークの形状は、デフォルトだけでも11種類(Tableau Destkop：2020.3.4の場合)あります。マークの形状は追加することもできます。追加方法は、「マイ Tableau リポジトリ＞形状」の配下に「形状の名称のフォルダ（例：Weather）」を作成してその中に画像を入れ、「形状の再読み込み」をクリックすれば追加されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/adac32bf-f279-1889-c09b-fb2c4175c1ef.png" width=50%>

# 3.使い方
マークの形状の使用例として、利益の昨対比に応じて天気マークを表示するVizを作成します。データセットは「サンプル - スーパーストア.xls」を用います。サンプル - スーパーストアのデータということで、今回は**カテゴリごとに利益の昨対比の評価**をしてみます。**天気のマークの表示は以下のルール**とします。
　・利益の昨対比が**110%以上**であれば**晴れマーク**とする
　・利益の昨対比が**90%以上、110%未満**であれば**曇りマーク**とする
　・利益の昨対比が**90%未満**であれば**雨マーク**とする
完成後のVizは以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/7d15ebf8-e59a-feef-4c45-9b2f776ef655.png)



## ①データを用意する
カテゴリごと、年ごとの利益のデータを用意します。Tableauの列にカテゴリ、オーダー日(年)、行に利益を2つ設定します。利益を2つ設定した理由は、最終的には2つのグラフを1つに重ねて表示するためです。1つ目の利益の線グラフはそのまま線グラフとして利用します。2つ目のグラフはお天気マークを表示するために用います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/c1746f28-4a64-5db3-9e78-a3383ade7fd7.png)
## ②計算フィールドを作成する
今回は2つの計算フィールドを作成します。1つ目は昨対比を算出する計算フィールド、2つ目は昨対比を評価する計算フィールドを作ります。

### ②-1 昨対比を算出する計算フィールドを作成する
メジャーの利益のメニューから作成を選択し、下記の通り入力する。
**計算フィールド名：利益の昨対比**

```SQL:計算フィールドの式
SUM([利益]) / LOOKUP(SUM([利益]), -1 )
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/42493d76-df7d-a243-2be7-7f1fcc96c82b.png)
式では「対象の年の利益合計 / 対象の昨年の利益合計」をしています。「対象の昨年の利益合計」の**昨年**を指定するために式の中でLOOKUP関数を利用しています。LOOKUP関数の詳細な説明は省略しますが、線グラフの列にオーダー日(年)をしているため、対象の年(n年)-1で昨年(n-1年)となるようにLOOKUP関数の第二引数に**-1**を設定しています。

### ②-2 昨対比を評価する計算フィールドを作成する
メジャーの利益の昨対比のメニューから作成を選択し、下記の通り入力する。
**計算フィールド名：利益の昨対比の評価**

```SQL:計算フィールドの式
IF     ISNULL([利益の昨対比]) THEN "0"
ELSEIF [利益の昨対比] >= 1.1  THEN "1"
ELSEIF [利益の昨対比] >= 0.9  THEN "2"
ELSE "3" END
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/aeeb37f0-2c50-0d29-dfde-babb81476f5e.png)
## ③マークの形状を設定する
Vizのマークのカード内の「合計(利益)(2)」のコンボボックスを**自動**から**形状**に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/a92f2ff8-d911-17b1-04c3-da4e1cc8cbdc.png)
変更するとマークのカード内に「形状」が表示され、2つ目のグラフの線が消えて形状（デフォルトは○）に変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/62ca87e6-c550-c371-c861-176ff19a9600.png)
次にマークのカード内に新たに表示された「形状」に、作成した「利益の昨対比の評価」をドラッグ&ドロップします。そうすると、2つ目のグラフの形状が○から4種類の形状に変わります。4種類となる理由は、「利益の昨対比の評価」のデータの種類が4種類だからです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/b59e0c69-7b48-3c92-ae8c-bacfa884128c.png)
ここで「利益の昨対比の評価」の表計算の設定を変更します（形状の設定とは関係ありません）。マークのカードに設定した「利益の昨対比の評価」のメニューの「表計算の編集」を選択します。表計算の編集画面内の「ペイン(横)」を選択します。この設定をしないと、昨対比計算のLOOKUP関数がカテゴリを跨いで誤ったデータ参照をしてしまうためです。具体的には、左から2つ目と3つ目のカテゴリの最初(一番左,2017)の年が昨年の値を取得する時に1つ目、2つ目のカテゴリの最後の年(2020年)の値を取得してしまいます。それを防ぐため、表計算をペイン(横)を選択し、今回でいえば自分のカテゴリ内だけで表計算するようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/2ac38a85-0753-5ac8-8ff5-0c0e72689c2b.png)
最後に形状の種類を選び、各データに対応する形状を設定します。設定方法は下記の通り設定する。
　・マークのカード内の形状を選択する
　・形状パレットの選択で「天候」を選択する
　・データ項目の選択で形状の設定をしたいデータ(今回は1〜3という数字)を1つ選択する
　・形状パレットの画像を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/768b1ae9-9dd0-4a0a-c76b-70c926f1fe41.png)
形状設定後、以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/bff0131b-d153-8d91-aa81-f7282b586fae.png)
## ④2つのグラフを二重軸を用いて1つのグラフにする
行の2つ目の利益のメニューから二重軸を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/fde95d6d-c1e2-2f1f-e239-93479ab13120.png)
グラフの線と形状の位置がズレているため、右側の軸を右クリックして「軸の同期」を選択します。右の軸表示（ヘッダー）は不要なため、クリックしてチェックを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/9e6eb7b2-6f5d-25ab-9d7f-bce077f78da8.png)
これで概ね作りたいグラフはできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/dd5d87ab-bb8f-050c-bc06-feddb30b9094.png)
あとは、Vizの見栄えを微調整すれば完成です。Vizの用途やメッセージに応じて調整するのがよいですが、今回は以下の調整しました。
　・曇りと雨のマークの青色と線の青色が近いので、線の青色を薄い青色にし透過度を75%に変更する
　・天気マークが目立つようにサイズを大きくする
　・カード「集計(利益の昨対比の評価)」を非表示にする
　・キャプションに天気の凡例を記載する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989891/304d4476-9506-b3d5-9ac4-a622a1f85690.png)


# 4.最後に
ここまで読んで下さった方、ありがとうございます。少しでもどなたかのViz作成に役立てば幸いです。今回は形状を用いた天気マークでの表現を紹介しました。形状での表現の良いところはデータの解釈を表現している点であると思います。データを表やグラフで表示しただけの場合、Vizを見た人（読み手）がデータの値やグラフの形から解釈をして良し悪しの評価をする必要があります。解釈に時間がかかるVizはいずれ誰にも見られなくなります。今回利用した天気マークであればぱっと見ただけで、雨の箇所は問題がありそうなため対処を検討しようと考えたり、晴れの箇所の好調要因を分析しようなどとNextアクションの検討・実行に頭を使えるようになります。そのため、Vizの表現の工夫の際にマークの形状での表現も選択肢の1つにあると良いかと思います。**もしも、本記事が参考になったという方がいらっしゃいましたら、いいねをクリックしていただけましたら、うれしいです。**

# 5.参考ページ
Tableau公式：ビュー内のマークのタイプを変更する - 形状マーク
https://help.tableau.com/current/pro/desktop/ja-jp/viewparts_marks_marktypes.htm#ShapeMark