___ English ____

Exhibit at NTT Tech Conference # 2

On 10th August 2017, we have participated in the demonstration (hands-on) of E2D3 and the lecture (the utility of OSS noticed in the development of E2D3) to “NTT Tech Conference” held at Tamachi Gran Park Plaza.
At the demonstration exhibition corner, we were able to share information on data visualization to a large number of visitors by screening the demonstration movie of E2D3 and receiving consultation as a visualization counseling room for anything. (The materials announced on the day will be posted below)

The post NTT Tech Conference #2への参加について first appeared on E2D3.

LT2は、デザイナーの山崎さんから。「無責任企画」と題してE2D3のデータ可視化をグレードアップさせる企画をご提案頂きました。モーションキャプチャーやARを使って、スポーツデータを体感できる環境を作り出せば子供も大人もデータとスポーツをより楽しめるという趣旨の企画で、会場からも実現の為のアイデアがたくさん上がりました。

久しぶりのもくもく会、楽しかったですね！

The post 【E2D3】データビジュアライゼーションもくもく会 vol. 7！ first appeared on E2D3.

カリフォルニア大学サンディエゴ校医学部に所属するエンジニアであり、オープンソースのネットワーク可視化ソフトウェアCytoscapeのコア開発者である大野圭一郎さんをお招きして、『「モダンな」可視化アプリケーションとはどのようなものか？』と題した講演をしていただきました。

メインの講演は17:00からの予定でしたが、機材不調で参加者LT大会を先に実施。今回は総勢8名の方がLTをしてくださいました。発表者リストは以下の通り。参加者LTの振り返りは、メイン講演サマリーの後に続きます。

1. Vue.jsとmapboxを利用した位置情報可視化アプリケーション開発 by Kaito Kinjo
2. データビジュアライゼーションから考える「料理とは何か？」 by 出雲翔
3. 日用消費財の営業戦略運営で期待されるデータ可視化 by 篠原剛
4.  E2D3の品質管理について by Junichi Watanuki
5. データの可視化とチームの進化 by 吉田 雅史
6. スポーツデータビジュアライゼーション〜東京五輪に向けて〜 by 多田哲馬
7.  D3.js バッドノウハウ集 by 清水正行
8. Grimoire.jsとデータビジュアライゼーション by 城山賢人

内容が濃く多岐にわたるLTで脳も身体も限界まで達したところで、メイン講演が始まりました。

スピーカーの大野圭一郎さんは、カリフォルニア大学サンディエゴ校医学部に所属するエンジニアで、オープンソースのネットワーク可視化ソフトウェアCytoscapeを開発された方です。Cytoscapeを使うと、遺伝子ネットワーク、ソーシャルネットワークが可視化できます。このソフトウェアを使って、塩基配列、たんぱく質、遺伝子の機能などのデータを統合・解析・可視化し、主に基礎医学研究者に対してデータを提供されています。研究者へのインタビュー、論文執筆、学会発表、ワークショッップの講師など様々な業務をされています。

最近では、①階層化された遺伝子群の可視化、②技術の古くなったアプリケーションの拡張、③良い技術を使いまわせるようにすること、をしていらっしゃいます。遺伝子オントロジーを機械的に生成するDeep Cell（仮）を新しいPJとして着手しています。

本日は、複雑なデータセットを可視化するアプリケーションのデザイン手法や実際の設計についてお話し頂きます。

【モダンなデータ可視化アプリケーション開発とは？】

テーマの一部でもある「モダンなデータ可視化アプリケーション開発とは？」という問いに答える前に、まず大野さんから質問。次のうちで現在使っているツールはありますか？

• D3.js ver.4
• react
• BABEL
• webpack
• npm

大野さんはモダンを定義するにあたって、使用技術、開発スタイル、設計という三つの観点を挙げていらっしゃいました。使用技術が古くても開発スタイル（GitHub利用）や設計（データモデル、レンダリングレイヤーの分離）が新しいもの（Cytospaceが良い例）があることがわかりました。

モダンなデータ可視化アプリケーションの一つの定義として、以下の5点が挙げられます。

• モジュール化されている
• よく知られた可視化のパターンや原則を利用している
• アプリケーションの基本設計として、データとUIの設計が構造化されている
• データの管理に一定のルールを持つ
• テスト可能

モダンであることは、特定の最新の技術を使うことではなく、アプリケーションの構造デザインと使用するテクノロジーの組み合わせが実現するものなのではないかと、大野さんはおっしゃっています。

とはいえ、無駄な労力を使わないツールを選ぶことも能力の一つ。モダンなデータ可視化アプリケーションの開発をする上で必要なツールについて、「現時点での」と条件を付けた上で、大野さんは以下のようにご教示くださいました。

• 言語：　ES2015以降
• パッケージマネージャー：　npm
• ビルドツール：　webpack3
• コンポーネント化：　React
• 可視化：　D3.js, 好みのレンダリング技術

これらが組み合わされば、①トランスパイル、ミニファイ、テストなどの自動化、②モジュール化とそれに伴う再利用性の向上、③コンポーネントベースでの可視化機能設計が出来ます。少し前に、「フロントエンド界隈が複雑化しすぎ問題」がありましたが、最低限、npm（依存管理）、webpack（ビルドとタスク実行）、BABEL（互換性のための変換）があれば良く、基本的なツールの提供機能にそれほど変化はないのではないかとまとめています。

【複雑なデータセットを可視化するアプリケーションのデザイン方法】

使用するテクノロジーには大きな制限やルールがないことがわかりましたが、アプリケーションの構造デザインはどのように形作れば良いのでしょうか。

データの示し方には、①シンプルなチャート（棒グラフ円グラフ）、②scrollytelling（複数のデータセットを用いてストーリーを構成）、③data dashboard（複数のデータセットを複数の手法で可視化）、④ライブラリ（汎用性を高めて他者が再利用できるように設計してあるコンポーネント）があります。

示し方に応じて必要となるフレームワークは変わってきます。使用するデータと最適な見せ方を明確にした上で、それに応じたフレームワークを選ぶことが重要だと大野さんは言います。

ここで、ダッシュボードの全てをツリーで構成した実際の構造デザイン例を見せていただきました。

