こんにちは、廣本です🍫。
そろそろバレンタインデーということで、今回はTableauで板チョコに見える「チョコレートチャート」をつくってみました。
完成イメージ
まずは板チョコのイラストを観察してみましょう。下記はフリー素材で有名な『いらすとや』さんの板チョコのイラストです。
板チョコのイラストを観察してみると、大きな長方形の上に小さな長方形が並んでいます。そして小さな長方形の側面は、立体的に見えるよう、やや明るい色と暗い色になっています。
分かりやすいように色分けすると、小さな長方形は下記のような5面×3色で構成されています。この小さな長方形をつくり、いくつか縦横に並べることで、チョコレートのようなグラフをつくることができそうです。
「パス」の活用
こうした図形をTableauで表現する際に活用できるのが、「パス」です。パス（Path）は道筋や経路を意味する英語で、Tableauのマーク内にある「パス」という項目を設定することで、線をつなぐ順番を定義できます。
線グラフは通常、時系列グラフで使用されることが一般的ですが、「パス」項目を定義することで様々な表現を作成することができます。
例えば、カテゴリ別の年次推移グラフを作成すると以下のようになります。
ここで[カテゴリ]をマーク内の「パス」に追加すると、以下の表現に変わります。この場合、3つの[カテゴリ]を線でつなぐという定義になるため、それぞれの[年]内にある[カテゴリ]が1本の線でつながるようになります。
今度は[合計売上]を「パス」に追加してみると、以下の表現に変わります。この場合、それぞれの[カテゴリ]内の[合計売上]が小さいものから順番に線でつなぐという定義になるため、テクノロジーと事務用品は2023年から線が開始されています。
このように、「パス」を活用することで線をつなぐ順番を定義することができます。
ちなみに「パス」は線グラフだけでなく、多角形グラフでも設定することができます。多角形グラフでは、つないだ線で囲われる部分を塗りつぶして表現することができます。
一筆書きの図形は、この「パス」を活用することで作成が可能です。
では、チョコレートチャートの具体的なつくり方を考えていきましょう。
チョコレートチャートのつくり方
では、この5面×3色で構成される小さな長方形をTableauで作成していきましょう。
データ準備
まずは、この図形を一筆書きで書くための座標データを用意します。
Id列は座標の点をつなぐ順番を意味し、X列はX座標の値、Y列はY座標の値です。Shapeは面を意味し、色分けに使用するために作成しました。
| Id | X | Y | Shape |
|---|---|---|---|
| 1 | 0 | 1 | 1 |
| 2 | 0 | 0 | 1 |
| 3 | 2 | 0 | 1 |
| 4 | 2 | 1 | 1 |
| 5 | 0 | 1 | 1 |
| 6 | 0 | 1 | 2 |
| 7 | -1 | 2 | 2 |
| 8 | 3 | 2 | 2 |
| 9 | 2 | 1 | 2 |
| 10 | 2 | 1 | 3 |
| 11 | 3 | 2 | 3 |
| 12 | 3 | -1 | 3 |
| 13 | 2 | 0 | 3 |
| 14 | 2 | 0 | 4 |
| 15 | 0 | 0 | 4 |
| 16 | -1 | -1 | 4 |
| 17 | 3 | -1 | 4 |
| 18 | 3 | -1 | 5 |
| 19 | -1 | -1 | 5 |
| 20 | -1 | 2 | 5 |
下記のように各座標をどの順番でつなぐかをイメージして、データを作成します。
グラフの作成
上記のデータを使用して、実際にグラフを作成してみましょう。
- 列にディメンション化した[X]、行に同じくディメンション化した[Y]を配置
- グラフの種類を「多角形」に設定
- マーク内で[Shape]を色、[Id]を「パス」に設定
- 各[Shape]とワークシートの背景の色を設定する
すると下記のような表現をつくることができます。
グラフの作成（発展）
さらに板チョコに近づけるため、この図形を横に5個、縦に4個並べてみましょう。
まずは下記のデータを追加で用意します。
そして先ほどのデータとクロス結合を行います。クロス結合とは1つの行に対して複数の行を紐づける結合方法になります。今回は座標のデータのそれぞれの行に対して、Path用の20行のデータをすべて紐づけます。座標のデータの行数が20倍になりますが、この処理を行うことで、同じ形の図形を20個作成できるようになります。
| Path |
|---|
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 |
| 14 |
| 15 |
| 16 |
| 17 |
| 18 |
| 19 |
| 20 |
結合後のテーブルイメージ
| Id | X | Y | Shape | Path |
|---|---|---|---|---|
| 1 | 0 | 1 | 1 | 1 |
| 1 | 0 | 1 | 1 | 2 |
| 1 | 0 | 1 | 1 | 3 |
| 1 | 0 | 1 | 1 | 4 |
| 1 | 0 | 1 | 1 | 5 |
| 1 | 0 | 1 | 1 | 6 |
| 1 | 0 | 1 | 1 | 7 |
| 1 | 0 | 1 | 1 | 8 |
| 1 | 0 | 1 | 1 | 9 |
| 1 | 0 | 1 | 1 | 10 |
| 1 | 0 | 1 | 1 | 11 |
| 1 | 0 | 1 | 1 | 12 |
| 1 | 0 | 1 | 1 | 13 |
| 1 | 0 | 1 | 1 | 14 |
| 1 | 0 | 1 | 1 | 15 |
| 1 | 0 | 1 | 1 | 16 |
| 1 | 0 | 1 | 1 | 17 |
| 1 | 0 | 1 | 1 | 18 |
| 1 | 0 | 1 | 1 | 19 |
| 1 | 0 | 1 | 1 | 20 |
| … | … | … | … | … |
そしてグラフ作成の段階で、図形を5×4の数で並べるため、下記の計算式を作成します。
横
(INDEX()-1)%5
縦
INT((INDEX()-1)/5)
INDEX()は連番を振る表計算関数です。その値を5で割ったときの余りの数と商を計算し、位置を定義します。
そして、下記の手順でグラフを作成します。
- マークの詳細に[Path]を追加
- 列に不連続にした[横]、行に不連続にした[縦]を配置
- [横]と[縦]の表計算の使用で、[Path]を選択
すると、板チョコのように並べることができます。
まとめ
今回は「パス」を活用して、チョコレートチャートを作成してみました。
ぜひみなさんもお試しください！
この記事を書いた人
