読者です 読者をやめる 読者になる 読者になる

調べもの帳

「役に立ちそうだなー」「これお金になりそうだなー」って思うことを書く

tobii eyeXで測定した視覚情報のcsvファイルからヒートマップ画像を作成してみた

前回、Tobii EyeXのSDKで測定用アプリケーションを作成しました。

tomohage-tech.hatenablog.com

実際に測定したデータを人に見せる際、やはり時系列データをポンと見せても「いや…見せられてもよくわからないっす…」という反応だと思われます。
そこで、こういう視覚情報の時系列データを他人に提示するために、ヒートマップやゲイズプロットのようなグラフを作成します。

本題ですが、今回は前回作成した視覚情報の時系列データを用いてヒートマップを作成します。
こういう図を作成する方法として、opencvとかmatlabとか使えば作成できるみたいですが、今回すごく簡単にヒートマップを作成できるPythonライブラリがあったので紹介します。

今回扱うライブラリはjjguy氏が作成したヒートマップライブラリです。

heatmap.py: create heatmaps in python

python2.xでしか使用できないので注意してください。

パラメータを少しいじれば見栄えがとても良いヒートマップ画像を作成することができます。
サンプルコードは以下のように作成してみました。

[2016/11/03追記]
コメント欄でguest様がご指摘している通り、
csvファイルの文字列読み込みの処理に問題があるようです。
サンプルコードの挙動に問題があれば、
コメント欄のguest様の改修案を参考に修正をお願いします。
尚、現状私の開発環境では再現できない状態になっていて、検証ができない状態です。
開発環境を用意し次第、検証・調査を行い、修正をする予定ですので、
準備ができるまで何卒、お待ちいただけるようお願いいたします。

前回作成した測定アプリケーションで生成した視覚情報のcsvファイルをそのまま読み込めば実行できますが、重要な箇所は以下のコードです。

    img = hm.heatmap(
        points=pts,
        size=monitor_size,
        dotsize=30,
        area=((0, 0),(monitor_size[0], monitor_size[1])),
        scheme='classic',
        opacity=150
        )

パラメータをざっくり説明すると以下のようになる。

points: ヒートマップを形成する点のリスト
size: 画像のサイズを指定するリスト
dotsize: ヒートマップで生成される点の大きさ
area: ヒートマップを生成する領域で、最少値と最大値で指定できる
scheme: ヒートマップのグラデーションを変えることができる
opacity: ヒートマップの透明度を指定できる

詳しくは配布先のページに書かれているので、不安でしたら確認してください。
実際コード書いて、パラメータを変更しながらヒートマップを作成するのもいいですね。

で、実際どんな画像が作成できるのかというと、このような画像が作成できます。

f:id:arystmk1104:20160328045029p:plain

この画像、ゲームプレイしている際のヒートマップでして、だいたい20分くらいの時系列データから作成しています。

長時間の時系列データを一気にヒートマップすると、一応特徴は捉えられますがわかりづらい結果になっています…。

どうせ作成するならもうちょっと短期的な時系列データで画像を作成するか、動画にした方が特徴が出るかもしれないですね…。

次回はヒートマップの画像を用いて、ヒートマップの動画を作成する方法を書きます。