Tableauでの経時変化のグラフの実例集

Tableau
TableauTableau Tips

導入およびサンプルデータの紹介

今回は、「数値が経時的に変化しているデータ」のグラフ作成についてご紹介します。
例えば「とある自治体における人口の変動」というものですね。

できれば四半期ごとよりも毎月の粒度の方がいいなと思っていたところ、那覇市のオープンデータにちょうど良いものがCC-BY-4.0で公開されていましたので、これをベースにTableauでそのまま使える(=ユニオン等の工程を省略)サンプルデータを作成しました。

こちらのExcelデータをデータソースにしていただき、以下の手順をなぞってください。
(2025年2月9日00:07追記)元々のオープンデータにおいて「データに不備があったため、2025/02/06に差し替えを行いました。」とのことでしたので、472018_population_sample.xlsxも修正し差し替えています。2025年2月8日までのものをダウンロードしていた方は、差し替えをお願いします。

あ、最近は文章量がどんどん増加している傾向にある気がするので、今回はなるべくテキストは減らして手順を記載します。

めちゃくちゃ内容多くない?

 

MK
MK

画像は多いけど「テキスト」は少ない(当社比)はず。

また、解説はいいからできあがったものを見たい!という場合は完成形セクションまでショートカットしてください。

実例1: シンプルな経年変化の折れ線グラフ

「調査年月日」を右クリックしながら列シェルフへドロップし、「月」(緑色の方)を選択してOKをクリックします。

「総人口」を行シェルフへドロップ(こちらは左クリックでOK)します。

折れ線グラフとして時系列に沿った人口の推移が表現できました。

実例2: シンプルな経年変化の棒グラフ

「実例1: シンプルな経年変化の折れ線グラフ」セクションで作成した折れ線グラフの「マーク」を「棒」に変更します。

折れ線グラフに戻したい時は「マーク」を「線」にしましょう。

実例3: 前月との増減を表現する線グラフ(簡易表計算)

「実例1: シンプルな経年変化の折れ線グラフ」セクションで作成した折れ線グラフの「合計(総人口)」を右クリックし、「簡易表計算」から「差」を選択します。

なお、このグラフは解説のためにあえて作った途中経過のものであり、増減を正確に表現できていません

  • 「前月との」差を表しているため、最初の調査年月(2019年1月)が表示されていない
  • 実際は減少傾向にあるのに、「前月よりもプラス」になってさえいればグラフは上昇しているように見える
    • 2019年1月: 322,653人
    • 2019年2月: 322,605人(前月比 ▲48人)
    • 2019年3月: 321,094人(前月比 ▲1,511人)
    • 2019年4月: 321,515人(前月比 +421人)

実例4: 最初の月との増減を表現する線グラフ(簡易表計算)

「実例3: 前月との増減を表現する線グラフ(簡易表計算)」セクションで作成した折れ線グラフの「合計(総人口)」を右クリックし、「基準」から「最初」を選択します。

2019年1月時点の人口を基点として、以後の調査年月時点の総人口がそれよりプラスなのかマイナスなのかを表現できました。
また、こちらのグラフではきちんと2019年1月から線がスタートしています。

実例5: 最初の月との増減を割合で表現する線グラフ(簡易表計算)

ここでいったんシートを「複製」しておき、新しいシートで作業を進めると良いでしょう。


「合計(総人口)」を右クリックし、「簡易表計算」から「差の割合」を選択します。


「実例3: 前月との増減を表現する線グラフ(簡易表計算)」セクションと同じような折れ線グラフ、ただし軸の部分が異なるものができました。


先ほどと同じように「合計(総人口)」を右クリックし、「基準」から「最初」を選択します。


こちらも「実例4: 最初の月との増減を表現する線グラフ(簡易表計算)」セクションと同じような折れ線グラフ、ただし軸の部分が異なるものができました。

コラム1: 「差」と「差の割合」のどちらを用いるべきか?

軸が違うだけで「同じような折れ線グラフ」なら、どちらを使ってもいいんじゃないか?と思われるかもしれません。

しかし、線が1本であれば問題ありませんが、ディメンションにより線を複数に分ける場合などに表現の結果が異なる可能性があります。


「実例4: 最初の月との増減を表現する線グラフ(簡易表計算)」セクションで作成した折れ線グラフの「色」に「地域名」をドロップします。


「本庁」「真和志」「首里」「小禄」の4地区に折れ線グラフが分かれました。「真和志」地区の減少数が特に顕著のようです。


では、同じように「実例5: 最初の月との増減を割合で表現する線グラフ(簡易表計算)」セクションで作成した折れ線グラフの「色」に「地域名」をドロップします。


こちらも「本庁」「真和志」「首里」「小禄」の4地区に折れ線グラフが分かれました。割合で見ると、「真和志」地区よりもむしろ「首里」地区の減少率が大きいようです。


