放射状棒グラフの作り方

放射状棒グラフの作り方

今回は、放射状棒グラフの作り方について紹介していきます。

放射状棒グラフと聞くと、棒グラフの一種であることは想像できますが、放射状とは何だろうと疑問に思う方もいるかもしれません。

放射状とは、一点から四方八方にひろがった形状のことを意味します。

放射状棒グラフでは、その4分の3を使用して、円周上、各値を放射状の線の長さで表現します。最も長い棒(最大値)を4分の3の円周を使った放射線として表し、それを基準として他の値の長さを相対的に決めていきます。

この放射状棒グラフを使って何を作ろうか思いを巡らせていたところ、先日、日本のプロ野球12球団の平均年俸がニュースになっているのを思い出しました。

そこで、2022年度におけるプロ野球12球団の平均年俸を放射状棒グラフとして表現してみたいと思います。

では、作り方の説明をはじめていきましょう。

放射状棒グラフの元データ

もととなるデータは以下のような項目のファイルになります。

  • 1列目:Name
  • 2列目:Path
  • 3列目:Value

具体的には、以下のようなファイルであり、このファイルをデータソースとして指定します。

NamePathValue
ソフトバンク17002
ソフトバンク2707002
楽天16035
楽天2706035
西武14330
西武2704330
オリックス13992
オリックス2703992
ロッテ13077
ロッテ2703077
日本ハム12817
日本ハム2702817
巨人16632
巨人2706632
ヤクルト14050
ヤクルト2704050
DeNA13732
DeNA2703732
広島13693
広島2703693
阪神13456
阪神2703456
中日13118
中日2703118

「Name」には球団名が、「Value」に平均年俸(万円単位)が入ります。

各球団に対して、2行のデータを用意し、「Name」「Value」には同じ値を指定します。

「Path」には、それぞれ、1と270が入ります。これは、放射状棒グラフを、円を描くことで表現するのですが、最も大きい放射線は、4分の3の円周、すなわち、270度の角度となるためです。

ビンの作成

「Path」をもとに、以下のビンを作成します。

新しいフィールド名:Path (bin)
ビンのサイズ:1

これは、円をイメージしたときに、角度(「度」表記)を示します。1度から270度の間に、1度の間隔で、点を置いていくことを意味します。 この点を結んでいくことで、放射線ができます。

計算フィールドの作成

以下の計算フィールドを作成します。

名前:Index
INDEX()-1

「Index」は、 「Path (bin)」 の項番(0からはじまる)を示します。

名前:Max Value
WINDOW_MAX(SUM([Value]))

「Max Value」は、平均年俸の最大値を示します。

名前:Max Value for Name
WINDOW_MAX(SUM([Value]))

「Max Value for Name」は、球団ごとの平均年俸の最大値、すなわち、各球団の平均年俸を示します。球団ごとに複数のデータがあるので、本計算フィールドが必要になります。また、「Max Value」と同じ計算式になりますが、最大値のスコープが異なります。

名前:Step Size
[Max Value for Name]/[Max Value]

「Step Size」は、平均年俸の最大値に対する各球団の平均年俸の割合を示します。各球団の放射線の長さを計算するのに使用します。

名前:Rank
RANK_UNIQUE([Max Value for Name],’asc’)

「Rank」は、各球団の平均年俸を昇順に並べた際の順位(1からはじまる)を示します。放射線の位置(内側から何番目か等)を決めるのに使用します。

名前:X
SIN([Index]*PI()/180*[Step Size])*[Rank]

「X」は、Viz上の横軸をX軸、縦軸をY軸とみたときのX座標を示します。

名前:Y
COS([Index]*PI()/180*[Step Size])*[Rank]

「Y」は、Viz上の横軸をX軸、縦軸をY軸とみたときのY座標を示します。

以前、サテライト型チャートの作り方を紹介した際にも、X座標、Y座標が登場したかと思います。そのときに、(X,Y) =(SIN([Index]*PI()/180), COS([Index]*PI()/180))は、単位円(半径の長さが1である円)のX座標、Y座標であることを解説しました。

サテライト型チャートを説明する画像

今回は、その応用となります。違いを見ることにより、一歩踏み込んだ解説していきたいと思います。

