Home > | > 「Yahoo! 3.11、検索は応援になる。」の検索ビッグデータのビジュアライザを作りました

「Yahoo! 3.11、検索は応援になる。」の検索ビッグデータのビジュアライザを作りました

  • 2014-03-11 (火) 12:51
  • ���̃G���g���[���͂Ăȃu�b�N�}�[�N�ɒlj�

3.11、検索は応援になる。 | Help Tohoku. Search “3.11”. – Yahoo!検索 (2014年3月31日まで公開)

今日、Yahoo!検索で「3.11」というキーワードで 検索された方おひとりにつき10円が、 Yahoo!検索から公益財団法人東日本大震災復興支援財団の「一般寄附金」へ 寄付されます。

とても意義のあるプロジェクトのビジュアライザをバスキュールがお手伝いさせていただきました。

震災前と震災後、そして現在に至るまでのYahoo!で検索された震災に関わるキーワードを可視化しています。

いくらか知見を得ましたので、ここでは

  • ビジュアライズの知見
  • ビジュアライズを実現するための高速プロトタイピング

という2点を書こうと思います。

ビジュアライズの軸のすえ方

データのどの特徴をx軸とy軸に置くのか?といった軸のすえ方が非常に重要でした。

今回のデータの大きな特徴は以下です。

  • 検索ワードの検索回数、順位
  • 時系列で検索ワードが増えたり減ったりする

いくらかプロトタイプを作り、試したが…

  • 見栄えはとてもいいが、データをわりと無視しているもの
  • データの大小を反映しているが、見栄えが悪いもの
  • データの順位を正確に表しているが、読みにくいもの

など、なかなかバランスが取れないものばかりでした。

もうすこし具体的に言うと

  • 色はワードごとに変えるのか?透明度は?
  • 出現したら場所は固定か?流動するか?
  • 大小をフォントサイズで表現するか?文字の領域の面積で表現するか?

などです。ちなみにフォントサイズで表現したほうが面積よりも正確に見えます。

これらの他に、ニュースマップボロノイ図なども検討しましたが、やはりしっくりきません。

Box2dで中央に配置

  • データの大小を美しく配置する
  • 日毎のデータの推移がわかりやすいようにする

という、二軸を重点に置きました。これが数多く試した中で、いちばんしっくり来た結果でした。

Box2dという物理演算ライブラリをつかい、画面中央に引力がある状態にし、自然と中央に集まるようにレイアウトしています。また、検索ワードの時間軸での移り変わりもわかりやすくなりました。

image

また、ずっと見ていても飽きないようにするには気持ちよいモーションだけでは持ちません。「おっ」と目を引く気持ち悪さもアクセントとして必要です。気持ちよさと気持ち悪さを絶妙のブレンドで仕上げています。

高速プロトタイピングで正解に近づく

どんなデータになるのか?どのくらいの量になるのか?どうすれば見栄えと意味を両立できるのか?

まったくの未知の課題であり、一発で正解にたどり着くことはありません。

効率よくスピーディに確かめるほかありません。

  • Flashでいろんなパターンをサクッとつくる
  • gitでいろんなバージョンを作りまくって巻き戻ったりできるようにする
  • 自分でデータを整形する
  • gruntですぐさまテストアップして確認してもらう

というサイクルを高速に回せればいい感じでした。

Flashで画面作成 + Nodeでデータ整形して、すぐに画面で確認する

Webで公開するのとあわせて、映像用素材としても書き出しが必要だったのでFlashで作っています。他の案件でCSS3 AnimationやCanvasゴリゴリしたりしてますが、やっぱりFlashだとできることが多いくて速いですね。

データ整形ですが、バスキュールでは他の案件でもビッグデータのビジュアライズをやっていますが、MySQLでデータを解析 + JSON書き出しという手段も使っていました。

が、どのようにデータを整形してどのようなJSONにすべきか?というのをサクッとやってしまわないといけなかったので、

NodeでCSVパース → ゴニョゴニョ → JSON 

としました。Nodeじゃなく、rubyでもpythonでもなんでもいいんですが、Nodeも手軽で楽ちんです。

あと、データはものすごく偏りが出る場合もあったり、震災直後はものすごく大きな数字だったりするので、対数変換などを使って慣らしていました。


こんな感じでいろいろいじくって、きれいな落とし所を探っていました。

gruntですぐさまテストアップ

を書くには長いので、Qiitaにでも投稿します!

みんなで「3.11」を検索しましょう

僕も阪神大震災を体験しています。友だちが死にました。毎年1.17になると「そいつのぶんまで生きよう」だとか「ダラダラ生きてきて、おれはそいつのぶんまで生きてないじゃないか」などという思いで心臓の下のほうが黒い煙でモヤモヤします。毎年です。

「3.11」は、とりわけ多くの感情がネットに広がっていることと思います。

自分の手で検索して、ネットの空間に存在している、誰かの何かの思いを見つけてみてはいかがでしょうか?

Home > | > 「Yahoo! 3.11、検索は応援になる。」の検索ビッグデータのビジュアライザを作りました


Search
Feeds
Meta

Return to page top