実際に使ったデータは、大規模な遺伝子ネットワーク、それらを統計解析し生成したオントロジー、遺伝子アノテーションです。すなわち、階層構造、グラフ（ネットワーク）、テーブルデータを互いに関連するものとして可視化し、ユーザーの選択に基づいて複数のビューを連動させていくということを行います。

1. まず、可視化に必要となる要素をコンポーネントのツリーとして書き出します。
2. 次に、そのコンポーネントを作るために必要なデータモデルを考えます。
3. 最後に、可視化アプリケーションを実現するために必要なバックエンドをツリーで構成します。

これらのステップは全てツリーで行われました。可視化アプリケーションを実現するにあたり、表示されるものや求められている見え方を整理するためにツリーは重要なツールとなります。

【実際の設計と実装：React + D3を例に】

実装の際に大野さんは、主にReactとD3.jsを使っているそうです。Reactは小さめのフレームワークで且つコンポーネント化することを意識した設計になっています。D3.js、特にversion4は大規模アップデートがされており、可視化のための標準ライブラリとなってきています。

この二つにそれぞれ役割分担をさせ、組み合わせてつかうことでデータ可視化アプリケーションが実装できます。Reactには仮想DOMの管理をさせ、D3.jsは数学用ライブラリとして使います。描画をReactに任せてほぼReactのみで実装する方法もあれば、その逆もあります。実装者の技量、アプリケーションのサイズ、取り扱いデータの大きさなどによってどちらの方法をとるか変わってきます。

かっこつけずに、目的を達成するために必要なものはなにか、一番の近道はなにかを考える必要があります。必要に応じて、バックエンドで処理するようなコードを書いたり、PythonやRの方が得意そうな処理であればそれらでコードを書いた上で呼び出せば良いのです。全てをフロントエンドで処理する必要はありません。バックはDockerで、フロントはnpmで、パッケージしていけばシンプルにいつでも再利用可能です。

大野さんのお話は、極めて実践的な大学の講義のようでした。参考文献として、Learning Reactをあげていただきました。

今回の講演で、「モダンな」可視化アプリケーション開発について、以下のことがわかりました。

• メンテナンス可能な構造である
• 特定のテクノロジーに縛られすぎていない
• React+D3.jsの組み合わせが開発のための現時点での最適と考えられる選択肢である

大野さん、参加された皆さん、お疲れさまでした！

質疑応答の時間もたっぷりとりました。一部をご紹介します。

Q. バックエンドはシンプルに、とのことでしたが大量のデータを処理するためのデータストアは必要だと思いますが、よく使われるミドルウェア、あるいはサービスはありますか？

A. Elastic Search 等

Q. 新しい技術の導入の判断基準は？日本だと声の大きい人の意見がそのまま通ってしまうこともあるが？

A. 米国ではある程度ドキュメントがしっかりしていて、ジュニアプログラマーが作れるか（に仕事を頼めるか）が判断基準。英語版の書籍が出た時点で技術を評価してみようかという話になる。

Q. ネットワーク分析による可視化を行った後の解釈や説明を行う際の工夫や注意点など、心がけるべきことは？自身の経験（ツイッターつぶやきデータの可視化等）上、ネットワークの可視化を行い、見せても「ふーん。すごいね。」程度で終わることが多いので。

A.  アイキャッチはよく作るが見栄えが良いのと使いやすいのは違う。「だから何？」と言われないためには、サーチ、フィルタリング、インタラクティブ等の機能で使いやすさの向上が大事（サブグラフ発見、他データのオーバーレイ等）。KEGG等の人力レイアウトも。

LTのまとめ

1. Vue.jsとmapboxを利用した位置情報可視化アプリケーション開発 by Kaito Kinjo

Kinjoさんは、株式会社ナイトレイのWebアプリケーションエンジニア。inbound insightの開発を手掛けていらっしゃいます。リリース当初はjQeuryなどを使っていましたが、いまはVue.jsとMapbox押し。PHPエンジニアが多いので、今後はLarabelを使っていきたいと考えているそうです。HTMLを編集せずに移行しやすいのがVue.js。GISの世界をブラウザで実現できると感じていらっしゃいます。会場からは、「inbound insightすてき！」、「mapbox使ってかっこいい地図かけそう」などといった声が上がりました。

2. データビジュアライゼーションから考える「料理とは何か？」 by 出雲翔

ご自身はビックデータを扱うデータサイエンティストである出雲さん。料理＝10種類の食材を組み合わせるもの、と仮定した上で、Flavor Network理論を実際にTensor Boardで可視化してみました。理論によれば、ビールとミルクは相性が良いそうです。データだけで見るとコーヒーとビールはテイストが少し似ていることが、その原因のよう。データ可視化によって、料理のプロ／天才のひらめき以外の方法で、料理のイノベーションが起きるかもしれませんね。出雲さんは、データビジュアライゼーションは直感的な理解を得らえる手法と考えていらっしゃいます。他にも、食材間の距離を計算して、その国らしさを算出して可視化するなどのプロジェクトを試みていらっしゃいます。

3. 日用消費財の営業戦略運営で期待されるデータ可視化 by 篠原剛

＝このコンテンツは当日ご参加いただいた方のみお楽しみ頂けました＝

4. E2D3の品質管理について by Junichi Watanuki

Watanukiさんは、E2D3では主にアプリケーションの品質管理を担っていただいているエンジニアです。オープンソースで様々な人が参加するE2D3では、品質管理の方針として「とりあえず初めて触った人がクリックをしていくだけでそれなりに可動を確認できるようにすること。」を決めています。2016年4月にwatanukiさんを中心として始まったE2D3品質向上プロジェクトにおける進め方や困った点についてお話しいただきました。スライドは、オープンソースの品質管理の参考になるかもしれません。

5. データの可視化とチームの進化 by 吉田 雅史

吉田さんは、人材派遣会社でマーケティングのためのデータ分析をするエンジニア。脱エクセルを目指して、PHPとMySQLとJavascriptでWebアプリケーションを構築。人間によるミスや手作業によるスピード感のなさを解消させました。

