【講演会】「モダンな」可視化アプリケーション開発とはどのようなものか?を開催しました

2017年7月8日(土)、TECHPLAY SHIBUYA(旧dots.)をお借りして、E2D3もくもく会と講演会を開催しました。 カリフォルニア大学サンディエゴ校医学部に所属するエンジニアであり、オープンソースのネットワーク可視化ソフトウェアCytoscapeのコア開発者である大野圭一郎さんをお招きして、『「モダンな」可視化アプリケーションとはどのようなものか?』と題した講演をしていただきました。 メインの講演は17:00からの予定でしたが、機材不調で参加者LT大会を先に実施。今回は総勢8名の方がLTをしてくださいました。発表者リストは以下の通り。参加者LTの振り返りは、メイン講演サマリーの後に続きます。 Vue.jsとmapboxを利用した位置情報可視化アプリケーション開発 by Kaito Kinjo データビジュアライゼーションから考える「料理とは何か?」 by 出雲翔 日用消費財の営業戦略運営で期待されるデータ可視化 by 篠原剛  E2D3の品質管理について by Junichi Watanuki データの可視化とチームの進化 by 吉田 雅史 スポーツデータビジュアライゼーション〜東京五輪に向けて〜 by 多田哲馬  D3.js バッドノウハウ集 by 清水正行 Grimoire.jsとデータビジュアライゼーション by 城山賢人 内容が濃く多岐にわたるLTで脳も身体も限界まで達したところで、メイン講演が始まりました。 スピーカーの大野圭一郎さんは、カリフォルニア大学サンディエゴ校医学部に所属するエンジニアで、オープンソースのネットワーク可視化ソフトウェアCytoscapeを開発された方です。Cytoscapeを使うと、遺伝子ネットワーク、ソーシャルネットワークが可視化できます。このソフトウェアを使って、塩基配列、たんぱく質、遺伝子の機能などのデータを統合・解析・可視化し、主に基礎医学研究者に対してデータを提供されています。研究者へのインタビュー、論文執筆、学会発表、ワークショッップの講師など様々な業務をされています。 最近では、①階層化された遺伝子群の可視化、②技術の古くなったアプリケーションの拡張、③良い技術を使いまわせるようにすること、をしていらっしゃいます。遺伝子オントロジーを機械的に生成するDeep Cell(仮)を新しいPJとして着手しています。 本日は、複雑なデータセットを可視化するアプリケーションのデザイン手法や実際の設計についてお話し頂きます。 【モダンなデータ可視化アプリケーション開発とは?】 テーマの一部でもある「モダンなデータ可視化アプリケーション開発とは?」という問いに答える前に、まず大野さんから質問。次のうちで現在使っているツールはありますか? D3.js ver.4 react BABEL webpack npm 大野さんはモダンを定義するにあたって、使用技術、開発スタイル、設計という三つの観点を挙げていらっしゃいました。使用技術が古くても開発スタイル(GitHub利用)や設計(データモデル、レンダリングレイヤーの分離)が新しいもの(Cytospaceが良い例)があることがわかりました。   モダンなデータ可視化アプリケーションの一つの定義として、以下の5点が挙げられます。 モジュール化されている よく知られた可視化のパターンや原則を利用している アプリケーションの基本設計として、データとUIの設計が構造化されている データの管理に一定のルールを持つ テスト可能 モダンであることは、特定の最新の技術を使うことではなく、アプリケーションの構造デザインと使用するテクノロジーの組み合わせが実現するものなのではないかと、大野さんはおっしゃっています。 とはいえ、無駄な労力を使わないツールを選ぶことも能力の一つ。モダンなデータ可視化アプリケーションの開発をする上で必要なツールについて、「現時点での」と条件を付けた上で、大野さんは以下のようにご教示くださいました。 Read more about 【講演会】「モダンな」可視化アプリケーション開発とはどのようなものか?を開催しました[…]

「E2D3第1回スポーツデータなんでも可視化アイデアソン」を開催しました

