対話型階層グラフをFlourishを使い作成【新車販売台数編】

##データを準備します

少し時間ができたので、**Flourish**の階層型グラフを試してみました。

※参考記事は[こちら](https://qiita.com/text_owleyes_0214/items/cb8cfee52dd9f2a8e75d)。

使用したデータは新車販売台数。
総務省統計局の**[「統計ダッシュボード」](https://dashboard.e-stat.go.jp/)**から取得しました。
2021年2月までのデータがありましたが、まずは年単位で推移を見るために、2020年12月までのデータを使いました。

**Flourish**を開きます。

<img width="500" alt="階層グラフ1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/4f1bfb60-ee4c-6434-3429-3faeb67ec48e.png">

**「Hierarchical bars」**選びます。

<img width="700" alt="階層グラフ2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/24a172ab-02bb-a0f2-b974-f85bc9b2dab1.png">

**「Data」→「Upload Data File」**でExcelデータを取り込みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/b86179a2-1bf7-a7b9-e822-160ef96dca7a.png)

Excelしたデータは加工しています。
例えば、今回は四半期列を加えるために、Excelの関数式

　**="Q" &INT((MONTH(E2)+2)/3) & "-" & YEAR(E2)**

を使用しています。

##Flourishで可視化条件を設定

右側で表示設定を行います。
**「Nesting」**に列名**A、B、C**と入力します。
これで以下のような階層表示の準備ができます。

>**A列（YEAR）**
>>**B列（QUARTER）**
>>>**A列　（MONTH）**

<img width="300" alt="階層グラフ4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/5ea6dc59-b796-7f7c-e013-9c20c4b19f99.png">

**「Preview」**をクリックします。

<img width="500" alt="階層グラフ5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/84c6590c-0591-476d-3045-3f185d3bfee3.png">

<img width="800" alt="階層グラフ6" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/a66395fa-dab9-580a-1e9e-940a3263ae85.png">

例えば、以下のような振る舞いが可能になります。
**「2020年」→「Q2-2020」**とクリックすると**4月、5月、6月**の推移（棒グラフ）へと切り替わります。

<img width="700" alt="階層グラフ7" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/48a7ab52-7f2a-d3bc-603f-b454cffc70d6.png">

<img width="700" alt="階層グラフ8" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/65ffb356-7734-4823-1de8-04269956041e.png">

<img width="700" alt="階層グラフ9" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/f707b48e-af30-6936-e81a-97fa98071f9b.png">

アニメーションGIFも作ってみました。

![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/cc69e4e5-fb1c-d5b6-289a-866e3d29f5cf.gif)

##2021年の1月と2月のデータを追加

**Flourish**でデータの追加も試してみました。
データの更新方法は2種類です。
先ほど使った**「Upload data file」**と**「Upload data and merge」**です。
前者はファイルの置き換え、後者はファイルの結合です。

<img width="300" alt="階層グラフ10" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/18b70173-ce7f-08e3-456c-2624282b599b.png">

今回は**「Upload data file」**を使います。
ただ、**Flourish**上で列を追加したりした場合、置き換わると困ります。
この場合、**「Upload data and merge」**を使う方がよさそうです。
しかし、マージは**列の右側に追加**（right_join）という方式でしかできないため（下図参照）、右側に追加していくような体裁のデータを用意した方がよいことになります。

<img width="300" alt="階層グラフ11" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e7a29248-8a66-1b67-bb07-36c2cf3229f2.png">

戻りまして、**「Upload data file」**を実行しました。
**「Preview」**をクリックします。
2021年のデータが反映されています。

<img width="700" alt="階層グラフ12" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e2f367ef-73a8-a5a1-c7c6-5c2722f9e5cb.png">

##設定パネルを操作してみる

右側のパネルの設定を変更してみます。
例えば、**Hierarchy**の下の**「Treemap」「Circles」「Sunburst」「Radial」**をクリックすると、グラフの形態がガラッと変わります。

<img width="300" alt="階層グラフ13" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/11b90e1a-3980-5f01-9fd3-eb2a2ce1792c.png">

<img width="700" alt="階層グラフ14" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/680b424c-f7e4-8a29-28b1-7a2b950540d1.png">

<img width="700" alt="階層グラフ15" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/d81ef23e-e831-3480-30e8-776b17444141.png">

<img width="700" alt="階層グラフ16" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e561b380-6682-03e4-db36-5d80a2624eda.png">

<img width="700" alt="階層グラフ17" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/ee0a0dfb-5257-8fe7-4d52-4783ac263d70.png">

**「Radial」**を選んで**「Radial Tree」**でサイズを調整します。

<img width="300" alt="階層グラフ18" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/14aa0bb3-71f8-dec1-a73b-00d36d58c92a.png">

<img width="700" alt="階層グラフ19" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/9292f59c-f9c7-a8d8-3bbe-43b3b248d847.png">

こんな風に動きます。

![ezgif.com-gif-maker_newcars2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/867b1dbd-ab13-e5f5-c92a-b246390e14cb.gif)

**「Export & publish」**でクラウドで公開されます。
Embedのためのコードも取得できます。

**了**