チームにエンジニアが入ることで、欲しいものをチームで一から作り上げていく結束感を得られたと言います。共同作業によりアナリストとエンジニアとの信頼関係が構築され、その結果データが民主化（だれでもいつでもどこでも見られる）され、チームメンバーが自らの主体的なアクションでデータを活用できる環境が実現したそうです。技術が味方になることによってチームの意識が向上していく様子を感じられました。

6. スポーツデータビジュアライゼーション〜東京五輪に向けて〜 by 多田哲馬

＝このコンテンツは当日ご参加いただいた方のみお楽しみ頂けました＝

7. D3.js バッドノウハウ集 by 清水正行

＝このコンテンツは当日ご参加いただいた方のみお楽しみ頂けました＝

8. Grimoire.jsとデータビジュアライゼーション by 城山賢人

城山さんは現役の大学生で、grimoire.jsを作った方です。webと連携したデータビジュアライズの可能性や波動方程式のビジュアライズについてお話しいただきました。Three.jsとgrimoireの違いについては、前者が3Dエンジニアによる複雑なコードで書かれている印象があるのに対し後者はHTMLでかける点が特徴となっているそうです。

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

まずは、和から株式会社　堀口代表からのお話。

• 新潟県ご出身。山形大学卒業。大人のための数学教室　和（なごみ）を運営。数学好きの為のイベントを多数開催。
• 学んできた数学と社会で必要とされる数学（統計学、微積分など）が異なっていることを課題に感じている。
• 教室には、数学を純粋に楽しむ方から仕事スキルとして統計学を学ぶ方まで幅広く在籍。0.1と0.2の違いについて説明を要する方も。

今回はコラボして頂き、有難うございます。数学をエンジョイする方がもっと増えますように。

続いてE2D3五十嵐より。タイムリミット（を強引に押して）まで参加者とディスカッションしながら、好きなことを好きなように語るフリースタイルでした…。ひやひやしましたね！

どういうときにどういうグラフをつかったらよいのか。グラフのより良い使い方、より良い表し方があるのではないかと探る講演会にしたいとのことでしたが、まず最初のインパクトが

「質問するやつは偉い！」スライド。

本スライドについてツイートしてくださった方のツイートが20,000リツイートを超える結果に。

まずは、五十嵐さんのこれまでの経緯。大学で脳科学を研究したが、先行研究者に圧倒され断念。世界→計測（マーケットが小さかった）→解析（すでに研究が進んでいた）→可視化（E2D3）→人と思考が流れ、現在の結論は、

data vizはデータに基づいて人・組織・社会を動かす方法の一つ。可視化は人間の為の技術。

だそうです。

話題は可視化の歴史へ。可視化のスタートは地図。地図の深化として、John Snowのコレラ発生地の地図を紹介。「地図の上にバーを重ねる」という形式のデータ可視化が行われました。地図はその後、TO図、メルカトル、モルワイデと発展。三次元を二次元に投影する方法は４５個存在。コロプレス図は、フランスにおいてどの地区に犯罪が発生したか／多いかを示すためにできた地図。

棒グラフ、線グラフ、パイチャートを発明したプレイフェアについて言及。踏んだり蹴ったりの人生だったが、本を出版したことで社会に名が残ったことを強調。参加者に「本を書こう！」と呼びかけて、参加者困惑。

続いて、TEDでの可視化についての授業を紹介。「ネーピアの対数の発明は天文学者の寿命を倍にしたが、可視化の発明は人類の寿命を倍にした」。

可視化が一番発展したのは、「戦争」と「感染症」の対策を取るフェーズ。パンデミックに置ける可視化の役割は、すべての人を感染症から守ることではなく、パンデミックにならないように適切な政策を取ったか判断できるようにすること。「作り手が人や社会を動かしたいと思った時に、ビジュアライゼーションは目的をもって進化してきた」という言葉に、会場が息を飲んだのが分かりました。

本日のおさらい！

• E2D3はデータを使って主体的に学ぶ、奇跡のワンチャンをねらうためのツール。
• 本当に面白いグラフはcontrolできない。OSS+ハッカソンから産まれてくる。
• 人間同士のコミュニケーションを通して行う課題解決の手段がデータ可視化である。

E2D3、未来がありますね。

白熱した当日の対話型講演会の様子は「和から株式会社」様の公式ホームページに詳しく美しく掲載されていますので是非ご訪問ください。

twitterで #beyondmath #E2D3を検索して頂くと、素晴らしいまとめツイートがたくさん出てきますよ。

The post E2D3代表の五十嵐が「ＢＥＹＯＮＤ 〜最先端に潜む数学たち〜」にて【可視化 × 数学】をテーマに講演 first appeared on E2D3.

本イベントは、2017年2月18日に開催した「E2D3第1回スポーツデータなんでも可視化アイデアソン」で出たアイデアを実際に可視化するために企画されており、第1回目のE2D3主催のスポーツデータ可視化イベントはこのアイデアソンと本日のハッカソンで構成されます。

後半戦となるハッカソンでは、横浜オープンデータソリューション発展委員会主催の「インターナショナル・オープンデータ・デイ2017＠横浜」の会場の一部をお借りして、参加者のみなさんが丸一日をかけてデータ可視化に取り組みました。昼食を挟んだ前後半に分かれており、ハンズオンとハッカソンを行いました。

第一部：インプットとE2D3ハンズオン 

まず、参加者の方にデータビジュアライゼーションのイメージを掴んで頂くために、データ可視化エクセルアドインであるE2D3のハンズオンを行いました。E2D3はGItHubでソースを公開して開発をし続けているオープンソースアプリケーションですので、GitHubの基礎的な操作やNode.jsのダウンロードまでを含めた一通りの作業を参加者全員で行いました。講師は、E2D3のえばたあやさんです。

ハッカソンに備えて、実際にデータ可視化を行う方法の一つを体験した参加者からは、「仕組みが理解できてよかった」「操作に慣れない部分はあるがコミュニティイベントを通じて解決したい」といった声がありました。

第二部：ハッカソン（一部参加者はアイデアソン） 

ハンズオン後は、前回アイデアソン参加者と今回ハッカソンからの参加者とに分かれて、前者はハッカソン、後者はアイデアソンを行いました。

