WorkoutWednesday2019week09 - Remove the Scroll bar

<img width="1238" alt="Screen Shot 2019-03-02 at 14.36.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/fbba4070-21f1-40d1-6b95-9631a307f223.png">

# 今週のワークアウト概要
http://www.workout-wednesday.com/2019-week-9/
![xDashboard-1-1.png.pagespeed.ic.mRQ44J39qd.png](https://qiita-image-store.s3.amazonaws.com/0/200471/ad0cb12e-54e9-dc62-ddb4-7370d3da17a0.png)
https://tabsoft.co/2GRw72Z

今週はスクロールバーの代わりに10個ずつ表示を順順に切り替えていくVIZ。ランキングに応じたグルーピングと軸の固定が肝になります。

## 要件
- ダッシュボードサイズは 1000px x 600px
- Create a visualization with bar charts that show total sales, total profit, and total quantity by city-state (See below for state abbrevation calculation). Sort by sales.
- 合計売上、合計利益、合計数量を表す棒グラフをcity-state（州の省略形を作る計算式をこの後に記載7えるので参考に）ごとに作成し、売上でソートする。
- cityを10個ずつのグループに分ける計算式を作る。グループの名前は「1−10」、「11−20」のようにランキングを元につける。
- 棒グラフの長さは最大値に対する割合になるようにする。ただし軸の固定は使わない。
- 利益にのみゼロ線を引く
- フォントサイズは11、棒グラフの色は#ED7470

```
CASE [State]
WHEN "Alabama" THEN "AL"
WHEN "Alaska" THEN "AK"
WHEN "Arkansas" THEN "AR"
WHEN "Arizona" THEN "AZ"
WHEN "California" THEN "CA"
WHEN "Colorado" THEN "CO"
WHEN "Connecticut" THEN "CT"
WHEN  "Delaware" THEN "DE"
WHEN "District of Columbia" THEN "DC"
WHEN "Florida" THEN "FL"
WHEN "Georgia" THEN "GA"
WHEN "Idaho" THEN "ID"
WHEN "Illinois" THEN "IL"
WHEN "Indiana" THEN "IN"
WHEN "Iowa" THEN "IA"
WHEN "Kansas" THEN "KS"
WHEN "Kentucky" THEN "KY"
WHEN  "Louisiana" THEN "LA"
WHEN "Maine" THEN "ME"
WHEN "Maryland" THEN "MD"
WHEN "Massachusetts" THEN "MA"
WHEN "Michigan" THEN "MI"
WHEN "Minnesota" THEN "MN"
WHEN "Mississippi" THEN "MS"
WHEN "Missouri" THEN "MO"
WHEN "Montana" THEN "MT"
WHEN "Nebraska" THEN "NE"
WHEN "Nevada" THEN "NV"
WHEN "New Hampshire"	THEN "NH"
WHEN "New Jersey" THEN "NJ"
WHEN "New Mexico" THEN "NM"
WHEN "New York" THEN "NY"
WHEN "North Carolina" THEN "NC"	
WHEN "North Dakota" THEN "ND"
WHEN "Ohio" THEN "OH"
WHEN "Oklahoma" THEN "OK"	
WHEN "Oregon" THEN "OR"
WHEN "Pennsylvania" THEN "PA"
WHEN "Rhode Island" THEN "RI"
WHEN "South Carolina" THEN "SC"
WHEN "South Dakota" THEN "SD"
WHEN "Tennessee" THEN "TN"
WHEN "Texas" THEN "TX"
WHEN "Utah" THEN "UT"
WHEN "Vermont" THEN "VT"
WHEN "Virginia" THEN "VA"
WHEN "Washington" THEN "WA"
WHEN "West Virginia" THEN "WV"
WHEN "Wisconsin" THEN "WI"
WHEN "Wyoming" THEN "WY"
END
```

## データ
[サンプルスーパーストア](https://data.world/stanke/sample-superstore-2018/workspace/file?filename=Sample+-+Superstore.xls)

## シェア
終わったらTwitterで「#WorkoutWednesday2019」タグをつけてシェアしよう。
@AnnUJackson, @LukeStanke, @lorna_eden, @curtisharris_をタグづけることも忘れずに。

# レシピ
## City-Stateフィールドの作成
今期は「[都市名] ,[州名(省略形)]」という形式で都市の名前を表示する必要があ流ようです。そこで、まずは上述の計算式で省略形の州名フィールドを作ります。
<img width="655" alt="Screen Shot 2019-03-03 at 6.01.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/fb40129a-fdd0-2937-926b-a7b8c86ffbf7.png">

次にCityと今作ったState(Abbr)をくっつけたフィールドを作ります。Tableauの機能で結合フィールドを作る方法もあるのですが、あとあと困ったことになるので今回はこれで作ります。時間があればその辺もまとめます。
<img width="640" alt="Screen Shot 2019-03-03 at 7.13.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/18e4b4ef-452d-367a-1dba-ea5f8a87f36e.png">

## まずは基本的なVIZを作成
「City-State」をRowsに、「Sales」、「Profit」、「Quantity」をColumnsに入れます。スクショの赤字のボタンを押せばSalesの順にソートされます。
<img width="1440" alt="Screen Shot 2019-03-03 at 7.09.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/f276c863-007c-f8e9-6324-d939425c2421.png">

## ランキンググループの作成
City-Stateを「1-10」、「11-20」、「21-30」...といったグループに分ける必要があるのでそれ用のフィールドを作ります。最初はかっこいい方法が浮かばなくて以下のようなフィールドを頑張って作りました。
<img width="631" alt="Screen Shot 2019-03-03 at 6.45.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/308c5090-2c24-d628-4ccf-66846a1fec8a.png">

しかしINDEX()関数を使うとこんな面倒からは解放されます。ということをMuku Inoyamaさんのブックで勉強しました。
https://public.tableau.com/profile/miki.inoyama#!/vizhome/WOW_W0920190227CanYouRemovetheScrollBar/1

INDEX()関数は表計算関数の一つで、表計算における計算の順序を返してくれる関数です。small multiple（[例えばこんなの](https://tabsoft.co/2VAc1xr)）を作るときなんかにもとても便利な関数です。

丁寧に見ていきます。

Rowsに「City-State」を入れて、Columnsをダブルクリックして直接「INDEX()」と入れて見てください。Text Labelも表示すると以下の画面になります。これはCity-Stateの並び順に番号がついている状態です。
<img width="1440" alt="Screen Shot 2019-03-03 at 7.14.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/fd48d764-0db4-b378-321a-9f0a7c24cf12.png">

INDEX()のピルを右クリックしてEdit Table Calculationを選択。
<img width="330" alt="Screen Shot 2019-03-03 at 7.15.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/cca6ba77-01bb-4141-5237-48155540e8f7.png">

するとこんな画面が出てきます。Table(down)なのでVIZ上にある全てのマークに対して上から順に番号をつけている状態です。
<img width="331" alt="Screen Shot 2019-03-03 at 7.15.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/5146c0ae-73b8-22f6-5558-a6a0c48d64ea.png">

一度閉じてColumnsにSalesを入れてソートして見ましょう。以下の通り、並び順は変わりましたがINDEX()は表示されている順番で番号をつけているのでやはり上から順に1,2,3...とついています。この数字を利用してグループ名のフィールドを作っていきます。
<img width="1440" alt="Screen Shot 2019-03-03 at 7.24.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/7bd6478d-bb2f-9080-9d78-91c24383fdad.png">

作りたいのは1〜10番目の都市は「1-10」というグループ、11〜20番目の都市は「11-20」というグループ、となるようなフィールドです。ここは２段階で作ります。

まず以下のRankingGroupNumberを作成。

<img width="638" alt="Screen Shot 2019-03-03 at 7.37.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/255e2c18-31b8-1508-1641-39c25b4814fc.png">

次にRankingGroupNumberを元にRankingGroupNameを作成。

<img width="636" alt="Screen Shot 2019-03-03 at 7.38.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/679d9b48-68c3-78a0-eae3-441c80c32eeb.png">

すると以下のような感じにグループ分けを実現できます。

| INDEX()の値 | RankingGroupNumber | RankinGroupName |
|--:|--:|--:|
| 1 | 1 | 1-10 |
| 2 | 1 | 1-10 |
| 3 | 1 | 1-10 |
| ... | ... | ... |
| 9 | 1 | 11-20 |
| 10 | 1 | 11-20 |
| 11 | 11 | 11-20 |
| 12 | 11 | 11-20 |
| ... | ... | ... |

### より明示的なINDEX()の指定
今回はINDEX()の表計算を「Tableau(down)」のまま使いましたが、実はこのままだとSales以外のメジャーでソートしたりすると崩れてしまします。以下のようにすると、より明示的にCity-Stateを合計Salesの降順で並べて番号をつける、と指定することができます。
<img width="372" alt="Screen Shot 2019-03-03 at 7.15.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/fd18ba74-acc4-619c-28fc-aec0890ddb93.png">

## RankingGroupNameでフィルターする
VIZに選択している「RankingGroupName」の10個だけを表示するためにフィルターに「RankingGroupName」を入れます。

適当に「1-10」を選んでおくといいと思います。

<img width="580" alt="Screen Shot 2019-03-03 at 21.06.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/900ee443-2bfb-fecd-5b81-dfccfb73cb8d.png">

右クリックして「Show Filter」を選択。
<img width="288" alt="Screen Shot 2019-03-03 at 21.07.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/93b6a8d7-81d0-fc61-1453-25800b028842.png">

右側にFilterが表示されます。これを指定されている形式に変えていきます。
<img width="288" alt="Screen Shot 2019-03-03 at 21.07.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/252fd020-57d8-b95e-8330-8885635c936a.png">

フィルターの右上にある▼をクリックし「Single Value(slider)」を選択。

<img width="301" alt="Screen Shot 2019-03-03 at 21.10.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/9b4502cc-3d17-fe54-08f9-33f62c08acc0.png">

同様にCustomizeにて「Show "All" Value」と「Show slider」のチェックを外す。

<img width="484" alt="Screen Shot 2019-03-03 at 21.11.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/44a8f3ab-e726-32f2-d242-958cc4f37c35.png">

加えて、「Edit Title」にてタイトルを「Select cities by rank.」に変更。

<img width="299" alt="Screen Shot 2019-03-03 at 21.13.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/d3847c75-6028-81e2-09a7-0137f0da0f38.png">

<img width="692" alt="Screen Shot 2019-03-03 at 21.13.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/7c2da40b-40ba-1dd4-58b7-b3be1a349b9e.png">

するとこんな感じに指定されている形式まで持っていことができました。

<img width="1440" alt="Screen Shot 2019-03-03 at 21.13.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/862f854b-e096-2ca4-cc55-e86a58d9ea0b.png">

## 微修正
### 色の変更
AllにてColorをクリックし「More colors...」を選択。
<img width="225" alt="Screen Shot 2019-03-03 at 21.15.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/a9ee3977-247c-2da9-e996-09bed3c21ce6.png">

「RGB Sliders」にて１6進数での色指定が可能なので指定されている「ED7470」を入れてOK。
<img width="442" alt="Screen Shot 2019-03-03 at 21.15.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/4eff426f-ed30-a280-4a5d-170f50e0d841.png">

### ヘッダの除去
軸を右クリックして「Show Header」のチェックを外す。
<img width="803" alt="Screen Shot 2019-03-03 at 21.18.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/e0a4e936-963d-f6d5-15fb-9d6d3979ca16.png">

### グラフ上の軸を除去
グラフ上で適当な場所を右クリックして「Format」を選択。日本語だと「書式」。
<img width="805" alt="Screen Shot 2019-03-03 at 21.19.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/7a142a7d-26fa-e4ff-ab0c-75822f4a22c8.png">

「Lines」の設定にて「Sheet」の「Zero Lines」をNoneに。

<img width="295" alt="Screen Shot 2019-03-03 at 21.20.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/cf0a3b44-e4ec-ae49-ffc7-734ccab63c5b.png">

同様に「Columns」の「Grid Lines」もNoneに。

<img width="292" alt="Screen Shot 2019-03-03 at 21.22.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/9dea508b-c397-a02f-7cfb-c9101c449cde.png">

「Borders」設定にて、「Columns」の「Columns Divider」の「Pane」をNoneに。

<img width="289" alt="Screen Shot 2019-03-03 at 21.23.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/b17cf459-46ef-930b-359b-3344113a9092.png">

### ラベルを表示、書式も編集
「Show mark labels」をチェック。
<img width="359" alt="Screen Shot 2019-03-03 at 21.34.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/80d2eca7-0ea3-f327-a3a8-4100b26d3577.png">

書式にて「SUM(Sales)」を選択。
<img width="431" alt="Screen Shot 2019-03-03 at 21.35.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/04d227e1-c380-000a-b7f0-fe2a6bec2bed.png">

「Pane」の「Defaul」の「Numbers」で書式を以下のように設定。
<img width="550" alt="Screen Shot 2019-03-03 at 21.35.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/335979d2-f5d1-0911-8032-693fb0c49841.png">

他のメジャーについても同様に書式を変更する。

## 軸の範囲の固定
ここが今回の二つ目の肝。ここではリファレンスラインを使って軸の範囲を固定させます。現状ではランキングが下がっていくごとに軸の範囲が小さくなっていくと思います。これを1-10グループの時と同じにしておく作業です。

各メジャーにおける最大値をリファレンスラインとして設置することで実現します。そのためには以下の計算式を作る必要があります。「Profit」だけはマイナスの値もあるので、「Min Profit axis」を作っています。

<img width="497" alt="Screen Shot 2019-03-03 at 21.28.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/fc1e3edc-1063-a73d-ae45-bdaddd8706a1.png">
<img width="501" alt="Screen Shot 2019-03-03 at 21.29.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/8c374049-4dc9-6298-298e-9e15480ad1e2.png">
<img width="493" alt="Screen Shot 2019-03-03 at 21.28.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/acec9741-8aa0-6787-6be3-a6d392dfdcf8.png">
<img width="498" alt="Screen Shot 2019-03-03 at 21.29.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/de239847-af58-48a0-c23a-ff2f08af91c3.png">

それらを各メジャーの「Detail」に入れてリファレンスラインとして追加します。リファレンスラインは「Label」と「Line」をNoneにすることで表示上、見えないようにしています。

<img width="165" alt="Screen Shot 2019-03-03 at 21.31.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/afcd7eac-a532-794e-c829-be114e5a24a8.png">
<img width="647" alt="Screen Shot 2019-03-03 at 21.31.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/9df1b026-5d87-0a60-f457-8785eaeda208.png">

他のメジャーも同様にリファレンスラインを追加して軸を固定します。

## Profitのみゼロラインを作る
これもリファレンスラインで作ります。Profitだけ以下のようにリファレンスラインを追加します。

<img width="647" alt="Screen Shot 2019-03-03 at 21.39.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/aa2c5824-f8d8-f890-353a-80f8954172b0.png">

## ダッシュボードを作成
以下のレイアウトで組むといい感じになります（左下のItem hierarchyを参考にしてください）。

<img width="1440" alt="Screen Shot 2019-03-03 at 21.45.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/200471/cd61ba78-387b-8a47-21d5-0101ce5e0fe5.png">

# 終わりに
スクロールバーは長すぎると今どこにいるのか見失いがちなので、とても良い表現方法の一つだと思う。またリファレンスラインで軸の範囲を固定したりゼロラインを作るというのは新鮮な使い方で目から鱗だった。やっぱりWorkoutWednesdayは勉強になる。
今回はかなり細かくまとめたけれど細か過ぎて時間かかり過ぎなので、次はもう少しポイント絞って簡素にまとめてみたいと思う。