ダッシュボードにこれらの2つのグラフを並べてみると、「小禄」地区も実は減少率が大きくなっていることが分かります。これは、各地区のもともとの人数規模に差があり、2019年1月末時点と2024年12月末時点を比べると、

  • 本庁: 100,091人から98,761人=▲1,330人(▲1.33%)
  • 小禄: 59,766人から57,903人=▲1,863人(▲3.12%)
  • 首里: 57,308人から55,130人=▲2,178人(▲3.80%)
  • 真和志: 105,488人から101,630人=▲3,858人(▲3.66%)

というように、「小禄」地区は減少数は「本庁」地区に近いのですが、分母となる地区人口が大きく異なるため、減少率は「本庁」地区よりも他の2地区に近い状態であるということになっています。

そのため、MKの場合は、基本的に「差の割合」で折れ線を表現し、「差(の数字)」はラベルやツールヒントで補足するというやり方にしています。

コラム2: 簡易表計算の式を再利用しよう

「コラム1: 「差」と「差の割合」のどちらを用いるべきか?」の最後で「「差(の数字)」はラベルやツールヒントで補足する」と書きましたが、その場合は「計算フィールド」に簡易表計算の式をコピーしておくと操作しやすいです。

「実例3: 前月との増減を表現する線グラフ(簡易表計算)」を例に手順を紹介すると、


行シェルフにある「合計(総人口) △」フィールドをダブルクリックします。


ダブルクリックすると、計算式

ZN(SUM([総人口])) - LOOKUP(ZN(SUM([総人口])), -1)

が展開されるのでクリップボードにコピーします。


「データ」ペインから「計算フィールドの作成」を選択します。


クリップボードにコピーした計算式を使って「前月との人口の差」という計算フィールドを作成します。

同様に計算式をまとめると、

●前月との人口の差

ZN(SUM([総人口])) - LOOKUP(ZN(SUM([総人口])), -1)

●最初の月との人口の差

ZN(SUM([総人口])) - LOOKUP(ZN(SUM([総人口])), FIRST())

●前月との人口の差の割合

(ZN(SUM([総人口])) - LOOKUP(ZN(SUM([総人口])), -1)) / ABS(LOOKUP(ZN(SUM([総人口])), -1))

●最初の月との人口の差の割合

(ZN(SUM([総人口])) - LOOKUP(ZN(SUM([総人口])), FIRST())) / ABS(LOOKUP(ZN(SUM([総人口])), FIRST()))

となります。

今回は式の意味を覚える必要はありません。「簡易表計算のフィールドをダブルクリックして展開された計算式を、計算フィールドにコピペする」という手順を覚えてください。

実例6: ラベルの表示数を絞る


ここからは、「実例5: 最初の月との増減を割合で表現する線グラフ(簡易表計算)」のグラフを基に解説します。増減を割合で表現しながら、ラベルは実際の人口の数を表示します。


「総人口」を「ラベル」にドロップします。


各月における総人口が表示されましたが、ラベルの数が多すぎるとどの数がどの月のものなのか分かりにくいです。


「ラベル」をクリックして、「終点」をクリックします。


ここでは「開始行にラベル」「終了行にラベル」の両方にチェックが入っています。必要に応じてどちらか一方としてもいいでしょう。


また、増減の幅を表現するためには「最小値/最大値」を選んで、最も人口が少なかったタイミングと最も人口が多かったタイミングでラベルを表示してもいいでしょう。

実例7: ツールヒントを工夫する

このセクションではグラフそのものの表示は全く変更しません。ラベルの表示を最小限に抑える代わりに、ツールヒントの方に情報を充実させましょう。


「コラム2: 簡易表計算の式を再利用しよう」で作成した4つの式と「調査年月日」を「ツールヒント」にドロップします。


ツールヒントの内容には、以下のように記述します。

<属性(調査年月日)>時点
  <合計(総人口)>

前月時点との比較
  <集計(前月との人口の差)> (<集計(前月との人口の差の割合)>)

初月時点との比較
  <集計(最初の月との人口の差)> (<集計(最初の月との人口の差の割合)>)


このようなツールヒントを設定しておくと、Viewerが任意の時点にマウスを合わせることで、その時点の人口の数と、前月との増減の数・割合、初月との増減の数・割合を同時に確認することができます。

実例8: 既定の数値形式を工夫する

このセクションでも、グラフそのものの表示は全く変更しません。先ほどのツールヒントの設定に加え、数値形式も工夫して増減がわかりやすく伝えられるようにしょう。


「最初の月との人口の差」と「前月との人口の差」を他のシートでも使う可能性を考慮し、「既定のプロパティ」から数値形式を設定します。


数値形式は「カスタム」を選び、

+#,##0人;▲#,##0人

のように、;で区切ることで、そのフィールドの値が正の場合と負の場合の形式をそれぞれ指定することができます。


ツールヒントの「前月時点との比較」「初月時点との比較」の数字が「+166人」「▲567人」のように変更されました(負の値を▲とするか△とするか-とするかはお好みで変更してください)。


