Flourishでデータビジュアライゼーションをさくっとやってみた

# はじめに

NoCodeでデータのビジュアライゼーションがさくっとできるサービス[Flourish](https://flourish.studio/)を使ってみました。
筆者は、[データラーニングギルド](https://guild.data-learning.com/)というオンラインサロンに所属しています。この取り組みは、サロン内のビジュアライゼーションコンペに出す作品を作るための勉強の一環です。
せっかくなので、簡単ではありますが、ノウハウを共有したいと思います。
もっとスマートなやり方がありましたら、是非コメントにてご指摘ください。

# コンペ作品

https://youtu.be/QYFDFXo4JBk

# 目次

1. 最終成果物イメージ
2. 元データの取得
3. データの整形 json > csv
4. 整形済みデータのアップロード
5. 各種設定＠Flourish
6. 最終成果物（再掲）

# 1. 最終成果物イメージ

![output.gif](https://media.giphy.com/media/QuOsATPPGShuJO23GW/giphy.gif)
source : https://www.tiobe.com/tiobe-index/
made by : https://flourish.studio/

# 2. 元データの取得

[TIOBE Index](https://www.tiobe.com/tiobe-index/)ページのTIOBE Programming Community Index という📈のデータを使います。

<img width="924" alt="cap1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181972/00e141ea-34f7-f621-9ef6-86a3fe4cccfb.png">

ソースを表示してJSON形式のデータを表示、コピーして手元のファイルに保存します

<img width="1363" alt="cap2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181972/d6da0fd2-7fd9-f401-04c7-f394945c50ae.png">

# 3. データの整形 json > csv

## 3.1. 整形後のイメージを確認

今回はFlourishのBar chart raceというテンプレートを使います。
入力データはラベル群と各ラベルに対応するシーケンシャルなデータです。
具体的には、以下のようなスプレッドシートを入力データとして作ります。

|Label|Values0|Values1|Values2|...|
|:-:|:-:|:-:|:-:|:-:|
|Java|26.2|25.3|24.3|...|
|C|19.4|19.5|20.1|...|
|Python|1.25|1.13|1.19|...|
|...|...|...|...|...|

- **Col0 : Label**
    - 一つ一つのBarchartの名前、今回で言えばプログラミング言語
- **Col1toN : Values<font color=red>N</font>**
    - 各Barchartのシーケンシャルなデータ、今回で言えばランキング発表時のコミュニティのスコア値
    - カラム名がグラフエリアの右下に表示される仕様なので、私は **ランキング発表時の日付（YYYY/MM/DD）をカラム名に**しました

## 3.2. 整形作業（もっとスマートにしたい）

整形後のイメージができたので、先ほど取得したデータ列を整形していきます。泥臭いですが、エディタの置換機能を使って、以下のようなJSONファイルにしました。

```json
[
  {
    "name": "Java",
    "data": {
      "2001/5/30": 26.2,
      "2001/6/30": 25.3,
      "...": ...
    }
  },
  {
    "name": "C",
    "data": {
      "2001/5/30": 19.4,
      "2001/6/30": 19.5,
      "...": ...
    }
  }
]
```

こちらの[変換ツール](https://konklone.io/json/)に作成したJSONをコピーして、CSV形式のデータ作成が完了します。

<img width="877" alt="cap3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181972/f5773420-6e0c-f3de-3aeb-1ee9dd91114d.png">

# 4. 整形済みデータのアップロード

Flourishのダッシュボードを表示して、`New Visualization` をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181972/0c3dbecf-eef0-ceee-1ae5-2f54da8dbe80.png)

たくさんのテンプレートが表示されると思うので、その中から
`Bar chart race` を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181972/9d694413-96f9-174b-88d6-f9f36f450727.png)

まず、デモ用のグラフが表示されると思います。
グラフエリア上部に **"Preview/Data"** という箇所のDataを選択してください。

すると、スプレッドシートが表示されるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181972/04a1a572-6c71-c2b4-2fa1-bd5a4718e7cf.png)

基本的には、

1. スプレッドシートの修正（ブラウザ上で入力 or ローカルデータをアップロード）
2. 可視化するカラムの選択（画面右側`Select columns to visualize`）

二つの作業を行うだけです。

今回は、手元に作成したCSVファイルをアップロードすることにします。
スプレッドシートの右上の `Upload data file` より先ほど作成したCSVをアップロードします。

# 5. 各種設定＠Flourish

## 5.1. 可視化するカラムの選択

前章2で説明した作業を行います。
結論、下記のように設定すれば良いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181972/28354992-8322-7d53-e5ad-14d7f4ad4b0c.png)

- Label
    - グラフのラベル
    - 今回は各プログラミング言語名を記載したA列を選択
- Values
    - グラフ化するデータそのもの
    - 今回は各プログラミングコミュニティのスコア値（2001/05/30-2019/11/06）を記載したB〜HL列を選択
- Categories(<font color=blue>optional</font>)
    - グラフのカテゴリ（Labelより一段階上の分類 1カテゴリに複数のLabelが所属可能）
    - Bar chart raceではカテゴリごとにグラフの色が変わります
    - 今回はラベルと同一のA列を選択しましたが、「frontend/backend/embeded」「static typing/dynamic typing」など言語のカテゴリ分けを行ってみるのも面白いかもしれません
- Image(<font color=blue>optional</font>)
    - グラフごとに設定できるアイコン
    - 今回は設定してません。各プログラミング言語のロゴを表示すると、ぱっと見でわかりやすいグラフになるでしょう


# 6. 最終成果物（再掲）

ここまでやれば、完了です。
スプレッドシート上部の `Preview` を選択してBar chart raceを表示してみましょう。

![output.gif](https://media.giphy.com/media/QuOsATPPGShuJO23GW/giphy.gif)

以上です。
最後まで読んでいただき、ありがとうございます。