Flourishでバーチャート・レースを作る方法
バーチャート・レース（Bar chart race）とは
バーチャート・レースとはデータの変化を時間経過とともに動的に示すデータ可視化（Data visualization）手法のひとつです。棒グラフが一定の時間ごとに更新され、バーの長さが変化するとともにランキングが上下します。
通常、棒グラフでランキングの結果を単年度のみ示すことができますが、アニメーションにすることで時系列の変化を表現することが可能です。
なおFlourishの基本的な使い方は以下の記事で解説しているのであわせて参照してください。
データをダウンロードする
まずデータをダウンロードします。こちらのGoogle ドライブを開いてファイルをダウンロードしてください。
このデータはNetflixが公開する「Global Top 10」というサイトから取得したものです。Netflixは映画やドラマの視聴データを国別、期間別に分類して公開しています。
サイトの最下部に移動するとTSV形式のデータがダウンロードできます。「Download Global Lists」のデータが今回使うファイルです。ダウンロードした状態だと、以下のように日付（週の日曜日）が縦に並んでいます。
CSVファイルでは、これを「TV（＝ドラマシリーズ）」だけに絞り、Flourishに適した形に加工してあります。
せっかくなので大きな動きのあった期間をチョイスしています。2021年6月から11月、ちょうどドラマ『イカゲーム（Squid Game）』がNetflixの視聴時間の新記録を樹立した期間です。
Flourishにデータを貼り付ける
サインインしてプロジェクトページに移動し、テンプレートから「Bar chart race」を選びます。画面上部「Data」→「Upload data」→ ダウンロードしたCSVファイルを選択します。
次に列の割り当てを行います。
Label：A（ドラマシリーズ名）
Values：C-V（各週の視聴時間データ）
Categories：B（言語）
以上のように設定します。Categoriesを設定すると、その列に応じてバーの色が変わります。Imageは空欄で大丈夫です。
棒グラフのラベルサイズを調整する
Previewに戻って各種の設定を行います。ちなみにプレビューを見ているときもアニメーションが動いて気が散る場合は左下の一時停止ボタンを押すとアニメーションをストップすることができます（この部分は設定とは関係ありません）。
まず初期設定だと左側にあるドラマシリーズ名がはみ出してしまうので、この調整をします。Labels > Max sizeを0.8に設定します。これでラベルが少し小さくなりました。このくらいが視認できる限界かなという気がします。
次にBAR LABELS > Spaceを13に設定します。この数値で左側のラベル部分の余白を決定します。13くらいあればほとんどのシリーズ名は収まります。中にははみ出してしまうものもありますが、すべてを完璧に収めようとするとSpaceの数値をかなり大きく設定しなければならないため取り急ぎ今回は13としています。
バーの色を変える
次にバーの色を変えます。ドラマシリーズのオリジナル言語によって「英語」と「英語以外」に分かれていますが、デフォルトのカラーパレットだと青と薄い紫で分かれており、ちょっと視認しづらく感じるので見分けやすい色に変えます。
Colors > Paletteをクリックして「Flourish Legacy」に変えます。これで2色が見分けやすくなりました。
今回はカテゴリごと（英語／英語以外）で分けるのでColor modeはBy categoryのままでよいですが、たとえば1本1本のバーごとに色を変えたい場合はBy barを選択します（ただ一般的に言って、意味なく色を変えることはお勧めしません）。Singleにするとすべてのバーの色が同じになります。
Color overridesは特別に適用したい色があるときに設定します。バーチャート・レース以外でも使うことがあるため覚えておくとよいでしょう。「[系列名]: [色]」で指定すると指定した列だけ色を変えることができます。今回の場合「英語」「英語以外」で色を分けているため、たとえば「英語: red」と入力すると「英語」に該当するバーが赤に変わります。今回はカテゴリが2つだけなのでいまいち意義が薄いですが、たとえば国別の比較チャートで日本だけを強調したい場合、Paletteではどうしてもしっくりくる色がない場合などに使えます。
右下の期間＆合計表示を変える
ビジュアルの右下には「いま表示している期間」と「表示されているデータの合計」が表示されています。ここは右側メニュー「Counter & totalizer」で制御できます。
まずCURRENT TIME COUNTERで期間表示を調整します。ちょっと大きすぎる気がするのでSize (% of screen)を5％に設定します。
また少しフォントが薄い気がするのでColorをRGB = 100 / 100 / 100にします。それぞれの数字が大きくなると赤、緑、青の色が強くなります。100 / 100 / 100は「やや濃い目のグレー」くらいの感覚です。
また、TOTALIZERで合計の表示も同様に調整することができます。今回の場合、ランキングのトップ10だけを合計することにあまり意味はないので、Show totalのスイッチをオフにします。
X軸（週間視聴時間）を設定する
X軸の設定は右側メニューAxisで行います。バーチャート・レースの場合、通常の棒グラフとは異なり期間（今回は週）ごとにグラフの最大値が大きく異なる場合があります。その際にどう表示するかをAxis > Typeから設定することができます。
Dynamicにした場合、常に1位が最大の長さで固定され、相対的に軸が移動します。Fixedにした場合、軸の方が固定されます。最も長いときの軸に固定されるため、今回のデータだとイカゲームが大ヒットした期間に合わせて6億時間（600,000,000）がグラフの最大幅となるはずです。
これもデータの性質やどちらに着目して欲しいかによって判断が異なります。絶対値としてのイカゲームの視聴時間の長さを強調するためにFixedを設定するのもありですが、今回の作例ではそのまま「Dynamic」としています。
アニメーションの設定を行う
続いてアニメーションの設定を右側メニューTimeline & animationから行います。まず、動きが早すぎる気がするためTimeline durationを30から60に変えましょう。これはアニメーションの開始から終了までの時間（秒）です。
Styleでは下部の時間軸を表示するかどうかを設定できます。Play on loadをオンにすると、ページを開いてすぐアニメーションが動き始めます。オフにするとページを開いてから再生ボタンを押す必要があります。Loop timelineをオンにすると、アニメーションが終わったら開始時点に戻って再びアニメーションを始めます。ループさせる場合、Pause before loopで終点に達したあと始点に戻るまでの間隔（秒）を設定できます。
その他、タイトルや注記などの設定は基本的なグラフと同様です。色々と調整すると、以下のようになります。
バーにイメージを追加する
今回は使いませんでしたが、バーチャート・レースではバーの先端部分に丸いアイコンを表示することができます。Flourishのサンプルデータ（国別の人口推移）では国旗のアイコンが使われていました。
このアイコンを設定するには、まずDataのスプレッドシートに画像のURLを指定する列を追加します（したがって、画像はあらかじめウェブ上のどこかにアップロードしておく必要があります）。そして右側のSELECT COLUMNS TO VISUALISE部分のImageに該当する列を割り当てればアイコンが表示されるようになります。
Google News Labでは他にも報道に役立つデジタル技術のワークショップやレクチャーを無償で行っています。各社に訪問しての開催をする場合も、オンラインでオープンに行う場合もあります。興味のある方はX（旧Twitter）、Facebook、LinkedInなどからご連絡ください。
この記事が気に入ったらサポートをしてみませんか？