Googleスプレッド経由しTableauで推移可視化【梅雨の降水量平年比】

* **要点**
    * **Googleスプレッドシートを使います。**
    * **文字化けを防ぐためにGASの関数を使います。**
    * **ピボットを使います。**

##気象庁のテータをGoogleスプレッドで取得します

無償で使える**Tableau Public**が備えるGoogleスプレッドシートをデータソースとする機能を試してみました。
これまで、ローカルに保存したデータを使うことが多かったのですが、Googleスプレッドシートを使用できれば、**IMPORT関数でWeb上のデータを直接取得→Tableauで可視化**という手順が可能になり、利便性が増します。

気象庁の梅雨の降水量平年比のデータを使うことにしました。

https://www.data.jma.go.jp/fcd/yoho/baiu/index.html

※平年比（%）は観測値／平年値と計算します。平年値は、平均気温・降水量・日照時間いずれもひと月別値の30年平均値だそうです。

https://www.jma-net.go.jp/fukuoka/kaiyo/tenkou_column4.html

気象庁のデータをExcelで開いて内容を確認しました。

<img width="700" alt="梅雨の降水量平年比1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/61412993-5405-a960-6d82-7ffe3a3ea3b1.png">

Googleスプレッドシートが持つ**IMPORTDATA（関数）**を使い取り込みました。

```javascript
=IMPORTDATA("https://www.data.jma.go.jp/fcd/yoho/baiu/tsuyu_prec.csv")
```

列名（ヘッダ）の日本語部分が文字化けしました。
utf-8形式でないと文字化けするようです。
困りました。

<img width="700" alt="梅雨の降水量平年比2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/79f91188-8569-fd0b-d22f-05d1ac9f41a0.png">

検索して調べた結果、**Google Apps Script（GAS）**を使って解消できることがわかりました。

https://qiita.com/QDM/items/b228ac10eca623837945

そこで紹介されているスクリプトをGoogleスプレッドシートの**スクリプトエディタ**に貼り付けて使わせて頂きました。

<img width="700" alt="梅雨の降水量平年比3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/a8817b89-80b2-5a9e-0da5-9ad3c771ffd7.png">


##文字化け解消。Tableauに取り込みます

作成した関数**importCSV**を使って再取り込みです。

```javascript
=importCSV("https://www.data.jma.go.jp/fcd/yoho/baiu/tsuyu_prec.csv",1)
```

今度は文字化けせず取得できました。

<img width="700" alt="梅雨の降水量平年比4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/200b3a5e-d254-c1e7-6a49-05627bf4a99f.png">

**Tablesu Public**で取り込みます。

<img width="500" alt="梅雨の降水量平年比5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/10f64d8e-a9e7-e132-2aa3-7f5b05aea97c.png">

<img width="500" alt="梅雨の降水量平年比6" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/856745e1-ebef-ea05-844b-3d036872f830.png">

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/0618bb28-e7fe-db18-bbef-aa4c9c1913af.png)

取り込んだ直後の状態です。
ただ、2行目に**「年」「平年差」**とテキストデータが入っており、その列が**文字列型**になっています。

<img width="700" alt="梅雨の降水量平年比8" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/103e00aa-c15f-a6bc-b5bf-cb396756409c.png">

後で解消できるので、気にせず**整数型**に変換します。

<img width="500" alt="梅雨の降水量平年比9" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/2559b886-7a5e-61f4-1342-7c0e2baa1c2d.png">

**null**に変わりました。
行単位で消せないようなのですが、後で外すことできるので、可視化に進みます。

<img width="700" alt="梅雨の降水量平年比10" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/83d613a3-a5b1-ab2e-6889-77207c326f92.png">

**ワークシート**に移動します。

<img width="500" alt="梅雨の降水量平年比11" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/7a93f4f3-e13e-2ab7-22e1-16954134b75a.png">

##折れ線グラフを作ります

**列に「時間軸」、行に「関東甲信地方」**をドラッグすると、自動で折れ線グラフを選択して作成してくれました。

<img width="800" alt="梅雨の降水量平年比12" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/5d6aa3f5-103b-47a0-0200-80333b252e7d.png">

グラフ右下に**「1個のNULL」**と表示されます。
クリックして**「データのフィルター」**を選ぶと、nullが除外されます。
これで、取り込み時にあったnull値を外すことができました。

<img width="500" alt="梅雨の降水量平年比13" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/ba9f08de-b4d4-2886-7455-340a5206c5d3.png">

<img width="700" alt="梅雨の降水量平年比14" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/a19b08f7-2397-987a-d985-7cd49b1663e4.png">

**「九州南部」**をドラッグすると、そのグラフが追加されます。
ドラッグする際、Y軸左側に上に置くようにすると、同じ画面上にグラフが追加されます。

<img width="700" alt="梅雨の降水量平年比15" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/4e545fd6-cfe7-b5f3-0d2b-b7ec3a45ebc3.png">

<img width="800" alt="梅雨の降水量平年比16" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/f3da7c56-6409-b5f5-7669-2346ce0afebb.png">

##ピボットを使ってエリア別グラフを作りやすくします

ただ、エリア（地方）別のグラフを全部描くには、エリアの数だけドラッグする必要があります。
その手間を少なくするためにデータソース取り込み画面に戻り、**ピボット**機能を使って表の体裁を変えます。

<img width="500" alt="梅雨の降水量平年比17" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/85bcc4d7-89ea-94c2-1125-f4ca6e7ab238.png">

以下のような形式に表が変わります。

| 時間軸 | エリア | 平年差 |
|:-:|:-:|:-:|
| … | …  | …  |
| … | …  | …  |
| … | …  | …  |
| … | …  | …  |
| … | …  | …  |

ただ、nullがあるため、余計な列ができてしまいます。
（行と違い）列は削除できます。

<img width="500" alt="梅雨の降水量平年比16" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/0dde7d77-54de-6ecd-7820-4e42853a6c2f.png">

可視化に使いたい列にnull値が残っていますが、先ほど同様後で外せるのでこのまま進みます。

<img width="300" alt="梅雨の降水量平年比17" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/f41d78ba-5eaf-8cd3-03b7-30cf24078171.png">

**列に「時間軸」、行に「平年差」、左側のパネルに「エリア」**をドラッグすると、エリア別グラフが作成できます。

<img width="500" alt="梅雨の降水量平年比18" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/909439cd-6cd3-6e82-e468-ce3386f8375a.png">

<img width="800" alt="梅雨の降水量平年比18" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/670b7bf4-4ab0-2a7b-8b42-638fcb0689fe.png">

先ほど同様にnullを外します。

<img width="800" alt="梅雨の降水量平年比19" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/a6d24ce0-d24c-884e-5dd2-1e2a2ac00678.png">

##2020年は雨量が多かった

このままでは見にくいので、もう少しいじりました。
平年差（単位%）なので本来の使い方ではないと思うのですが、**積み上げ棒グラフ**に切り替えてみました。

<img width="300" alt="梅雨の降水量平年比20" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/00adf386-1c53-7f69-1cba-ff381dc923d3.png">

2020年は例年より雨量が多かったことがわかりました。

<img width="700" alt="梅雨の降水量平年比21" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/95da90be-58cc-863f-0c0e-7dc79c40c53a.png">

作業の区切り区切りで**ファイル→Tableau Publicに保存**します。

**了**