バーチャートレースをFlourishを使い作成

##消費支出の統計データを用意します
そろそろ総務省統計局から、2021年（今年）の**消費支出**が発表されるタイミングだと思います。
先月の2月5日に、[2020年12月の**消費支出**](https://www.stat.go.jp/data/kakei/sokuhou/tsuki/index.html)が公表され、年間の数値が出そろいました。
そのデータ、および過去の統計を使い、**バーチャートレース（アニメーショングラフ）**を作成してみます。
可視化に利用するのは、英Flourish社のクラウド型サービス**[「Flourish」](https://app.flourish.studio/)**です。

<img width="500" alt="バーチャートレース1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/5e951970-ed8c-df2a-bc89-041dfd485fd5.png">

消費支出のデータは政府統計の総合窓口**[「e-Stat」](https://www.e-stat.go.jp/stat-search/files?page=1&layout=datalist&toukei=00200561&tstat=000000330001&cycle=1&tclass1=000000330001&tclass2=000000330004&tclass3=000001034794&tclass4val=0)**から取得しました。
（※データの取得は「e-Stat」の操作が必要です。説明に文量が必要なので、別の機会に紹介予定です）

<img width="700" alt="バーチャートレース2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/264f258f-0f19-d27c-8e68-ad6a40d74a74.png">

##Flourishを使用します
アカウントを取得し、グラフを作成し、クラウドで公開、という手順になります。
有償版になると、作成したグラフの閲覧範囲を設定できたりするそうです。
まず、**「New visualization」**をクリックします。

<img width="500" alt="バーチャートレース3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/0d9aa49f-ea90-d6f1-4324-245dd05787c8.png">

表示された画面から**「Bar chart race」**を選択します。

<img width="700" alt="バーチャートレース4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/47baadf7-bb7d-23ec-1ec1-5d71215bc8eb.png">

予め登録されているサンプルが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/c0b827d3-795d-0703-13b5-97b9112711ad.png)


画面上の**Data**をクリックすると、使用されたデータの体裁が確認できます。

<img width="500" alt="バーチャートレース6" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e6a30414-9994-343c-303b-96ee4f6057c5.png">

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/b17a54c0-ab49-fc47-d217-d40a0daee620.png)

時間要素を列に並べればよいので、取得した消費移出のデータの整形を少なく使用できます。
地方別に消費支出の推移をアニメーションで表現します。
消費支出のデータから余計な行や列を外しました。

<img width="700" alt="バーチャートレース8" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/463a584d-a8ab-92b8-7a17-96b00215e42b.png">

**Flourish**に戻り、**「Update data」**をクリックします。

<img width="700" alt="バーチャートレース9" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/98aa7453-16f7-86f6-5f08-d53953b2da08.png">

使うデータを選択します。

<img width="700" alt="バーチャートレース10" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/87d144cc-12ea-e232-8a8c-7d83a87d2f81.png">

フリーで使う間は、**「import publicity」**を選びます。

<img width="500" alt="バーチャートレース11" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/3dc712d2-fddc-da11-e94c-fbd5c9f85842.png">

**「Next,select columns」**をクリックし、設定に進みたいのですが、データの型の再設定が必要なことがわかりました。

<img width="500" alt="バーチャートレース12" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/0501c2f8-8b82-09fb-8fa6-7b70c1c68b29.png">

元のデータでは最初の行に**「YYYY年MM月」**となっていましたが、Flourishでは数字に変換されてしまいました。
Flourish上で型変換できないか探しましたが、元のデータを修正したほうが早いと思い、例えば2000年1月なら**「Jan-00」**と変更しました。

<img width="700" alt="バーチャートレース13" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e419f650-c8b9-2fa8-1976-1237df5f5c27.png">

**Flourish**で再度データを取り込みます。

##アニメーション表示の設定をします
右側の**「Data」**パネルで設定します。
**「Label」**はA列（地区区分）のままにします。
**「Values」**は**「D-ZZ」**と**「D」**から始まっているとりあえずブランクにします。

<img width="500" alt="バーチャートレース14" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/ce236fd7-0e58-83a4-f2da-41c1ca06698e.png">

画面上の**「Preview」**を押すと、**バーチャートレース**が始まります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/2dafd173-55c6-3969-1dde-e4c5257d0bb7.png)


##グラフの調整をします
地域ごとに色分けしたいので、**「Data」**画面に戻ります。
**B列**を右クリックして、**「Insert column left」**を選んで列を追加します。
（※直下の方法より効率によい設定がありますので後述します。表の編集機能を紹介しするために少し遠回りの設定を紹介します）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/b163f1aa-cb25-cd46-9cf2-ab2db0c805bc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e93a6d77-ea41-9c44-55ab-7c4936dd9072.png)

セルに直接入力できるので、今回列名を**「color」**、その下に連番数字を入力しました。
右パネルの**「Categories」**に新しく作った列**「B」**と入力すると、色分け完了です。

<img width="700" alt="バーチャートレース18" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/9d0967a9-af30-92d8-5b37-7f575707b7b8.png">

➡なお、表の編集ができるのを紹介するために上記の例を説明していますが、**「Categories」**に**「A」**列（地区区分）を入れる方が容易でわかりやすいグラフになります。以下、この設定を使っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/9e44e363-dedc-f06e-352d-4046c3067ce0.png)


**「Preview」**をクリックすると、グラフの動きが早いので、速度調整をします。
右パネルの**「Timeline & animation」**を選びます。

<img width="500" alt="バーチャートレース20" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/920b4c19-b1c5-b2cc-c206-2ec0b1966699.png">

クリックして開いた設定画面の下側の**「Time duration」**の数値を変更します。
**「30」**が入っていましたが、ゆっくりと動かしたいので、何度か試した結果**「300」**に変更しました。

<img width="500" alt="バーチャートレース21" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/9b9d43b4-2423-d121-b2fa-c1695b290875.png">

各バーが切り替わる動きも止めたかったので、右パネルの**「Bars」→「SortingをOFF」**としました。
再度**「Timeline & animation」**を選択し、すぐ下にある設定を**「Disabled」→「Enabled」**に切り替えます。
グラフの下に全体がわかる縮小グラフが表示されます。

<img width="500" alt="バーチャートレース22" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/996e4296-200f-8ee5-6fd5-5e66643f60d7.png">

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/27f428a2-d6f3-955f-ac0a-fabb4618aeb4.png)


画面右隅の**「Export & publish」**をクリックすると、クラウド経由で公開が可能になります。
（※その下**「Saved」**という表示があります。自動保存されているかもしれませんが、まだ詳しく試してません）

<img width="500" alt="バーチャートレース24" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/3a0ece33-eaa1-d01a-69c6-659cd9b30469.png">

<img width="500" alt="バーチャートレース25" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/5dfecf2a-4a44-59b7-42b1-966a4eb1be37.png">

**Embed**するコードが取得できます。
下の画面はGIFアニメーションです（[→こちら](https://qiita.com/bohebohechan/items/f8bf6d4bbe0f14497a7b)を参考に作りました）。

![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/55a037e8-7d59-6ab9-3f20-5990e1364d0f.gif)

**了**