こんにちは、弊社で２ヶ月間インターンとして働いているg_takahashiです。
データの美しい視覚化に取り組んでいました。まとめていこうと思います。言語は Processing.pyです。Verは3.3.6です。
紹介する内容
- Processingってなんですか？
- 作成されたもの
- 詰まった所と学習法
- ArtとVisualizationの違い
- 2ヶ月インターン総括
Processingってなんですか？
Processingは芸術家向けのプログラミング言語といった感じです。基本的にJavaの構文が流用されます。簡単なゲームなんかも作れるようです。Animationの動きが良く、インタラクティブアート作品にも使われます。
Processing.pyはPythonで書けるように、少しいじられています。但し、2017/12/20 現在では、docsが整っていないように感じます。例えば、公式(http://py.processing.org/)もそこまで親切ではありません。また、参考書籍はJavaモードで書かれています。ちなみに、PythonのLibraryは基本的に使えません。例えばPandasやNumpyなどは無理ですね。
今回のインターンでは、筆者の力量不足からPythonモードを使いましたが（Pythonもほとんどできていなかったけれど）、次回以降はJavaで書いていこうと思います。これはPythonモードでは処理速度が遅いためです。具体的に言うと、PythonモードではBoidという鳥モデルを使うとき、50個くらいでもたつき始めるのですが、Javaモードだと300個までいけます。
補足すべきことは、Processing専用のmoduleが充実していることです。例えば、PeasyCamを使えば、簡単に3Dでの視覚を拡張することができます。アニメーションでよく利用されるBox2Dも使えるため、現実的な動きが再現できます。
作成されたものについて
Processing.pyによるデータの可視化について_ver2
2017/12/01から2017/12/22で150個以上 20,000個以下 商品を購入したユーザーはどのような商品を買っているのかということに着目して作成しました。
角度は離散値で、570個に分類分けされた商品を360度に変換して表示しています。そのため、たまに生じる左右への”ゆらぎ”は隣り合った商品を購入していることがわかります。(画素の問題も多分にありますが。)また、円の濃淡の区切りは購入数に対応します。円に到達した場合、右下に赤字で書かれた数を購入したことになります。
中央の赤丸からスタートしていて、近くで細かく動いている理由は、購入アイテム数によって降べきの順に並べているからです。
このグラフからは商品を大量に購入しているユーザーは少数の商品のみを大量に購入していることがわかります。また、点線が動かない方向、つまりあまり購入されない商品がわかります。一つの商品の種類を100以内の購入量で抑えて、他の商品も同様に購入するユーザーもいることがわかりました。
SQLの形をある程度整えると、時刻、購入数を変更してもグラフが書けるように設計したことで、グラフの再現性を高めることができました。
詰まった所と学習法
一度もProcessingに触ったことがなかったので、いろいろな本やブログを参照しました。ゲーム作りとかもやったことがなく、パーリンノイズとか、力学の応用は初めて使いました。同じようなスタートの人には次の勉強ルートがおすすめです。 [Processingをはじめよう 第2版]( https://goo.gl/SxGvsG) の次に [Nature of code](ググるとpdfで見つかります。無料。)です。 始めの本は優しく、1週間ほどでできる内容です。二つ目の本は、BoidやFlockingのような、自然界の動きに似た作品を作るときに重要かと思います。また、Javaに限りますが、Nature of Codeに出てきたコードは、ProcessingのExampleの中に入っているので参照しやすいです。
データ分析のバックグラウンドをほとんど持っていなかったため、Pythonに既にあるグラフで、見づらいものがあるか、つまり、どこでデータの可視化が必要になるかが理解できず、苦戦し、初めはArt作品よりのものを作成していました。しかし、社内スーパーエンジニア兼データサイエンティストのy_kawasakiさんにアドバイスをいただき完成しました。y_kawasakiさんの記事は以下です。
tech-blog.fancs.com
また、SQLの処理も多少本格的に触るのは初めてだったので、社内スーパーデータサイエンティストのh_matsumotoさんにアドバイスをいただきました。h_matsumotoさんの記事は以下です。
tech-blog.fancs.com
ArtとVisualizationの違い
合計4つのPrototypeを作りました。(Ⅰ). ３つのユーザーの３種類の商品購入数で３次元に描画する。 (Ⅱ). 期間を指定して、boidによる生態系を作る。(Ⅲ).指定したユーザーで、商品種類ごとに購入数を合算したベクトルを作り、２次元に描画する。 (Ⅳ). 3つ目の改良。商品種類と商品数からなるベクトルを作り合算せずに描画。頓挫した原因はそれぞれ異なりますが、簡単にまとめると、次のようになります。
(Ⅰ). 生じた結果にあまりにも意味がなかったことが強い理由です。また、実際に作ってみたらある商品を１種類の商品をあまりにも多く購入していたため、標準化すると、他の要素が潰れてしまうことも理由の一つです。
(Ⅱ). PCの処理能力の問題がありました。前述の通りオブジェクトを50個以上使用すると、もたつき始めるため、はじめに想定していた2000個以上のオブジェクトの描画が不可能になりました。加えて、3次元で描画したときに、各軸に対応するオブジェクトの共通要素を選ぶことが困難でした。
(Ⅲ). 2次元への描画だったので、方向360度を商品種類に対応させ、合算したベクトルを利用したのですが、各ベクトルが、線形従属であったため、表示された結果が、データが持つ情報と乖離してしまいました。下記は、具体例です。各屈折点に到着するまでに多様な解釈ができてしまいます。
上記３つは、解釈が多様に生じてしまうという点で、Artの意味合いが強く、Visualizationという点からは未熟でした(もちろん慣れるためでもありましたが)。データの可視化(Data Visualization)はデータの見せ方であって、情報を要約していなければならないためです。そのため、Boidのような生物モデルを利用しての描画は、提示できる情報量が過多であることに加えて、処理されるべき情報が過少になってしまい、一貫性を保つことが難しいです。しかし、熟練すればそれもできるようになるのかと思いますが、想像の範囲を超えています。
他の視点から考えると、Matt Pearsonの[Generative Art]にあるような、ゆらぎと創発の考えは、美しく仕上がりますが、データの可視化には向かないように思います。冗長な部分が理解を妨げてしまうためです。
この本は購入するとPCで全文が見れるようになっていて非常に便利です。さらに、本で購入すると白黒印刷ですが、PDFだとカラーです。白黒でも味があるのですが、カラーだと光の表現が分かりやすく、取り入れやすく、購入をおすすめします。
下のスケッチは創発する泡です。Generative Artの一種ですかね。
スケッチ内をクリックすることで、画面内に半径と初期位置が異なる透明な円を複数個発生させ、円が重なるところで有色の円を発生させています。
ファンコミュニケーションズ インターン総括
初めてのインターン体験だったので初めは過剰に緊張しましたが、インターン担当の内田さんがいろいろと面倒を見てくださり、快適に過ごすことができました。内田さんありがとうございます。
入社した段階では、Railsの経験が2ヶ月で、他の言語はほとんどわからない状態でしたが、Processingを通していろいろな言語に触りました。本での勉強が多かったですが、調べるのに過度に時間がかかりそうな場合や、エラーの修正で考えられることを試して、ダメそうなら社内のエンジニアの方たちに聞きにいきました。
まとめると、非常に面白かったです。働いているビルからは渋谷の国連センターのようなものが一望でき、ポジティブな気持ちになれることも良かったです。私は合計5ヶ月間程インターンをさせて頂く予定です。