特集 2022年5月19日

ヒートマップで表したい

ヒートマップの表現がかっこいいなと思っていた。描き方を覚えて、いろんなものに無理やり当てはめてみたい。好きな寿司ネタとか。


ヒートマップでいろいろ表したい

たとえば、ウェブサイト内のどこをユーザーが注目しているかを表すために、よく見られている箇所を赤、そうでない箇所を青で表したりするのが、ヒートマップのよくある使い方だ。

image-search.jpg
ヒートマップのグーグル画像検索結果

サーモグラフィみたいな表現がおもしろい。自分も真似して他の対象でやってみたいなあと思っていた。

というわけで今回そのための仕組みを作った。

ヒートマップ捏造システム

左のような適当な表を作ると、右のサーモグラフィ的な画像ができる仕組みだ。左側の表で数字が大きい場所ほど右側で赤くなっているのがわかると思う。

ごはんのときにどこを見るか

ウェブサイトを訪れるユーザーがどこを見るか、に似た例で、自分が日常の風景でどこを見るか、というのをやってみる。

お店でお寿司が出てきたときの風景だ。テンションが上がる。このとき自分はいったいどこを見ているかをヒートマップで表したい。

ただし、ちゃんと視線を分析したりするわけじゃない。自分の気持ちをもとに数値をでっちあげ、それをサーモグラフィっぽく変換するだけだ。

sushi3.jpg
表を作って、サーモグラフィ的な画像に変換する

 そしてこれを元の画像に重ね合わせる。

「こちらがユーザーのアテンションを分析した資料になります」

やってみた。うーむ。分かるような分からないような。

エビとマグロが好きなのかなーというのはなんとなく伝わる。ただ、寿司ネタってもとからだいたい赤いのが多くて、ちょっと分かりづらい。背景を白黒にしてもやってみたが、同じ印象だった。

なかなか難しいのか。別のをやってみよう。

カレンダーでやってみる

1週間のテンションをヒートマップにしてみる。月曜日に下がり、金曜日から盛り上がりっていく感じがあると思うのだ。

5月のカレンダーにその気持ちを表してみた。

気持ちの盛り上がりのヒートマップ

なんかコの字型になった。1週目は連休があったのでテンションが高いままだったのだ。

個人的には土曜日が好きだ。 万能感にあふれ、なんでもできるぞと思う。しかし実際には朝から「ぶらり途中下車の旅」などの番組を見ているうちにお昼になる。

夕方になると「人生の楽園」という番組を見てしまう。最後は必ずナレーションの西田敏行がその回の主人公たちに「応援してまーす!」と言って終わるのだが、いつか応援しないまま終わる回があるのではないかと思ってドキドキしている。

いったん広告です

50音表でやってみる

気持ちではなく客観的な値でやってみよう。

さっきからずっと唐突だが、日本語のひらがなのうち、文章でよく使われる文字はなんだろうか。それをヒートマップで表してみたい。

これに色をつける

有名な小説を二つ選び、そこに含まれるひらがなの量を調べてみた。

夏目漱石「吾輩は猫である」
太宰治「走れメロス」

二つ並べたのは、作品ごとに違いがあれば面白いかもと思ったからだ。ただ実際にはほぼ同じのようで、つまり日本語一般の傾向を表しているのだろう。

なんといっても「の」が赤い。「風の谷のナウシカ」である。次いで「い」だ。寒い、みたいな形容詞の語尾とかだろうか。

ちょっと面白いのは、走れメロスは「た」が多くて、吾輩は猫であるは「る」が多い。前者が過去形で書かれていて(「メロスは激怒し」)、後者は現在形で書かれている(「吾輩は猫であ」)のが影響しているのだろうか。

アルファベットでやってみる

同じ趣旨で、英語の文章でよく使われるアルファベットは何かを調べてみよう。

 これが、こうなった。

コナンドイル「シャーロック・ホームズの帰還」より『踊る人形』での結果

日本語での題を書いたが、実際は英語のほうの文章で調べている。

