Tableau：SIN、COS関数を使ってTableauでアナログ時計を作る
Tableauの関数にはSUMやAVGなど頻繁に使うものから、「これ絶対使わないだろ！」と思う関数もたくさん存在します。
今回はその中の、「SIN」と「COS」を使いアナログ時計を作ってみようと思います。
SIN、COS関数の機能
SIN(number) 、COS(number) で数値を返します。
SIN(90)=1 、COS(0)=1 などとなります。
また、三角関数では一般的に角度の箇所は『π/2』などとπを絡ませて使われます。
Tableauにもπを示す関数は存在し、『PI()』で指定します。
アナログ時計の設計
Tableauでアナログ時計を作る構想は次のような感じでいきます。
① 時針と分針を分ける
② 針の先と、中心に座標を割り振る
③ ②の2点を結ぶ
まずはデータから作る
データをオリジナルで作る必要がありそうなので、まずはその設計から。
①時針と分針を分ける
時針と分針はそれぞれ別の速さで動くので、分ける必要があります。
今回は、
ディメンション『TimeUnit』を作成し、「hours」と「minutes」の２つを持たせます。
②SIN、COS関数を使い座標を割り振る
時計の針は、中心(0,0)と先(A,B)から成ります。
中心は(0,0)で固定。
時計針の先は平面の円周上を動くので、『〜時』と『〜分』の2つの変数で指定できます。
針の先の座標の振り方は、以下のサイトを参考にしました。
これを踏まえ、
path=0→X座標もY座標も0となる(時計の中心)
path=1→X座標、Y座標は時間・分に合わせTableau上で計算させる(時計の針先)
とすれば良さそうです。
③パスマッピングで２つの点をつなぐ
分針を１つに定めるためには、針の先と時計の中心の２つの(円上での)座標が必要です。
つまり、円の中心(0,0)と針の先(A,B)を繋げば針の完成です。
そして、このように起点と終点を繋ぐにはTableau上で「パスマッピング」という機能を使います。
↑のようなデータの場合、pathが0→1のように小さいものから座標を繋いでいきます。
↓再現図がコチラ
pathIDの順番通りの線が繋がっています。
これで時計の中心(pathID=0)と時計の針先(pathID=1)を繋げば良さそうです。
まとめます。今回の時計をTableau上で表現するフローとしては、
このようになります。
そして、データの形としては(例えば12時34分を可視化したい時)
こんな感じにいけそうです。X座標、Y座標はTableau上で計算させます。
実際に可視化してみた
上記を踏まえ、アナログ時計を可視化しました。
スライダーを使うことで時間と針が動きます。
詳しいフィールド計算をみたい方は上記からDLしてください。
ついでに、このアナログ時計を使い、Tableau社の世界中のオフィスの時間帯が連動してわかるビジュアライゼーション、「Tableau Watch」を作成してみました。
Tableau Publicでは「ページ機能」が使用できないので残念ですが、針がくるくる回って楽しいですよ。
