私の場合...WOW2024 Week38
▼今回のお題
今回のお題は、過去のWeek34（データソースを2つ使った動作）とWeek7（パラメーターにデータを追加したり削除したりする）のテクニックを掛け合わせたような問題でした。
WOWを続けてやっていると、少しづつ引き出しが増えていって、徐々に（ほんとに徐々にですが）点と点がつながって線になるタイミングがあります。
少しでも多くの人にこの感覚を経験して欲しいと思い、今回も私の場合の手順をお伝えします。
今回は、繰り返し作業が多く少し複雑で長文になっています。うまく伝えられているかも自信がないのですが、最後までお付き合いいただけるとうれしいです。
毎回もお伝えしているとおり、これ以外にも、もっともっとスマートな手順があると思うので、ぜひTableau Publicでみなさんのダッシュボードを覗いてみることをおススメします。
以下、私の手順です。
1．全体像を把握する
要件をひと通り確認した後、出題者のVizを眺める＆ポチポチ触って必要な要素を洗い出します。
・同じデータを年でフィルターして2回読み込む→データソースフィルター
・ひとつのフィルターで2つの線グラフが動く→パラメーター！（Week34のテクニック？！）
・選択ボタンは押すたびに追加と削除を繰り返す→パラメーターの動作に計算式を使う！（Week7と同じ）
・選択ボタンの色は、選択されている＝緑、選択されていない＝グレー、に加えてすべて選択されていない＝緑、すべてグレーは存在しない→ボタンの色分けもちょっと工夫が必要そう
1．データを読み込む
そもそも今回は出題のページにデータへのリンクがありませんでした。
なので、過去のサンプルスーパーストアを使った週のデータを流用しました。ダウンロードするならこのデータで大丈夫です。
Tableauを立ち上げで、ダウンロードしたデータを読み込みます。
「データソース」の画面で右上にある「フィルター」の「追加」をクリックします。「データソースフィルターの編集」ポップアップ画面で「追加…」ボタンをクリックし、［Orde Date］を選択し「OK」をクリックします。
「フィールドのフィルター」で「年」を選択して「次へ」をクリック、「2023」にチェックを入れて「OK」をクリックします。
「データ ソース フィルターの編集」で2023年が保持されていることを確認し、「OK」をクリックします。
これで2023年のデータだけが読み込めました。
続いて2024年だけのデータを読み込みます。
そのまま「データソース」の画面でメニューバーの「データ」をクリックし「新しいデータソース」を選択します。
先ほどと同じデータを選択し、右上の「フィルター」の「追加」で同様に2024年のデータだけを読み込みます。
「シート1」に移動すると、左上の「データ」に同じ名前のデータが2つ並んでいると思います。
このままだとややこしいので、データ名を右クリックし「名前の変更」でそれぞれ「Sample ‐ Superstore_2023」と「Sample ‐ Superstore_2024」に変更します。
★今回は、2023年のデータと2024年のデータの両方で同じような作業を繰り返すので混乱します。今、どちらのデータを使っているかをしっかり認識して作業する必要があります★
2．線グラフを作る
2023年分
左上の「データ」で「Sample ‐ Superstore_2023」を選択します。
［Order Date］を「列」に入れ、右クリックをして「週数」（連続・緑色）を選択します。「行」に［Sales］を入れます（自動で合計されます）。
これで線グラフは完成です。続いて見た目を整えます。
縦軸（Y軸）をダブルクリックし、「軸の編集」で「軸のタイトル」にある「Sales」を削除して空欄にします。
続けて縦軸（Y軸）で今度は右クリックし、「書式設定」を選択します。
画面右側に表示される「書式設定」メニューで表示が”「＄」＋数値”となるように「スケール」の「数値」を設定します。
・数値（カスタム）
・小数点：0（ゼロ）
・プレフィックス：＄
・千の桁区切りを含めるチェック
横軸（X軸）をダブルクリックし、Y軸同様に「軸のタイトル」を削除します。
よく見ると日付の表示がお手本のVizと違うので、日付の書式を変更します。
「列」にある［週（Orde Date）］を右クリックして、「書式設定」を選びます。
画面右側に表示される「書式設定」メニューで「スケール」の「日付」を設定します。
・日付：カスタム
・書式設定：mmm dd（日本語：9月 20、英語：Sep 20）
「マーク」の「ツールヒント」をクリックしてツールヒントを整えます。
Week of <週(Order Date)>
Sales: <合計(Sales)>線をすべて消します。
メニューバーの「書式設定」をクリックし「枠線」を選びます。「行の境界線」と「列の境界線」をすべて「なし」にします。
「線」（右端の三本線のマーク）で「グリッド線」「ゼロ ライン」「軸線」をすべて「なし」にします。
最後にシート名を「2023 Sales」に変更します。
2024年分
左上のデータで「Sample ‐ Superstore_2024」を選択します。
2023年と同様に線グラフを作成し、シート名を「2024 Sales」に変更します。
3．選択ボタンをつくる
「Category」の選択ボタン
選択ボタンは標準機能としては具備されていないので、棒グラフを流用（加工？）することで作ります。
左上の「データ」で「Sample ‐ Superstore_2024」を選択します。
新しいシートを開き、「列」をダブルクリックします。すると、直接計算式が記入できるようになるので以下計算式を記入します。
※「1」の量を持ったダミーデータ。なぜか”MIN”が基本なんですが、”MAX”でも”AVG”でも同じです。（きっと…）
MIN(1）行に［Category］を入れます。
「マーク」で「棒」を選び、「ラベル」に［Category］を入れます。
表示を「ビュー全体」にしていない場合、ラベルがすべて表示されない場合があるので「ビュー全体」にしておきます。
「マーク」の「ラベル」をクリックし、「配置」で「水平方向」と「垂直方向」を「中央／中」（3つ並んだ真ん中）にします。
横軸をダブルクリックし軸の範囲を固定にします。
・カスタム
・開始値：0、終了値：1
同じく横軸を右クリックして「ヘッダーの表示」のチェックを外します。
「行」にある［Category］を右クリックし、「ヘッダーの表示」のチェックを外します。
これで見た目がボタンになったと思います。
最後に、「書式設定」の「枠線」と「線」で線をすべて消します。
シート名を「Category」に変更します。
「Region」「Ship Mode」の選択ボタン
それぞれ新しいシートで同様に選択ボタンを作成し、シート名を「Region」「Ship Mode」とします。
4．選択ボタンと線グラフを連動させる準備をする
選択ボタンをソースとしたパラメーターを作り、そのパラメーターを使ってフィルターすることで、選択ボタンと線グラフを連動させます。
「Category」「Region」「Ship Mode」それぞれに同じ作業が必要です。
「Category」を代表選手として手順を記載します。
「Category」シートを開きます。
パラメーターを作る
まずは、パラメーターを作ります。
左上の「データ」で「Sample ‐ Superstore_2024」を選択します。
新しくパラメーターを作り、［P_Category］と名付けます。
・データ型：文字列
・現在の値：空白
・許容値：すべて
パラメーター情報用の計算式を作る
続いて、選択ボタンの動きと連動してパラメーター情報を変化させる計算式を作ります。
今回の選択ボタンの挙動は、クリックするごとに、1回目はフィルターに追加、2回目はフィルターから削除、3回目はフィルターに追加・・・を繰り返します。
この動きを計算式で表現していくのですが、ここが今回のお題のポイントです。
パラメーター情報は「家具」「事務用品」（今回のお題だと”Furniture”や”Office Supplies”）とデフォルトのデータを単独で使う場合多いのですが、今回はここが違います。
それぞれのカテゴリ名の後ろに「|」をつけたものを組み合わせて使います。
※「|」は区切りの意味合い
（例）Fureniture|、Office Supplies|、Furniture|Technology|
新しい計算式を作り、［Category for P_2024］と名前をつけます。
//Category for P_2024
IF CONTAINS ( [P_Category] , [Category] )
THEN REPLACE ( [P_Category] , [Category] + '|' , '' )
ELSE [P_Category] + [Category] + '|'
ENDそれぞれの行は以下のような動きを意味しています。
【1行目】パラメーターの中に選んだカテゴリー名が含まれている場合
【2行名】パラメーターにある「カテゴリー名＋|」を空白に置き換える＝削除
【3行目】それ以外の場合（含まれていない場合）今あるパラメーター情報に「カテゴリー名＋|」を追加する
実際のパラメーターに書き込まれる情報はこんな感じです。
どのカテゴリー名も1回目のクリックではパラメーターに追加して、2回目のクリックでは削除する動きを、パラメーターに同じカテゴリー名が存在するかどうかをみて追加したり削除したりする、という事象に組み立てなおして計算式を作っています。
ここ、すごくややこしいのですが、完全に理解できなくてもとにかく真似をしてやってみてください。写経（私はこう呼んでますｗ）は、WOWでテクニックを習得するためのおススメの方法です。
［Category for P_2024］を「マーク」の「詳細」に入れます。
同じ計算式を2023年データで作る
これはコピー＆貼り付けで簡単にできます。
［Category for P_2024］を右クリックし、コピーを選択します。
左上の「データ」で「Sample ‐ Superstore_2023」を選択します。
検索窓の右横にある「▼」をクリックして「貼り付け」を選択します。「テーブルに［Category for P_2024］がコピーされるので、名前を［Category for P_2023］に変更します。
［Category for P_2023］も同様に「Category」シートの「マーク」の「詳細」に入れます。
色分け用の計算式を作る
選択ボタンの色には以下3つのパターンです。
・選択されているカテゴリー名：緑
・選択されていないカテゴリー名：グレー
・すべて選択されていない：すべてのカテゴリー名が緑
※すべてのカテゴリー名がグレーのパターンはなし
新しい計算式を作り、［Select_Category_2024］と名前をつけます。
//Select_Category_2024
[P_Category] = ''
or
CONTAINS ( [P_Category] , [Category] )選択されている＝緑色になるパターンだけを指定して、真偽のシンプルな形で判別できるようにします。
・選択されている＝［P_Categorｙ］にカテゴリー名がある
・すべて選択されていない＝［P_Category］は空白
選択ボタンを整える
［Select_Category_2024］を「マーク」の「色」に入れます。
［P_Category］が空白のため「真」しか表示されないと思います。なので、［P_Category］を右クリックして「パラメーターの表示」を選択します。
右側にパラメーターが表示されるので、「Furniture|」を記入します。
真偽の両方が表示されるので、それぞれ色を設定します。
「マーク」の「ラベル」でフォントサイズや太さを調整します。
「マーク」の「サイズ」でボタン間の空白が少し狭くなるよう調整します。
「マーク」の「ツールヒント」で「ツールヒントの表示」のチェックを外します。
タイトルをダブルクリックして、タイトルがページの真ん中にくるようにします。
フィルターを設定する
「2024 Sales」シートを開き［Select_Category_2024］を「フィルター」に入れます。「真」にチェックを入れて「OK」をクリックします。
2023年の線グラフにも同じ設定をします。
「2024 Sales」シートで［Select_Category_2024］を右クリックし、「コピー」を選択します。
左上の「データ」で「Sample ‐ Superstore_2023」を選択します。
「▼」をクリックして「貼り付け」を選択し、同じ計算式を2023年データに作ります。名前を［Select_Category_2023］に変更します。
「2023 Sales」シートを開き［Select_Category_2023］を「フィルター」に入れます。「真」にチェックを入れて「OK」をクリックします。
これで、「Category」について選択ボタンと線グラフを連動させる準備が整いました。
既にお腹いっぱい感満載ですが、これと同じ手順を「Region」と「Ship Mode」についても行います。
計算式やフィールド名はすべて「Category」を「Region」「Ship Mode」に置き換えてください。
パラメーター名
［P_Region」［P_Ship Mode］
パラメーター情報用の計算式
//Region for P_202X
IF CONTAINS ( [P_Region] , [Region] )
THEN REPLACE ( [P_Region] , [Region] + '|' , '' )
ELSE [P_Region] + [Region] + '|'
END//Ship Mode for P_202X
IF CONTAINS ( [P_Ship Mode] , [Ship Mode] )
THEN REPLACE ( [P_Ship Mode] , [Ship Mode] + '|' , '' )
ELSE [P_Ship Mode] + [Ship Mode] + '|'
END色分け用の計算式
//Select_Region_202X
[P_Region] = ''
or
CONTAINS ( [P_Region] , [Region] )//Select_Ship Mode_2024
[P_Ship Mode] = ''
or
CONTAINS ( [P_Ship Mode] , [Ship Mode] )5．ダッシュボードの作成
まずは、「サイズ」で「固定サイズ」を選び、要件どおり幅1200×高さ800にします。
配置する
今回のダッシュボードは、上にタイトル、その下にセンタボタンと線グラフが縦に並んでいます。
「オブジェクト」から「テキスト」を入れてタイトルを記入します。
「テキスト」の下に「垂直コンテナ」を入れ、［Catgory］［Region］［Ship Mode］の順番に縦にならべます。
次に「垂直コンテナ」の横にもうひとつ「垂直コンテナ」を入れて、［2023 Sales］［2024 Sales］を縦にならべます。
※ひとつの「垂直コンテナ」に配置することで、コンテナ内で自動的に適度な高さに揃えてくれるので、少し扱いにくいところはありますがコンテナはおススメです。
右側に自動で配置される凡例等のコンテナを削除します。
選択ボタンと線グラフの幅を整えます。
背景色をつける
よく見ると、選択ボタンの背景が薄いグレーになっています。
選択ボタンが入っている「垂直コンテナ」をコンテナごと選択します。（青線の囲み）
左側メニューの「レイアウト」で「バックグラウンド」をクリックして薄いグレーを選びます。
この状態だと、ボタンとボタンの間が白色になったままなので、それぞれの選択ボタンシートの背景を消します。
Category選択ボタンをクリックして選択します。（グレーの囲み）上のメニューバーで「書式設定」をクリックして「網掛け」を選択します。
左側に「網掛けの書式設定」が表示されるので「ワークシート」をクリックして「なし」を選択します。（デフォルトでは白色）
Region選択ボタン、Ship Mode選択ボタンも同様にシートの背景をなしにします。
パラメーターを設定する
4で準備した、選択ボタンとパラメーター用の計算式をパラメーターにくくりつけています。
まずは、「Category」選択ボタンです。
上のメニューバーの「ダッシュボード」をクリックして「アクション」を選択します。「アクションの追加」ボタンをクリックし「パラメーターの変更」をクリックします。
以下のとおり設定します。
名前：Category_2023
ソースシート：Category
アクションの実行対象：選択
ターゲットパラメーター：P_Category
選択項目をクリアした結果：現在の値を保持
ソースフィールド：Category for P_2023
計算：なし
もう一度、「アクションの追加」ボタンをクリックし「パラメーターの変更」をクリックします。同じように2024年分も設定します。
名前：Category_2024
ソースシート：Category
アクションの実行対象：選択
ターゲットパラメーター：P_Category
選択項目をクリアした結果：現在の値を保持
ソースフィールド：Category for P_2024
計算：なし
「Region」「Ship Mode」選択ボタンについても、それぞれ2023年分と2024年分の設定をします。
合計6つのパラメーターアクションができます。
＜Regionの場合＞
名前：Region_202X
ソースシート：Region
アクションの実行対象：選択
ターゲットパラメーター：P_Region
選択項目をクリアした結果：現在の値を保持
ソースフィールド：Region for P_202X
計算：なし
＜Ship Modeの場合＞
名前：Ship Mode_202X
ソースシート：Ship Mode
アクションの実行対象：選択
ターゲットパラメーター：P_Ship Mode
選択項目をクリアした結果：現在の値を保持
ソースフィールド：Ship Mode for P_202X
計算：なし
最後に、シート名を「WOW2024 W38」に変更して完成です！！
随分長い手順になってしまいました…
最後まで読んでいただきありがとうございました。
Tableau Publicにパブリッシュしたら、WOWのトラッカーに登録するのも忘れずに！
▼WOWトラッカー
https://workout-wednesday.com/track-submission/