なんと言っても e が多い。そして t 。あとは母音の a, i, o が多いが、同じ母音でも u は仲間外れ並みに少ない。

『踊る人形』はホームズが暗号を解読する話だ。紙に人形のような記号列が書かれていて、それらがアルファベットを表しているなら一番多く現れるものを e と考えるべきだ、ということをホームズがワトスンに言っている。

まさにその作品自身の文章もそうなっていた。さすがホームズ。

周期表でやってみる

またまた話が飛ぶが、宇宙の中でそれぞれの元素がどれくらいの割合で存在するかをヒートマップにしてみたい。

周期表

上から順に水素、ヘリウム、リチウム・・というふうに、大まかにいって軽い順に並んでいる。宇宙の中にはこれらが同じ量だけあるわけではなく、多いのもあれば少ないのもあるわけで、それを見てみたいなあと思っていた。

多い=赤、少ない=青

大まかにいうと上のほうが赤い。太陽みたいな恒星の中で軽い元素から重い元素が作られていく、という仕組みを素朴に考えると、それはなんとなく合点がいく。

右上で C(炭素), N(窒素), O(酸素) が多いのをみると、生き物の体(のうちタンパク質)がここらへんで構成されているのも、まあそうなるかなと思える。下のほうの青い元素でうっかり構成された生き物がいたら、材料が足りなくて苦労しそうだ。

よーく見ると、左右で隣り合う元素どうしの色が少し違う。実は偶数番号の元素のほうが隣の奇数番号の元素より10倍ほど多いらしい。

将棋の盤でやってみる

最後は将棋の話である。また話が飛んだ。

将棋は、自分の駒を動かして相手の王様を取った方が勝ちというゲームである。それぞれの駒には動ける範囲があり、その範囲にいる相手の駒を取ることができる。

それぞれの駒の動ける範囲

たとえば右上の「歩」は前に一つ分だけ進むことができる。一方、その左の「王」は全ての方向に1つ進むことができる。動ける範囲をその駒の「利き」という。

上の図では駒がバラバラに離れているが、味方の複数の駒が並んだ場合、利きが重なるところが出てくる。そういう場所はそれだけ攻撃力や守備力が高いということができる。なのでそのようすをヒートマップにしてみたいなと思っていた。

初期配置の利き

駒の初期配置はこんなふうだ。「王」の前方3コマに利きが重なっているのがわかる。つまり王様の前方がよく守られている。あとは「角」の左上の「歩」もよく守られている。

ここから駒を動かして王様の周りを囲っていくのだが、その囲いに「矢倉囲い」や「穴熊囲い」というものがある。

矢倉囲い
穴熊囲い

穴熊囲いは守備力の高い囲いとして知られる。よっぽど赤くなるかと思っていたが、予想と違って矢倉囲いのほうが赤かった。つまり特定の箇所に守備力が集中しているということはあまり重要ではない、ということだろう。

趣味全開の狭い話をしてしまった。


まとまらない

ヒートマップでいろいろ表したら面白いかなあと思ってやってみた。それぞれの結果はぼくにとって初めて見る感じの画像で少しづつ面白かったのだけど、それぞれの話題がバラバラでまとまらない感じになってしまった。でも直感的に分かりやすい手法だということは改めて分かってよかった。以下、参考と出典です。

ヒートマップの作り方:
Creating Heatmap From Scratch in Python

「吾輩は猫である」「走れメロス」の文章データ:
青空文庫

「踊る人形」の文章データ:
Project Gutenberg

宇宙の元素比率の話(実際には太陽系のデータ):
太陽系の元素組成

将棋盤と駒画像データ:
Electron将棋

▽デイリーポータルZトップへ

デイリーポータルZのTwitterをフォローすると、あなたのタイムラインに「役には立たないけどなんかいい情報」がとどきます!

→→→  ←←←

 

デイリーポータルZは、Amazonアソシエイト・プログラムに参加しています。

デイリーポータルZを

 

▲デイリーポータルZトップへ バックナンバーいちらんへ
↓↓↓ここからまたトップページです↓↓↓

 

今日のみどころ