同様に、「最初の月との人口の差の割合」と「前月との人口の差の割合」も「既定のプロパティ」から数値形式を設定します。

+0.00%;▲0.00%

のように、今回は小数点以下2桁まで表示するパーセンテージとしました。


あわせて、総人口の数値形式も変更しましょう。なお、総人口は他のシートで表現方法を変える可能性が高いので、その場合は「既定のプロパティ」ではなくシートごとに設定してもよいでしょう。


総人口は自然数であり負の値は生じないので、「カスタム」ではなく「数値 (カスタム)」で設定しても構いません。小数点を「0」にし、サフィックスに「人」を付けました。これは「カスタム」で#,##0"人"と設定した場合と同様となります。


ツールヒントの内容が、前月または初月と比較し、何人増減したのか、また何パーセント増減したのかわかりやすくなりました。


また、「数値形式」の設定ではありませんが、ここまでの操作で「グラフの軸はパーセント」「ラベルは人数」となっており無用な混乱が生じる可能性があるので、軸は思い切って非表示にしましょう。「合計(総人口)」を右クリックして「ヘッダーの表示」のチェックを外すことで、ヘッダー(この場合では縦軸)を非表示にできます。

実例9: 初月より増加した場合のみグラフを明るい色にする

ここからは「そこまでしなくても、これまでの操作で充分に増減は伝えられるけど、あえてアレンジするなら」というおまけパートです。

「マークカードやシェルフのエリアをダブルクリックして、直接的に計算式を作成する」というテクニック(アドホック計算)を記事にまとめておきかたかった、というMKの自己満足とも言います。


これまでのグラフだと、初月以降ずっと減少傾向にあるので、ディメンションフィルターで地域名を「本庁」に絞っています。その状態で、マークカードのエリアをダブルクリックしましょう。


ダブルクリックして生じた空のフィールド部分に、「最初の月との人口の差」をドロップします。


ドロップしたフィールド名の後ろに>0と入力します。


[最初の月との人口の差]>0というアドホック計算式ができあがりました。これを「色」にドロップします。


初月の人口より増となった部分のみオレンジ色になるような表現になりました。


配色を好みのものに変更しましょう。「色」をクリックして「色の編集」をクリックします。


Tableauのカラーパレットから選択してもいいのですが、色名をダブルクリックすることでカラーコードを直接指定することもできます。


ここでは「真」の場合の色を#00b294としました。


同様に、「偽」の場合の色を#505050としています。

実例10: 前月より増加したか・減少したかでグラフのマークを変更する+二重軸グラフの解説

いよいよ総仕上げに入ります。先ほどまでで、初月との比較で色分けをしていますが、前月との比較による区別も付けましょう。


「実例9: 初月より増加した場合のみグラフを明るい色にする」までで作成したシートで、行シェルフ上の「合計(総人口)」をCtrlキーを押しながらクリックして右にスライドします
これは、データカラムから「合計(総人口)」をもう一度ドロップする場合に比べ、ツールヒントや書式設定も含めて複製できるテクニックです。


同じ線グラフが縦に2つ並びました。下の方のグラフの「線」を「形状」に変更します。


行シェルフの右側の方の「合計(総人口)」を右クリックして「二重軸」をクリックします。


線グラフと形状のマークが重なりました。ただし、重なりが微妙にずれているので、左の方の軸を右クリックして「軸の同期」をクリックします。


実例8の最後の方と同じように、行シェルフの右側の方の「合計(総人口)」を右クリックして「ヘッダーの表示」をオフにします。


実例9のダブルクリックのテクニックで、今度は「前月との人口の差」をドラッグします。


ここも実例9と同じく、ドロップしたフィールド名の後ろに>0と入力します。


[前月との人口の差]>0というアドホック計算式を、「形状」にドロップします。


実例9と違い、「真」「偽」のほかに「NULL」(前月との比較がされない=最初の月)があります。「形状パレットの選択」を「塗りつぶし」にし、NULLを「●」、偽を「▼」、真を「▲」にします。


マークのサイズは「サイズ」のスライダーを左右に動かして調整しましょう。


[前月との人口の差]>0をもう1つ作成して「色」にドロップし、それぞれ設定しましょう。ここでは、NULLを「#000000」、偽を「#737373」、真を「#ff8c00」にしています。


こうして、前月よりも人口が増となっていればオレンジの▲、減となっていれば灰色の▼のマークを表示しながら、初月よりも人口が増となっていればライムグリーンの線で表現するグラフができあがりました。

完成形

こちらが、今回の記事で解説した実例をそのままなぞって作ったVizです。


「どうしても同じように再現できない!」という場合は、このVizの画面から「ダウンロード」をクリックし、


「Tableau ワークブック」形式でダウンロードして試してみてください。


もし、Tableau PublicのWeb版でやっているよ!という場合は、「コピーの作成」からワークブックを複製しましょう。

コメント

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