(X,Y)=(SIN([Index]*PI()/180*[Step Size])*[Rank], COS([Index]*PI()/180*[Step Size])*[Rank]

よく見ると、違いは2つあることがわかります。

  • 1つ目の違い(ピンク色のマーカーの箇所

SIN、COSの関数内で、「Step Size」を掛けています。

「Step Size」は、平均年俸の最大値に対する各球団の平均年俸の割合でした。これを掛けることで、各球団の平均年俸に応じて、角度が変わり、放射線の長さが変わることになります。

例えば、DeNAの平均年俸はソフトバンクの約半分です。このとき、ソフトバンクの「Step Size」は1であり、DeNAの「Step Size」は0.53・・です。そのため、DeNの放射線の長さはソフトバンクの約半分となります。

  • 2つ目の違い(ブルー色のマーカーの箇所

SIN、COSの関数の外で、「Rank」を掛けています。

「Rank」は、各球団の平均年俸を昇順に並べた際の順位(1からはじまる)でした。これを掛けることで、円の大きさが変わります。

例えば、日本ハムの平均年俸は一番低く、「Rank」は1となるので、単位円のままであり、一番内側の放射線になります。逆に、ソフトバンクの平均年俸は一番高く、「Rank」は12となるので、半径の長さが12の円となり、一番外側の放射線となります。

ワークシートの編集

次の流れでワークシートを編集していきます。

  1. 「Name」をマークパネルの色に入れます。
  2. マークタイプを「線」に変更します。
  3. 「Path (bin)」をマークパネルのパスに入れます。
  4. 「X」を列シェルフに入れます。
  5. 列シェルフにある「X」を右クリックして、「次を使用して計算」の「Path (bin)」を選択します。
  6. 「Y」を行シェルフに入れます。
  7. 行シェルフにある「Y」を右クリックして、「次を使用して計算」の「Path (bin)」を選択します。
  8. 列シェルフにある「X」を右クリックして、「表計算の編集」を選択します。
  9. 表計算画面が表示されるので、ネストされた計算にて「Max Value」を選択します。
  10. 次を使用して計算にて「特定のディメンション」を選択し、「Path (bin)」と「Name」にチェックを入れた状態にします。
  11. 「Name」「Path (bin)」の順に並べ替えます。
X:表計算の編集:ネストされた計算:Max Valueを説明する画像
  1. ネストされた計算にて「Rank」を選択します。
  2. 次を使用して計算にて「特定のディメンション」を選択し、「Path (bin)」と「Name」にチェックを入れた状態にします。
  3. 「Name」「Path (bin)」の順に並べ替えます。
  4. 実行レベルを「Name」に変更します。
X:表計算の編集:ネストされた計算:Rankを説明する画像
  1. 行シェルフにある「Y」を右クリックして、「表計算の編集」を選択します。
  2. 表計算画面が表示されるので、ネストされた計算にて「Max Value」を選択します。
  3. 次を使用して計算にて「特定のディメンション」を選択し、「Path (bin)」と「Name」にチェックを入れた状態にします。
  4. 「Name」「Path (bin)」の順に並べ替えます。
Y:表計算の編集:ネストされた計算:Max Valueを説明する画像
  1. ネストされた計算にて「Rank」を選択します。
  2. 次を使用して計算にて「特定のディメンション」を選択し、「Path (bin)」と「Name」にチェックを入れた状態にします。
  3. 「Name」「Path (bin)」の順に並べ替えます。
  4. 実行レベルを「Name」に変更します。
Y:表計算の編集:ネストされた計算:Rankを説明する画像
ワークシートの編集を説明する画像

ワークシートの微調整

次の流れでワークシートの微調整をしていきます。

  1. 列シェルフにある「X」を右クリックして、「ヘッダーの表示」のチェックを外します。
  2. 行シェルフにある「Y」を右クリックして、「ヘッダーの表示」のチェックを外します。
  3. Viz上で右クリックして、「書式設定」を選択します。
  4. 線の書式設定にて、シートのグリッド線、および、ゼロラインを「なし」に設定します。
  5. 「Name」をマークパネルのラベルに入れます。
  6. 「Max Value for Name」をマークパネルのラベルに入れます。
  7. マークパネルにて、ラベルを左クリックします。
  8. ラベルにマークにて、「終点」を選択します。
  9. オプションにて、「終了行にラベル」のチェックを外します。
  10. ラベルの外観にあるテキストの「…」を左クリックします。
  11. ラベルの編集画面が表示されるので、以下の通り、入力し、<Name>を太文字に変更します。

<Name> <集計(Max Value for Name)>万円

  1. 「Name」凡例カードの「▼」を左クリックし、「色の編集」を選択します。
  2. 色の編集画面が表示されるので、それぞれ、球団の代表する色に変更し、「OK」ボタンを押します。
  3. マークパネルのサイズを左クリックして、サイズを調整します。
  4. マークパネルのツールヒントを左クリックすると、ツールヒントの編集画面が表示されるので、「ツールヒントの表示」のチェックを外し、「OK」ボタンを押します。
ワークシートの微調整を説明する画像

ダッシュボードの編集

次の流れで ダッシュボードを編集していきます。

  1. 新しいダッシュボードを追加します。
  2. サイズにて、「固定サイズ」の「ノートPCブラウザ(800×600)」を選択します。
  3. 作成したシートを追加し、「タイトルの非表示」にチェックを入れます。
  4. 「Name」凡例カードの「×」を左クリックして、ダッシュボードから削除します。
  5. 自動調整にて、「高さを合わせる」を選択します。
  6. 「ダッシュボードのタイトルを表示」にチェックを入れ、ダッシュボードの名前を「2022年度プロ野球12球団平均年俸 放射状棒グラフ」に変更します。
  7. シートを非表示にします。
ダッシュボードの編集を説明する画像

放射状棒グラフの完成

これで、2022年度におけるプロ野球12球団の平均年俸の放射状棒グラフが完成です。

ソフトバンクが一番高く、それに次いで、巨人、楽天の平均年俸が高いことがわかります。また、逆に、日本ハムの平均年俸が一番低いこともわかります。

【完成版】2022年度プロ野球12球団平均年俸 放射状棒グラフ

Tableau Publicのリンクを貼っています。

放射状棒グラフを作ってみての感想

放射状棒グラフを使えば、ダッシュボードにアクセントをつけることができ、目を引き付けるようなデザイン性のあるVizを作成することができます。また、通常の棒グラフでは縦長や横長になりますが、放射状棒グラフの場合はコンパクトな円の形となり、ダッシュボードのスペースを節約することができます。

ただし、値が横並びになっていないため、厳密な値の比較は難しいという欠点があります。それに、今回は12項目(=球団の数)でしたが、項目が多くなると円も大きく詰まったものになりますし、各項目の値が似たり寄ったりの値よりもばらついた値の方が見た目がよいように思います。そのため、使いどころは難しいかもしれせん。

ただ、放射状棒グラフがあると目を引くことは間違いないので、私も、機会があればまた使ってみたいです。ぜひ、興味を持たれたら、試しに活用してもらえたらとも思います。