ハッカソン側は、４競技に分かれてそれぞれ作業を進めました。前回考えたアイデアをベースに、実際にどのようにすればグラフに落とし込むことができるのか、サンプルデータの縦軸と横軸には何を設定すれば良いのかといったグラフの作り込みについてディスカッションして作品イメージを深めました。アイデアを出してデータやパーツを生成・準備するデザイナーやプランナー（ジャーナリスト、教師など含む）とイメージを実際にコードに落とし込むエンジニアとで、データのイメージ像を合わせるところに多く時間を割いていたチームもありました。

アイデアソン側は、実際に作品に落とし込める方（作品ありアイデアソンとして分類）は作品作成を、アイデア発表をしたい方（アイデアソンとして分類）はスライドを用いたアイデア発表の準備を行いました。

約５時間の作業の後、計８つのアイデア及びグラフ作品の発表がありました。

• アクアスロン（綿貫） 作品ありアイデアソン

小金アクアスロンへの参加経験を生かして、アクアスロンの見所（逆転のポイント）を可視化。アクアスロンは水泳とランニングで構成される競技だが、スイム後の順位からランニング終了までにどのように順位が変化したかを見せたいと考えた。大会結果を表で見るだけではなく、 大会の最中にどのような順位変動があったのかグラフを見たときに感覚で理解できるようにしたいという思いがある。

感覚的に時間的な速さが棒グラフの長さで表されることに違和感がある、上位が上から並んでいれば見やすいのではないか、など意見が出ました。

• 避難経路（strsho） 作品ありアイデアソン

E2D3のマラソングラフのアイデアをヒントにして、避難の経路を可視化。「釜石の奇跡」は日頃の避難によって実現したという話を受けて、避難訓練を楽しむことができるマップを作成した。ルート上の風景を撮影してマップ上に記録させることができるので、災害の状況に合わせてどの避難路を通れば良いか自分で考えて避難することができる。

災害時と通常時の避難の経路の違いを見られれば良い、リアルタイムで他の人と比較できないか、大人数でサービス化してはどうか、など意見が出ました。

• 卓球（山田、えばた） ハッカソン

前回のアイデアソンに参加したチームがアイデアソンでのアイデアを形にした。二次元方程式で描くことができる弧を数式として表し、エクセル上に表示。係数部分を変化させることによって、卓球の球の弧が変化し、うまく相手陣地におちたり落ちなかったりするグラフを描くことができる。係数の変化によってどのように二次方程式のグラフが変化するかを楽しみながら体感することができる。

バスケや飛び込みなど他のスポーツに転用できるのではないか、虚数解のときはどんな表示になるのか、微分積分をスポーツとして表示できたら数学だけでなく物理なども勉強できて良いのではないか、などの質問／意見が出ました。

• 動物オリンピック（松岡、平河）ハッカソン 

E2D3の徒競走グラフをヒントにして、動物の徒競走を可視化した。カタツムリとの競争も可能。

他の生き物（赤ちゃんなど）も比較したい、エクセルで小学生など子供が実際に触って可愛らしいアイコンがあるのが良い、など意見が出ました。

• 50m x ソフトボール投げ（Nakane）アイデアソン 

盗塁選手を刺せるのかゲームにした。小学生の平均的な走る速さ（50m走）と投げる距離（ソフトボール投げ）をかけあわせて、競い合えるようにした。

盗塁選手を刺す要素を、小学生の走る速度とボール投げの距離に分解して可視化させる仕組みが良いとの意見が出ました。

• シャトルラン（川沼）アイデアソン 

スポーツテストの一つで、決められた時間内に20mを往復することを何回繰り返せるかを測るシャトルランをエクセル上で表示できるようにするもの。クラス対抗にすることで、スポーツテストの事前学習に活用できるのではないか。

全国的に競争させられれば面白そう、往復のグラフと累積のグラフが同時に表示できたら良いのではないか、などの意見が出ました。

• テニス（多田） ハッカソン

E2D3上でテニスコートを表現。サーブが重要なテニスをする選手たちが、試合後や練習後に自分が打った球がコートのどこに落ちたのかを可視化して、確認できるようにした。
 

データはどうやって取るのか、アウト率が若量にしたら選手が楽しめるのではないか、などの意見が出ました。

• 学力テスト＋体力テスト（鴨下、山本、林）　ハッカソン

小学生個人の学力テストと体力テストの結果をエクセルに入力すると、横長の棒グラフが均衡を示すゲージのような形になっていて、相手の同データと比較させることができる。

アイデアと仕組みは面白いが作品化しなかったことが残念、評価軸に組み込むものとして性格や音楽など感性や協調性の部分と入れるのも良いのではないか、などの意見が出ました。

発表時には、「インターナショナル・オープンデータ・デイ2017＠横浜」に参加されていた外部も傍聴されており、総勢30名程度の方への発表会となりました。外部参加者の方からも積極的なご意見や質問が出ていました。

ハッカソンの合間には、「インターナショナル・オープンデータ・デイ2017＠横浜」でブース出展をされていた企業や団体の展示を見ることができました。今流行りのVRの世界で、自分が作ったバブルチャートを体感することができる展示やマンホールデータを蓄積するアプリに刺激を受けた参加者もいました。

参加者投票によって、決まった優勝者は、

イケメン卓球グラフ！

山田さん、えばたさん、おめでとうございます。

参加者の綿貫さんが差し入れて下さった、特製トライアスロン土産を差し上げます！

ハッカソン終了後は、「インターナショナル・オープンデータ・デイ2017＠横浜」の懇親会に混ぜていただき、オープンデータの活用やデータ可視化の可能性について、熱く語り合いました。

ご参加の皆様、ありがとうございました。

The post 「【E2D3】第一回スポーツxデータビジュアライゼーションハッカソン」を開催しました first appeared on E2D3.