2017年2月18日、株式会社アットウェアさんの会議室をお借りして「E2D3第1回スポーツデータなんでも可視化アイデアソン」を開催しました。  version1.0を迎えた今期のE2D3が注力するのは、スポーツです。 3年後の東京オリンピックを念頭に置き、E2D3は誰もがスポーツデータビジュアライズを簡単に実現できるような環境を整えていきたいと考えています。第一回のイベントは、参加者の皆さんにスポーツデータの可視化アイデアを発表し合って頂くアイデアソンです。本日出たアイデアについては、3月4日開催予定のE2D3スポーツデータハッカソンにて実際にプログラミングする予定です。   イベントは午前と午後に分かれており、午前はスポーツデータ可視化イベント全体の企画会議、午後はアイデアソンを行いました。主催者側の難解なアナウンスのおかげもあり、多くの方が企画会議からご参加下さいました。午後のアイデアソンでは、インプットレクチャーの後、参加者全員が関心のあるスポーツ別に5つのチームに分かれてスポーツデータ可視化アイデアの練り上げを行い、最終的に5つのアイデアが発表されました。   ■企画会議  E2D3は、オープンソースのExcelアドインアプリケーションであり、E2D3開発及び普及に携わる人々のコミュニティそのものでもあります。コミュニティ自体がオープンなので、職種やこれまでのキャリアに関わらず、各自がそれぞれの目的意識を持ってコミュニティに貢献しています。その精神にのっとり、今回のイベント企画会議はスポーツのデータビジュアライゼーションに関心のある初参加の皆さんにもご参加いただける形式にしました。  E2D3についてのレクチャーの後。5人のE2D3イベント初参加の方と一緒に、①スポーツデータビジュアライゼーションの作品例のシェア、②あったら良いなと思うデータビジュアライゼーション例やデータ例、③データの視点での現在のスポーツジャーナリズムやオリンピック/パラリンピックの課題を、slack及びリアルでシェアしました。技術点と演技後構成点で評価される競技や異なる競技を比較し合う見せ方について、盛り上がりました。  ■インプットレクチャー 本イベントの方針と進め方について参加者にシェアした後、スポーツとデータビジュアライゼーションに関連したテーマのレクチャー二つが行われました。講師は午前中の企画会議に参加されたお二人、MatsuokaさんとKiryuさんです。    【Matsuokaさん 】 美術専門学校でデザインを教えていらっしゃる現役の先生です。授業で取り扱っている情報編集では、コンテンツ、コンテキスト、コミュニケーションの3つのCを意識して情報を伝達することが重要になります。授業で、電鉄各線の最速電車(特急、快速など)を同じ路線の低速の電車(各駅、鈍行など)と比較して何割早いかという基準を作ってビジュアルとともに比較させたことを例に上げていただき、「比較することで情報になる」「うごく、かわる、などものに動きが発生することで情報として成り立っていく」「情報可視化のファーストステップは基準をつくって他者と比較できる形にすること」等をインプットして頂きました。    【kiryuさん 】 ハッカソン大好きなデザイナーさん。スポーツデータの可視化におけるデザインの重要性についてレクチャー頂きました。 言語フリー、エイジフリー、属性フリーというスポーツデータのビジュアライゼーションの魅力を、美しいグラフィックとともにお話いただきました。「生きているグラフ」というキーワードを提示されましたが、スライドとお話自体が生きている動きのあるレクチャーでした。   ■チームごとにアイデアの練り上げ、そして発表 午前中にシェアされた過去のデータビジュアライゼーションやデータジャーナリズム作品をイメージしながら、各自が関心のあるスポーツ毎にチームでアイデアを練り上げました。チームごとの激しいディスカッションの結果、以下の五つの作品が発表されました。    「サッカー1」  プロ選手の体の動きと自分の体の動きを比較しよう。youtubeに動画をアップするだけで簡単に比較可能。生徒は自分のサッカープレーの様子を動画で撮影。簡易的なモーションキャプチャーに落とし込んで改善点を知る。使用シーンは、学校で友達と比較やプロ選手と自分のフォームとの比較。javascriptとHTML5で動的な解析ができるようなので、技術面でも問題なし。  自販機の購入時の顧客の視点移動の研究や、自販機詰めのプロと下手な人の動きの比較などを類推した、といったコメントがありました。    「サッカー2 」 サッカーのシュートの角度を測る。サッカーのキックは足の角度によって効果が変わってくることが研究でわかっている。実際に足の角度を測ることが出来る無料アプリを活用して、キックの効果を判別/学習していく。  個人技よりはチームのフォーメーション/戦略のほうが選手やチームにとって重要度が高いこともあるのではないか、実際のトレーニングに使えそう、といった意見がありました。    「野球・ソフトボール 」 「ボールをどこまで遠くに投げられるか」を可視化する。小学生が野外でボールを投げて遠投距離を測る。その結果を可視化して、飛ばした距離をイチロー選手の打球の飛距離や電車の車両の長さと比較する。  通常では比較できないようなものと自分とを比較してみたいという子供たちの興味をそそりそうだとのコメントがありました。 「イケメン卓球選手と学ぶ二次方程式」 卓球の球の動きを二次方程式の描く放物線と見立てて可視化します。イケメン卓球選手にうまく球を返せるような放物線を描く二次方程式を考えつけるかということがポイントで、二次方程式を学ぶ頃から数学に興味がなくなりがちな女子中学生をターゲットにしています。  こういうグラフがあれば、数学も好きになれたのにというコメントがありました。 「ドッキドキ 」 データ可視化によってよりエンジョイすることができる新しいスポーツを考えてくださったのが、「ドッキドキ」チームです。  心拍数が130になったらバトンを渡せるドキドキリレー。足の速さ等の身体的能力ではなくいかに心拍数を高くできたかどうかを競うことで、体型に関わらず協力して遊べる遊びを作り出しました。世界の裏側の人との協力や室内からの参加も可能です。自分の身体に興味を持ち、他者と協力することに関心を持てるようになるゲームです。    参加者投票による優勝は、ドッキドキチーム!おめでとうございます。   Slack上とリアルとでの平行した交流がイベント全体を盛り上げました。ターゲットは誰なのか、どのような機能があればターゲットがストレスフリーでデータ可視化に親しめるのかといったイベントコンセプトの細部から全体までを、参加者同士で考えるところからスタートした点に於いて特異な取り組みでした。面白いスポーツデータ可視化アイデアを出し合う純粋なブレインストーミングとは異なり、企画会議に参加した参加者自らイベントを設計し、ハッカソンの手前のアイデア固めまで行うボリュームのあるイベントでしたが、懇親会の参加率も高く、運営サイドを含めた参加者の多くが本イベントを楽しみ切ったように感じました。 有難うございました。