あの世界的映画アクションスターの『怪我一覧』を可視化してみた|Tableau Software Tips&Viz Advent Calendar 2014 #23 #tableau

tableau-icon-for-blog

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

2014年アドベントカレンダー『Tableau Software Tips&Viz(全部俺) Advent Calendar 2014』23日目です。Tableau Softwareに関する機能紹介、便利ネタや可視化ネタ等を毎日1本ずつ計25本、『1人(全部俺)』で担当してお届けしています。

昨日23日目の投稿ネタは『Treasure DataのデータをTableau Serverに直接Publishする』でした。

本日23日目は『あのアクションスターの『怪我一覧』を可視化してみた』というエントリで行ってみたいと思います。

目次

 

『怪我』が付きもののアクションスターと言えば...

皆様はどんな人物を思い浮かべるでしょうか?

そう!ジャッキー・チェンですね!!(いきなり本題へ)

恐らく皆様と同じく、ご多分に漏れず、私も子供の頃には『プロジェクトA』での時計台落下、『ポリス・ストーリー 香港国際警察』での電飾ポール落下で『すげ〜!』と驚きつつ、『サンダーアーム 龍兄虎弟』の死線を彷徨う程の頭部大怪我にはショックを隠せず、『最後のアクション超大作』と銘打って公開された『ライジング・ドラゴン』(2012年公開)の時点では還暦間近にも関わらず危なっかしいアクション連発で『年齢的にはおじいちゃんなんだから無茶しないで(>_<;)』と肝を冷やしつつもその後の作品でも普通にアクションやってるので『アレ?』と思ったのも記憶に新しいところです。

そんなジャッキーも撮る作品撮る作品で怪我を至る箇所にしており、『良くここ迄生き延びて来られましたな...』という他ありません。1999年の自伝『I AM JACKIE CHAN』では自らの怪我についてページを割いて振り返っていますし、また『ライジングドラゴン』の映画パンフレットの中でも怪我一覧をリスト化したものが公開されたりと(一部)好事家やWEB界隈で話題となりました。

その『怪我の一覧』を可視化してみよう、とふと思い立ち、色々試してみたのが当エントリの内容となります。

 

Tableauの『背景イメージ機能』と『X軸Y軸座標』を用いた情報のマッピング

Tableauでは、マッピング機能の一環として『背景部分に画像を配置し、その上にX軸・Y軸を指定する事で任意の位置に情報(ポイント)をマッピングする、という事が出来ます。似たような仕組みで緯度経度を用いて地図上に要素を表示するものもありますが、それとは異なるものとなります。

まずはデータから。試しに1件データを用意してみます。出世作となった『酔拳』(1978年)でいきなり眉骨骨折し、失明寸前まで行くという結構な怪我を負っておりました。映画名、作品公開年(便宜上、その年の1月1日として登録する事にしています)、怪我情報、そしてX軸とY軸です。最後の2つはこの時点ではそれぞれ0を設定しています。

tab-adv-jc-injury-list-01

データの中から、[X軸]を列、[Y軸]を行に落とします。[映画名]もマークの詳細に。

tab-adv-jc-injury-list-02

この状態でメニューから[マップ]→[背景イメージ]を選択します。データソースが選択肢として出て来ますので、それを選択。

tab-adv-jc-injury-list-03

[イメージの追加]を選択。

tab-adv-jc-injury-list-04

ここでおもむろに用意していた画像をチョイス。幅500px、高さ490pxの画像です。

tab-adv-jc-injury-list-05_

選択しました。既にジャッキー、辛そうです。ここでは、X軸とY軸の交差するポイント(点)を参照する為に、対象とする項目とそのサイズを指定する必要があります。XフィールドにX軸を設定し左から0〜一番右が500px、同様にYフィールドにもY軸を設定し、下から0〜490pxとなるように値を設定します。

tab-adv-jc-injury-list-07

[オプション]タブの設定も見ておきます。[常にイメージ全体を表示]にもチェックを入れておきました。設定が終わったら[OK]押下。

tab-adv-jc-injury-list-08

[有効]の部分が『はい』になっている事を確認し、[OK]押下。

tab-adv-jc-injury-list-09

画面にジャッキーが出て来ました!

tab-adv-jc-injury-list-10

次いで、X軸Y軸の交差点を定める作業を行います。画面上で右クリックし、[注釈を付ける]→[ポイント]を選択。

tab-adv-jc-injury-list-11

すると、画面上にX軸Y軸の値を指し示すウインドウが出て来ました。(※初期表示だと背景色指定が無いので書式設定で色を付けました)

tab-adv-jc-injury-list-12

先程設定したデータでは眉骨とあったので眉の辺りにポイントをずらしてみます。(※スクリーンショット撮ってから気付いたのですが、眉骨はどうやらこの場所では無いようですね。(眉尻の下辺り?)撮り直すのも面倒くさいのでこのまま進めます(笑)

tab-adv-jc-injury-list-13

ここで得られた値を先程のデータソースに反映します。整数で来たり小数点含みの数値で表示されたりするので、その辺りは適宜程良い数値に切り上げる等してください。

tab-adv-jc-injury-list-14

保存後、データソースを右クリックして[更新]実行。

tab-adv-jc-injury-list-15

すると、先程指定した位置の辺りに青丸記号が表示されるようになりました。データによる座標位置指定が上手く行った様です。

tab-adv-jc-injury-list-16

後はこの記号の見せ方をカスタマイズしてみましょう。[マーク]から形状を変更し、

tab-adv-jc-injury-list-17

サイズを調整し、

tab-adv-jc-injury-list-18

色を変更し、

tab-adv-jc-injury-list-19

それっぽく表示してみました。

tab-adv-jc-injury-list-20

映画名・年・怪我情報等をマークの[詳細]に落としこむ事で、ツールチップにも表示されるようになり、所定位置の記号を選択する事で以下の様に情報が表示されるようになりました。

これで一連の作業は終了です。あとは同じ作業を怪我の数分、繰り返せば完成です。(ポイント表示ウインドウは要素を右クリックする事で展開されるメニューから削除出来ます)

tab-adv-jc-injury-list-21

ひと通り情報を踏まえた状態です。既にもう、顔が見えなくなってしまっていますw (どれだけ怪我してるんだ...というのがこれを見ても良く分かりますね)

jc-injury-101

 

Tableau Publicサンプルダッシュボード

当エントリに関するサンプルダッシュボードは以下となります。また、ダッシュボードにはとある『仕掛け』も盛り込んでいます。色々触ってみてください。

 

まとめ

以上、背景イメージとX軸/Y軸座標の機能を使った『怪我一覧の可視化』でした。

今回は人体画像でチャレンジしてみましたが、この仕組はフロアマップ等の表示にも活用出来ると思います。画像地図や階層マップ画像に於ける位置付けと数値データをマッピングさせる事で、使い方の幅も広がる事でしょう。また、『点』のデータをID値等で意味付けし、パス情報として定める事で動きのあるデータ可視化を行う事も出来たりします。皆様も是非色々試してみてください。

では、明日もお楽しみに!

参考情報:

AWS Cloud Roadshow 2017 福岡