version1.0を迎えた今期のE2D3が注力するのは、スポーツです。3年後の東京オリンピックを念頭に置き、E2D3は誰もがスポーツデータビジュアライズを簡単に実現できるような環境を整えていきたいと考えています。第一回のイベントは、参加者の皆さんにスポーツデータの可視化アイデアを発表し合って頂くアイデアソンです。本日出たアイデアについては、3月4日開催予定のE2D3スポーツデータハッカソンにて実際にプログラミングする予定です。 

 イベントは午前と午後に分かれており、午前はスポーツデータ可視化イベント全体の企画会議、午後はアイデアソンを行いました。主催者側の難解なアナウンスのおかげもあり、多くの方が企画会議からご参加下さいました。午後のアイデアソンでは、インプットレクチャーの後、参加者全員が関心のあるスポーツ別に５つのチームに分かれてスポーツデータ可視化アイデアの練り上げを行い、最終的に５つのアイデアが発表されました。

■企画会議 

E2D3は、オープンソースのExcelアドインアプリケーションであり、E2D3開発及び普及に携わる人々のコミュニティそのものでもあります。コミュニティ自体がオープンなので、職種やこれまでのキャリアに関わらず、各自がそれぞれの目的意識を持ってコミュニティに貢献しています。その精神にのっとり、今回のイベント企画会議はスポーツのデータビジュアライゼーションに関心のある初参加の皆さんにもご参加いただける形式にしました。 

E2D3についてのレクチャーの後。５人のE2D3イベント初参加の方と一緒に、①スポーツデータビジュアライゼーションの作品例のシェア、②あったら良いなと思うデータビジュアライゼーション例やデータ例、③データの視点での現在のスポーツジャーナリズムやオリンピック/パラリンピックの課題を、slack及びリアルでシェアしました。技術点と演技後構成点で評価される競技や異なる競技を比較し合う見せ方について、盛り上がりました。 

■インプットレクチャー

本イベントの方針と進め方について参加者にシェアした後、スポーツとデータビジュアライゼーションに関連したテーマのレクチャー二つが行われました。講師は午前中の企画会議に参加されたお二人、MatsuokaさんとKiryuさんです。 

【Matsuokaさん 】

美術専門学校でデザインを教えていらっしゃる現役の先生です。授業で取り扱っている情報編集では、コンテンツ、コンテキスト、コミュニケーションの３つのCを意識して情報を伝達することが重要になります。授業で、電鉄各線の最速電車（特急、快速など）を同じ路線の低速の電車（各駅、鈍行など）と比較して何割早いかという基準を作ってビジュアルとともに比較させたことを例に上げていただき、「比較することで情報になる」「うごく、かわる、などものに動きが発生することで情報として成り立っていく」「情報可視化のファーストステップは基準をつくって他者と比較できる形にすること」等をインプットして頂きました。 

【kiryuさん 】

ハッカソン大好きなデザイナーさん。スポーツデータの可視化におけるデザインの重要性についてレクチャー頂きました。 言語フリー、エイジフリー、属性フリーというスポーツデータのビジュアライゼーションの魅力を、美しいグラフィックとともにお話いただきました。「生きているグラフ」というキーワードを提示されましたが、スライドとお話自体が生きている動きのあるレクチャーでした。

■チームごとにアイデアの練り上げ、そして発表

午前中にシェアされた過去のデータビジュアライゼーションやデータジャーナリズム作品をイメージしながら、各自が関心のあるスポーツ毎にチームでアイデアを練り上げました。チームごとの激しいディスカッションの結果、以下の五つの作品が発表されました。 

「サッカー１」 

プロ選手の体の動きと自分の体の動きを比較しよう。youtubeに動画をアップするだけで簡単に比較可能。生徒は自分のサッカープレーの様子を動画で撮影。簡易的なモーションキャプチャーに落とし込んで改善点を知る。使用シーンは、学校で友達と比較やプロ選手と自分のフォームとの比較。javascriptとHTML5で動的な解析ができるようなので、技術面でも問題なし。 

自販機の購入時の顧客の視点移動の研究や、自販機詰めのプロと下手な人の動きの比較などを類推した、といったコメントがありました。 

「サッカー２ 」

サッカーのシュートの角度を測る。サッカーのキックは足の角度によって効果が変わってくることが研究でわかっている。実際に足の角度を測ることが出来る無料アプリを活用して、キックの効果を判別/学習していく。 

個人技よりはチームのフォーメーション／戦略のほうが選手やチームにとって重要度が高いこともあるのではないか、実際のトレーニングに使えそう、といった意見がありました。 

「野球・ソフトボール 」

「ボールをどこまで遠くに投げられるか」を可視化する。小学生が野外でボールを投げて遠投距離を測る。その結果を可視化して、飛ばした距離をイチロー選手の打球の飛距離や電車の車両の長さと比較する。 

通常では比較できないようなものと自分とを比較してみたいという子供たちの興味をそそりそうだとのコメントがありました。

「イケメン卓球選手と学ぶ二次方程式」

卓球の球の動きを二次方程式の描く放物線と見立てて可視化します。イケメン卓球選手にうまく球を返せるような放物線を描く二次方程式を考えつけるかということがポイントで、二次方程式を学ぶ頃から数学に興味がなくなりがちな女子中学生をターゲットにしています。 

こういうグラフがあれば、数学も好きになれたのにというコメントがありました。

「ドッキドキ 」

データ可視化によってよりエンジョイすることができる新しいスポーツを考えてくださったのが、「ドッキドキ」チームです。 

心拍数が１３０になったらバトンを渡せるドキドキリレー。足の速さ等の身体的能力ではなくいかに心拍数を高くできたかどうかを競うことで、体型に関わらず協力して遊べる遊びを作り出しました。世界の裏側の人との協力や室内からの参加も可能です。自分の身体に興味を持ち、他者と協力することに関心を持てるようになるゲームです。 

参加者投票による優勝は、ドッキドキチーム！おめでとうございます。

参加者の方が差し入れてくださったシュウマイが優勝者に手渡されます。

Slack上とリアルとでの平行した交流がイベント全体を盛り上げました。ターゲットは誰なのか、どのような機能があればターゲットがストレスフリーでデータ可視化に親しめるのかといったイベントコンセプトの細部から全体までを、参加者同士で考えるところからスタートした点に於いて特異な取り組みでした。面白いスポーツデータ可視化アイデアを出し合う純粋なブレインストーミングとは異なり、企画会議に参加した参加者自らイベントを設計し、ハッカソンの手前のアイデア固めまで行うボリュームのあるイベントでしたが、懇親会の参加率も高く、運営サイドを含めた参加者の多くが本イベントを楽しみ切ったように感じました。 有難うございました。

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

