2025.08.14

Bar chart raceの作成方法(例:VTuberのチャンネル登録者数の推移)

shimasan0x00

こんにちは，shimasan0x00（@shimasan0x00）です．

このドキュメントでは，以下のYouTube動画のようなデータ可視化手法であるBar chart raceをflourishで簡単に作成する方法を紹介します．

Contents

flourishとは
Bar chart raceの枠を作成する
データの準備
備考：細かい設定値
参考

flourishとは

flourishとは様々なデータ可視化をコーディングなしで作成することのできるサービスです．

ユーザはデータを用意するだけで様々なグラフ・チャートを容易に作成することができます．

以下は可視化の一例ですが，これだけでなく下には相当数のテンプレートがあり，基本的にユーザが求める表現には出会えるのではないでしょうか．

Flourish

Bar chart raceの枠を作成する

ユーザ登録が完了したら，さっそくflourishでBar chart raceを作成してみましょう．

New visualizationを選択してください．

下の方にBar chart raceカテゴリがあるので，一番最初のBar chart raceを選択します．

はい！おめでとうございます！

初めてのBar chart raceをもう作成することができました！！

(Created with flourish.studio: https://flourish.studio/)

右側にBar chart raceに関わる様々な設定を実施できます．

変更はリアルタイムでプレビュー画面に反映されるため，自分の好みの見た目に設定できます．

次はDataのタブを選択してみてください．

エクセルのようなデータが並べられていることがわかります．

つまり，この形式(csv)でデータを用意することができれば誰でも簡単にBar chart raceが作成できるわけです．

記事冒頭で共有した動画のようにするためには以下の要素を揃える必要があります．

VTuber名
Vtuberの画像URL
特定の時間のチャンネル登録者数
- 同じ時間粒度で列を用意する必要あり

データの準備

私は以下の情報をX（旧：Twitter) APIとYouTube APIで収集していました．

VTuber名
- X（旧：Twitter) API
Vtuberの画像URL
- YouTube API
特定の時間のチャンネル登録者数
- YouTube API

name,screen_name,follow,follower,youtube_id,channel_subscriber,belonging,region,date,ff
ユーザ名,Xの＠名,Xのフォロー数,Xのフォロワー数,YouTubeのチャンネルID(@XXXXではない),YouTubeのチャンネル登録者,所属,地域,取得日,FF

name,screen_name,follow,follower,youtube_id,channel_subscriber,belonging,region,date,ff
ユーザ名,Xの＠名,Xのフォロー数,Xのフォロワー数,YouTubeのチャンネルID(@XXXXではない),YouTubeのチャンネル登録者,所属,地域,取得日,FF

上記のデータを日付列を持たせるようにpandasで変換します．

pandasでcsvで出力します．

変換できたらflourishにアップロードして自分の好みの設定にすれば完成です．

データラベルの設定は以下．

備考：細かい設定値

Bar chart raceのPreviewタブで設定できるsetupの項目を以下に記載しておきます．

setup
- Chart style: Horizontal
- No. bars: 15
- Spacing: 10
- Sorting: On
- Sort mode: 降順
Colors
- By bar
- Extend: True
- Bar Opacity: 0.8

Labels
- Max size: 0.8
- Labels mode: Labels in axis(images on bars)
- BAR LABELS
  - Space: 7.75
- VALUE LABELS
  - Space: 7.5
  - Show balues: True
Images
- Height: 80
- Width: 145
- Margin right: -20
- Image sizing: Fit
- Shape: Circle
Counter&totalizer
- CURRENT TIME COUNTER: True
- Size: 10
- Line height: 1
Timed captions
- Opacity: 0.8
- Padding: 1
- Align: 中央揃え
- Position: Center
- Fontsize: 1
- Content mode: Text with colors
- Position: Images below (content above)
- Space between: 1
Legend
- Enabled
- Size: 1
- Weight: Normal
- Title mode: Auto
- Weight: Bold
- SWATCHES
  - Width: 0.75
  - Height: 1
  - Boundess: 3
- Orientation: Horizontal
Axis
- Text size: 1
- Type: Dynamic
Annotations
- Enabled
- Size: 1
- Weight: Regular
- Opacity: 1
- Width: 1
- Align: Middle
- Offset: On line
Timeline & animation
- Enabled
- Style: Timeline
- Show chart: Hide
- Play on load: True
- Loop timeline: True
- Timeline duration: 60
- Time jump duration: 2
- Pause before loop 0
- Layout settings: True
- Top: 0.75
- Left: 0.75
- Bottom: 0
- Right: 0
- Space between button and timeline: 1.25
- Scrubber height: 3.25
- Bar swap duration: 0.5
Number formatting
- Decimal separator in data sheet: .
- Number format to display: 12,235.67
- How to handle blank/invalid cells
  - Interpolate
- Number styling
  - Decimal places: 0
Layout
- Main font: Coda
- Color: On
- Image: Off
- Maximum width: None
- Layout order: 右から二番目
- Space between sections: 一番左
- TOP: 0.75
- Right: 0.75
- Bottom: 0.75
- Left: 0.75
Header
- Alignment: 左寄せ
- LOGO/IMAGE
  - Disabled
Footer
- Alignment: 一番右
- Size: 1
- LOGO/IMAGE
  - Disabled
Accessibility: Hidden