積雲が映像制作したMV『RANGEFINDER』公開中
専門積雲

【YouTubeで見るアレ】競い合う棒グラフを作りたい!そんな時はFlourish!

専門

最近、Youtubeでサムネのような動く棒グラフの動画をよく見るようになったと思いませんか。

今回はFlourishという無料のwebサービスを用いて動く棒グラフを作る方法を紹介していきたいと思います。

スポンサーリンク

動く棒グラフ(Bar Chart Race)とは

年ごとの統計データなどを合計して、その変化を滑らかにアニメーションし、まるで棒グラフが背比べをしているような印象を与えるものが、動く棒グラフ(Bar Chart Race)です。

YouTubeなどでも以下のような動画をご覧になった読者の方も多いのではないでしょうか。

 

スポンサーリンク

作り方

今回は以下のような動く棒グラフの作り方を説明していきたいと思います。

Flourishにアクセスし、登録作業を行う

まずはFlourishにアクセスし、真ん中のGet started for freeをクリックします

 

ログイン画面が出てくるのでSign up now!をクリックします。

すると登録画面が出てくるので、Googleアカウントと紐づけするかメールアドレスで登録するか選び、登録します。

作りたいグラフの種類を選択する

登録が終わりログインすると次のような画面になります。My projectsの横の New visualisation をクリックします。

いろんなグラフや図が出てきますが、ページ中盤のBar chart raceの一番左のBar chart raceを選択します。

するとサンプルデータの入った動く棒グラフが表示されます。データを読み込みたいので、Previewの右横のdataをクリックします。

サンプルデータの中身が見られます。ここで右のSelect columns to visualiseを見ます。

ここにはデータの作り方が書いてあります。

A列にはlabel、つまり項目名が入ります。

DからZZ列まではvalue、つまりが入ります。

B列にはカテゴリが入ります。カテゴリに応じて棒グラフの色が変わります

C列には棒グラフの右端に表示される画像(サンプルデータでは国旗だった部分)が入ります。

Excelなどの外部ソフトでデータを作る

先ほどの説明に則ったデータを制作します。

なおアップロードできる形式は.xlsx .csv .tsvなどです。Excelのデータをそのまま持ってこられるのは良い点です。

今回は日別の記事の閲覧数を動く棒グラフ化したいので、A列に入る項目名を記事名、B列に入るカテゴリをブログの記事カテゴリにし、C列に入る右端の表示される画像を著者アイコンにしています。そしてD列には5/2の閲覧数、E列には5/3、F列には5/4・・・といったように列が進むごとに日数を進めるようなデータを作成します。

データ作成が終わったら対応している形式に保存します。

作成したデータを読み込む

Flourishのページに戻り、Upload dataをクリックするとエクスプローラーが立ち上がるのでファイルを読み込みます。

すると警告が出ます。内容は既存のデータが書き換えられますよ、というものと、データが公開状態になりますよ、というものです。

残念ながら無料版ではデータを非公開でアップロードすることができないため、有料版にアップグレードしない限りは左のImport publiclyを選択するか、作るのをやめるかしかないです。ちなみに有料版は個人ライセンスでも月69ドルと高いためお勧めしません。

Import publiclyを押すとデータが読み込まれます

Previewを選択すると、見事に動いている棒グラフを見ることができます。

グラフを調整する

右側の設定項目でグラフに関する様々な設定を行うことができます。

棒グラフの太さや項目欄のスペースなど、様々な項目がカスタマイズできますが、項目が多すぎるので詳細な説明は割愛します。あれこれ納得するまでいろんなパラメーターをいじってみましょう。

グラフを出力する

グラフの調整が終わったら出力を行います。右上のExport & Publishをクリックします。

次のようなメニューが出ます。上のPublish to share and embedではウェブページへの埋め込みコードが発行できます。

公開状態にしますよ、という警告が出ます。

publishを押すと埋め込みコードが発行されます。下のunpublish this projectを押すと非公開状態になりますが、埋め込まれたwebページ上でも非公開状態になるので注意が必要です。

下のDownload imageでは画像をダウンロードできます。しかし日付ごとに連番で出力されるわけではなく、保存を押したときの動く棒グラフが静止画として出力されるだけなので、あまり実用性はないです。形式はPNG、JPG、SVGです。

メリット・デメリット

・エクセルやcsvデータに対応しており、データ編集がしやすい
・グラフのカスタマイズ項目が多く、調整がしやすい

・Webページへの埋め込みコードが発行できる
・無料版ではデータを非公開にできない(Webページに埋め込むためにはデータを公開状態にしなければならない)
・動画形式での出力に対応していない
・画像の出力に関しても日ごとに連番で出力することができない
・flourishの月額料金が個人で月69ドルと高い

まとめ

今回は簡単に動く棒グラフの作れるFlourishというWebサービスを紹介しました。

無料版での制約も機能面に関するものはほぼなく、公開できるデータであれば簡単にビジュアル化できる点は魅力的だと感じました。

ぜひ活用してみてはいかがでしょうか。

コメント

タイトルとURLをコピーしました