今回のイベントでは、SafecastのデータをE2D3の基盤であるExcelへ取り込んで、データを可視化するところまでを実際にデータとE2D3をさわりながら体験するところまでを目標としました。

Safecast代表PieterさんによるSafecastの活動紹介から。

Safecastでは、ボランテイアの協力により、膨大な量の放射線データを蓄積しており、誰でも自由にデータにアクセス、活用することができます。　Safecastのロブさんが、Safecastのエコシステムとデータ構造、APIを使ったデータの取り込み方についての解説。

E2D3の山本さんよりE2D3の紹介と、E2D3のセットアップをします。　E2D3はWindowsの場合はExcel2013以降、Macの場合はExcel2016以降で動きます。　古いバージョンをお持ちの方はExcelOnlineでお使いいただくことが可能です。

セットアップが完了したところで、いよいよSafecastのデータを取り込みます。　データ全部を取り込んでしまうと、Excelでは扱えないデータ量なので、自分が使いたいデータセットをAPIで抜き出し→データをきれいにする、という前作業が必要となります。　時間がかかる作業なので、今回はE2D3メンバーの小副川さんが事前に扱いやすいサイズできれいにしたデータセットを使いました。

最後までたどりつけた方も、そうでない方も、ぜひ引き続きデータを触ってE2D3で遊んでいただければうれしいです。
今後も、Safecast x E2D3 のコラボは続けたいと思いますので、ご協力いただける方、ご興味ある方は引き続きよろしくお願いします。　お越しいただいたみなさま、長時間ありがとうございました。　E2D3とSafecastのボランテイアスタッフの皆さん、おつかれさまでした！

———————-
【イベント情報】

E2D3 x Safecast 環境データの可視化ハンズオン
Environmental Data Visualization Hands-on Workshop

環境オープンデータの、新しい表現方法を体験してみよう！

誰もがデータを見てさわって楽しめることを目標に活動している、グラフ共有コミュニティE2D3（Excel to D3.js）は、様々な企業や団体との協力イベントを開催しています。

今回は、環境データを提供することで、人々に力を与える活動を行う世界的な市民科学のボランティア・グループ、セーフキャスト（Safecast）とのコラボイベントです。

セーフキャストが集めた環境データをE2D3で表現してみる体験会を実施します。ご自分のPCをご持参の上、ご参加ください。

Please join us for the interactive and fun workshop to experience/ visualize environmental open data in innovative ways!

E2D3 (Excel to D3.js) is a graph-sharing community enabling everyone to handle and display data. E2D3 has been hosting collaboration events with various companies and organizations. This time, we are holding a joint event with Safecast, the internationally-renowned citizen science volunteer group. In this event you can explore environmental open data collected by Safecast and create visually appealing graphs using E2D3. Participants need only bring their own PC and their imagination to the event!

はじめての方向ハンズオンセミナー&作業タイム

①　Safecastセミナー： セーフキャストがなぜ環境データを集めるようになったのか？どんなデータをどうやって集めているのか？　どうやったらデータをみたりさわったりできるのか？　APIの使い方は？　自分が使いたいデータのみをダウンロードする方法は？　Safecastスタッフによるハンズオンセミナーを開きます。

②　E2D3ハンズオン： はじめてE2D3のことを知った方向けに、使い方ハンズオンを開きます。E2D3のインストール方法、使い方のちょっとしたコツなどのレクチャー。表現したい内容別のおすすめグラフ・表現方法などのアドバイスも。　E2D3はエクセル上で動くアプリのため、あらかじめエクセルで使えるサイズに整理したデータセットをお配りして、実際にE2D3上で触ってみます。 E2D3の使い方はもう知ってるよ！という方は③のもくもく作業タイムをはじめてください！

③　もくもく作業タイム： 実際にセーフキャストの環境データを使ってのグラフ作成タイムです。　個人で作業するのもよし、チームで作業もよし。　セーフキャストとE2D3のメンターが、皆さんの質問、疑問にていねいにお答えします。

④　発表タイム： 最後に、自由参加で、できあがったグラフの発表タイムです。　グラフ完成までいった方も、途中までの方も、どんなところに苦労した、こんな発見があった、などをみんなとシェアしましょう。

⑤　懇親会： 同じ会場で懇親会を開きます。　SafecastとE2D3のメンバーに、ききそびれたことを聞いてみたり、新しく出会った方々との交流を深めたり、ごゆっくり楽しんでいってください。

Hands-on seminar & work on individual projects

Seminar by Safecast (in Japanese)
You will learn: – Why does Safecast collect environmental data? – What data do Safecasters collect and how? – How can we look at their open data and play with them? – How can we use the Safecast API to extract data for your own interests?

A hands-on session will to be led by Safecast volunteer staff.

Hands-on session by E2D3 (in Japanese)
An introductory hands-on session demonstrating the use of E2D3. You will learn how to install and use E2D3. You will get advice on how you can present your data visually. E2D3 is an add-in application for Excel. We will provide cleaned-up data which are usable in Excel and then you can explore the data using E2D3. If you are already familiar with E2D3, you can skip this hands-on session and immediately start working on making graphs.

Visualization time:
You will be supported in developing visual presentations of Safecast’s data. You can work on your own projects individually or as a team. Mentors from Safecast and E2D3 will help you complete your work by answering any questions you may have. Bilingual mentors are there to help.

Presentation Time:
At the end of the event, there is an opportunity to present your completed visualizations graphs and to share new findings working with data/ E2D3 graphs with other participants.

Networking Party:
Networking party will be held at the same venue. Please ask questions to the members from Safecast and E2D3, or just migle with other participants. Please have fun!

SAFECASTとは

Safecastは、東日本大震災後に、日本在住の外国人エンジニアが中心となって設立されました。設立者の一人には、MITメデイアラボの伊藤譲一氏も名を連ねます。今では、セーフキャストの活動は世界中に広がっています。

