(O+P)ut

アウトプット



(O+P)ut

エンジニアのアウトプット

【Flourish】時系列データをレース形式で可視化する手法

スポンサーリンク

はじめに

以下のメッセージを掲げるFlourishは無料で使えるデータ可視化ツールです。

Powerful, beautiful, easy data visualization.

投入するデータさえ用意できれば、数あるテンプレートの中から例えば「Bar-chart-race」を選択することで以下のようなレース形式でバーを伸縮させながらランキングを表示する表現が可能です。

登録は必要ですが、以下リンクより無料で利用できます。
Flourish | Data Visualization & Storytelling

本記事ではレース形式で時系列にデータを描画する流れを紹介します。

Flourishによるデータ可視化

GoogleアカウントやTwitterアカウントで利用可能です。

自分のホーム画面にてNew visualisationをクリックすると可視化テンプレートを選択できます。

f:id:mtiit:20200801190832p:plain
多くのテンプレートが用意されている

その中から、以下のBar-chart-raceを選択します。

f:id:mtiit:20191206170702p:plain
Bar chart raceを選択

そうするとサンプルデータが既に格納されている状態なので「データ」と「プレビュー」を見比べると形式が分かります。

今回は分かりやすいようにデータを以下の画面に見える範囲のみにカットしました。先頭行に項目名、そして時系列の項目名を入れていきます。
f:id:mtiit:20191206160444p:plain

データの種類は行で管理して6行、時系列数値データは列で管理して4行です。

B列にてグループ、C列にて画像イメージのURLが入っているので自動的にデータに画像が付与できます。
そしてこれらを設定項目にて以下の値が格納されている列をアルファベットで指定するのがポイントです。画像がない場合はImageの欄を空欄にしてください。

  • Label
  • Values
  • Categories
  • Image

上の例ではLabelが「A」、Valuesが「D-G」、Categoriesが「B」、Imageが「C」です。

この状態でプレビューをすると以下のようになります。

データ数はたった4つですが、値が常に変化しているように描画される点がユニークです。

作成した可視化結果は公開されますが有料アカウントになれば非公開で利用できるようです。他にも有料アカウントでのみ利用できる機能が多々あるので、気になる方は調べてみてください。

Your data will be publicly visible. To keep it private, upgrade your account.


もちろん、自前で用意したファイルも読み込むことができ、例えばcsvファイルを画面から読み込ませると

XX rows were imported!

というウインドウが表示され、確かにデータが読み込まれています。

注意点としてファイルの中に含まれていた日本語は「UTF-8 (BOM付)」で保存しないと画面上で文字化けしてしまいます。

終わりに

少ないデータでも値の変化具合が表現でき、ソート結果の順位が変わるとクルリと場所が入れ替わる演出も秀逸です。

また、OSSにて以下ツールも同様のことが可能です。
GitHub - FabDevGit/barchartrace: Bar chart race online editor

以上、レース形式の可視化に使えるツール紹介でした。