Safecastは、誰もが自由に利用できるオープンデータを用意することが、誰にとっても良いと考えており、世界中の人々に役立つデータの収集やノウハウの提供を目的としています。Safecastは、政治的に中立・独立した団体として、できるかぎり正確で信頼のできる情報を提供しています。

Safecast

What is Safecast?

Safecast was formed after the devastating earthquake and tsunami which struck eastern Japan on March 11, 2011, and the subsequent meltdown of the Fukushima Daiichi Nuclear Power Plant. Through monitoring, collecting, and openly sharing trustworthy data of environmental radiation and other pollutants, growing quickly in size, scope, and geographical reach and Safecasters have now been spreading and collaborating globally. Joi Ito, the Director of MIT Media Lab is one of the founding members.

Safecast strongly believes that it is important for everyone to have access to reliable open data. Safecast’s mission is to provide citizens worldwide with the tools they need to inform themselves by gathering and sharing accurate environmental data as well as relevant knowledge and skills in an open and participatory fashion as a politically neutral and independent body.

E2D3とは

グラフ共有コミュニティE2D3（Excel to D3.js）は、日本発のオープンソース・ Excelプラグインアプリの開発コミュニティです。　すべての人のデータリテラシー（情報を分析・理解し、使える力）をあげるべく活動中。　ソフトウェアエンジニア、データサイエンテイスト、マーケター、ビジネスプランナー、デザイナーなど、様々な職種の方が専門スキルを持ち寄って貢献することで成り立っています。　コントリビューターとして関わってみたい方は、ぜひお声かけください。

E2D3

What is E2D3?

E2D3 (Excel to D3.js) is a graph-sharing community. E2D3 develops open-source, interactive and dynamic data visualization add-ins for Excel. They E2D3 wants to raise the level of data literacy of the public through its activities. The volunteer members include software engineers, data scientists, marketers, business planners, and designers, all making contributions with their own expertise. Anyone interested to be involved in E2D3 as a contributor, please contact us.

概要

日時：2016年11月3日（木）13時〜18時（その後懇親会）
会場：[ロフトワーク 10F イベントスペース] 住所：渋谷区道玄坂 1-22-7　道玄坂ピア 10F
最寄駅：JR山手線 渋谷駅 徒歩10分
定員：30名程度
料金：無料
持ち物：自分のPC　(Excel2003以降が入っていれば尚可。なければExcel Onlineでも動きます）
Event information

Date/time: November 3rd, 2016 (Thursday) 13:00 – 18:00 (followed by reception afterwards)
Venue: Loftwork 10F @Event Space
Address: Dogenzaka Pier 10F, 1-22-7, Dogenzaka, Shibuya-ward, Tokyo
Nearest station: 10 minute-walk from Shibuya Station on JR Yamanote-Line
Capacity: Around up to 30 people
Fees: Free
Things to bring: Your PC　(Excel 2003 or newer. Alternatively Excel Online.)
プログラム

13:00-：開場
13:30-14:00 :Safecastの紹介・データ構造・使い方説明
14:00-15:00 :E2D3の使い方ハンズオン
15:00-17:30：個別に作業のもくもくタイム(E2D3とSafecastの講師・メンターがヘルプします）
17:30- :できたグラフの作品発表会（希望者のみ）
18:00- ：懇親会（参加費2000円の予定，アンケートにてご希望教えてください．ドタキャン，ドタ参加もOKです）
Program

13:00 － ： Open the venue
13:30 – 14:00： Introduction of Safecast; Explanation about data structure and guidance on how to use Safecast’s open data
14:00 – 15:00： Hands-on session by E2D3
15:00 – 17:30： Work on individual projects
17:30 － ： Presentation of the completed projects (voluntary)
18:00 － ： Networking party (Fee will be around \2000)
会場提供

ロフトワーク

協賛企業

レバレジーズ株式会社

■レバレジーズの運営サイト

フリーエンジニア参画支援サービス：レバテックフリーランス
エンジニア専門転職エージェント：レバテックキャリア
Webクリエイター専門サービス：レバテッククリエイター
フリーランスの案件提案：@Agent
エージェントが語るテックブログ：レバテックタイム
エンジニア向けQ&Aサイト：teratail
共催団体

環境オープンデータの市民科学団体Safecast

The post Safecast x E2D3 Data Visualization Workshop first appeared on E2D3.

100人以上の参加者がいるサンフランシスコでのWebGLのイベントに参加＆LT登壇。E2D3は、コンセプト、見た目、コーディング不要という観点で非常に好評だったとのこと。あるGoogleエンジニアからは、GoogleSheet 2D3が欲しいという声が出たそうです。

グラフは言語不要（二つの意味で）、万国共有なんだという名言が出ました。

こちらが当日発表したスライドです。

北野さんは、日本では、データサイエンティストビギナーズ勉強会を主催。ご興味がある方はそちらでお会いできます。

http://bigdatamokumoku.connpass.com/

The post E2D3 Goes to San Francisco first appeared on E2D3.

ワークショップは、日本GEMSセンターの講師によるファシリテーション。
テーマは「食べ物で算数」、新しくオープンする架空のトルティーヤ屋さんのメニューを、材料の組合せや値段を調べながら考えます。

■小林さん（伊勢原市にある産業能率大学の学生さん）

心をデータ化するソレーションという企業を立ち上げ

The post GEMS Math Workshop with E2D3 first appeared on E2D3.

様々な分野の最前線でデータビジュアライゼーションと日々格闘している発表者の皆様の生の声に感化され、会場が一体になってデータビジュアライゼーションの価値や未来について語り合いました。

会は二部構成で、一部は参加者４名の方からのLT、二部はE2D3に深く関わってこられたお二人のパネルディスカッションでした。

LT大会（基調講演）

テーマは、『どうやったら新しいデータビジュアライゼーション作品を作れるのか。それぞれの視点で、日頃の思いを語って頂きました。

1.    アオキさん「インフォグラフィックスとデータビジュアライゼーションの融合」

横浜のデザイナーさん。インフォグラフィックス作品に取り組んでいる。インフォグラフィックスは、一時点をとらえた静的なもの、一つの事件・インシデントを示すものであり、ニュースを伝える力が強いと考えている。

デザイナーの世界（情報が伝わるようにグラフィックスをまとめあげるが時として芸術作品）とエンジニアの世界（正確なデータを反映するが時に受け手にとって情報過多）とデータの見せ方がわかるデータサイエンティストのような人の三者がバランスを取れることが大事なのではないかと考えている。

会場からは、インフォグラフィックスの特性とは何か、凝ったインフォグラフィックスが逆に分かりにくさを産むことがある葛藤についての質問がありました。

2.    三好さん「どうやったら新しいデータビジュアライゼーション作品を作れるのか」＋ 「どうやったらバズるデータビジュアライゼーション作品を作れるのか」

北海道とシロクマをこよなく愛するバズるdataviz作品の作り手。どうやったらバズる新しいデータビジュアライゼーション作品を作れるかという問いの答えは、「着想は真似事」＋「自分の興味」＋「自分が見たいという欲求」を重ね合わせていくことではないかと考えている。

過去に自身が作成した作品でバズったものの特徴は、見た目が美しい、1分以内に操作が理解できる、事実の再確認ができる、知らないことも含まれている、受け手が当事者になりうる、時事ネタが入っている等、だと分析している。

アーバンデータチャレンジ金賞等を受賞したが、作品を作ることで人脈が広がったことについても興味深いと感じている。

会場からは、作品作りの際の配色に対する考えについて、作品に対する世間の反応が予想と違うことについての質問がありました。

3.    内田さん「マネジメントを快適化するデータビジュアライゼーション」

SIerであり、プリザンターの使い手。仕事の進捗状況確認や平準化のきっかけ等、会社経営やプロジェクト運営の判断材料提供ツールとして、データビジュアライズに価値を見出している。

「データを集める仕組み」、「コミュニケーションの仕組み」、「ビジュアライゼーションの仕組み」。これらを合わせたものがプリザンターであると考えている。

プロジェクトマネジメントにおける実践的なデータ活用例

会場からは、ぜひ業務で使ってみたいという感想が出ました。また、ルーチンでない業務におけるプリザンターの活用方法、マネジメント自体が機能していない場合のプリザンターの活用方法について質問がありました。

4.    山崎さん「人々のニーズからデータビジュアライズを生み出し展開する」

金沢のUIUXを極めた学生さん。まちや往来の盛り上がりを可視化した作品を紹介。まちの賑わいをバスのアウトフィットに表し繁華街行きのバスであることを感覚的に理解させるバス、人間の心拍数を音楽に変えてその場の盛り上がりを表現する、等。

デザインは、対象物を美しくすることではなく、ユーザーが何を求めているかを考え抜き、ユーザーがスムーズに行動できるような状況を実現することだと考えている。

ユーザーとしての体験を中心に考えると作品の発想が広がることが多い。デバイスを超えて立体的なデータビジュアライズができるようになると感じている。データビジュアライゼーションでは数字や言語にこだわる必要がなく、直感的に理解できるということがデータビジュアライゼーションの価値なのではないかと考えている。

会場からは、他人にとっての見心地を理解し実現することの難しさについてコメントがありました。

第二部は、E2D3にいつも素晴らしいサジェスチョンを下さるデータジャーナリズムの神とE2D3発案者によるパネルディスカッション。

衝撃的な発言の連続で会場全体が盛り上がったパネルディスカッションでのトーク内容は、以下の通り。

• データビジュアライゼーションとは何か

データビジュアライゼーションという単語は流行語にすぎない。データを見せていくということはこれまでもこれからも重要。

データビジュアライゼーションは、紙メディアには不可能であった「データを一気に見せること」を可能にした。ただし、デザイン性やわかりやすさを追求すると結局シンプルなグラフに戻る。コストの割にメリットのないデータビジュアライゼーション。

地図という見せ方は、ストーリーを語るのに向かない。読み手に、読ませたい・見せたい場合は、人が記事や可視化されたものを読みといていくこと（読み手のアクション）に期待するよりは、書き手が視線誘導を技術として使っていく必要がある。

• インフォグラフィックスとデータビジュアライゼーションの違い

インフォグラフィックスとデータビジュアライゼーションの違いは、静的か動的かではなく、探索的データビジュアライゼーションVS説明的データビジュアライゼーションであり、インフォグラフィックは後者の一部だと考えている。

データ分析を体得していなければ、どんなに可視化しても何のアウトプットもでてこない。データ分析とは仮説を立てること。

• データジャーナリズムとは

そもそも、データビジュアライゼーションは批判である。相手が間違っていることをデータで指摘するのがデータジャーナリズム。わかりやすいデータビジュアライゼーションには本来の価値はないので、センセーショナルなものでなければならない。記事が信用されなくなってきた背景にデータジャーナリズムがあるのではないか（データを根拠にして初めて価値があるという流れが出てきた）。海外では、記者が匿名でもデータ自体の事実確認が取れれば、信用される。ただ、日本はデータで人を攻撃することはなく、データよりも人間の話の方が信用される傾向にある。

• ディープラーニングとデータビジュアライゼーションの関係

ディープラーニングで出てきたものを可視化してもセンセーショナルさはない。

機械学習の中でいつデータビジュアライゼーションが利用されるかというと、データの素性を表す時や答えのあたりをつけるとき等に使う。データを基にしてその法則性をコンピューターが探し出すのがディープラーニングだが、その法則をなぜコンピュータが出したのか人間が理解する必要がある（＝人間にもわかるような形にする）。その際にデータビジュアライゼーションを使う。

• 日本のデータビジュアライゼーションへ一言

日本のオープンデータ化は遅れているという話になりがちだが、昔はPDFを無理やりCSVに変換する地道な作業をしていることがあった。オープンデータやるほうがコストが上がるのでは本末転倒。「CSV公開されてないから作業できない」なんて甘えだ。

２２：３０近くまで続いたイベントの後には懇親会！終電に間に合って良かったですね。

こんな素晴らしいディスカッションができる集まりがE2D3です。もっと話したい方は、次のもくもく会に来てくださいね。

The post データビジュアライゼーション 毎月もくもく会 vol. 9＿初のLT&パネルディスカッション first appeared on E2D3.