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

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の設計が構造化されている データの管理に一定のルールを持つ テスト可能 モダンであることは、特定の最新の技術を使うことではなく、アプリケーションの構造デザインと使用するテクノロジーの組み合わせが実現するものなのではないかと、大野さんはおっしゃっています。 とはいえ、無駄な労力を使わないツールを選ぶことも能力の一つ。モダンなデータ可視化アプリケーションの開発をする上で必要なツールについて、「現時点での」と条件を付けた上で、大野さんは以下のようにご教示くださいました。 言語: ES2015以降 パッケージマネージャー: npm ビルドツール: webpack3…

7月8日開催決定:【講演会】「モダンな」可視化アプリケーション開発とはどのようなものか?

【講演会】「モダンな」可視化アプリケーション開発とはどのようなものか? D3.js v4とReactの組み合わせを例に、どのように「モダンな」ウェブベースの可視化アプリケーションを設計・実装すれば良いのかを考えてみたいと思います。 日 時: 2017/07/08(土) 13:00 〜 21:00   会 場: TECH PLAY SHIBUYA 住 所: 東京都渋谷区宇田川町20-17 NMF渋谷公園通りビル 8F 主 催: E2D3       参加のご表明はこちらから。 17:00から、大野圭一朗氏にご講演いただきます。 カリフォルニア大学サンディエゴ校医学部にてResearch Associate/Software Engineerとして勤務。オープンソースのネットワーク可視化ソフトウェアCytoscapeのコア開発者。専門はライフサイエンス分野におけるデータの統合と可視化。Data Visualization Japan co-organizer。   5年ほど前と比較すると、実務者向けのデータ可視化関連情報やツールは格段に充実しました。分野が成熟するとともに、アプリケーションの設計や実装を行う者に必要な知識も変化します。近年の変化のわかりやすい例としては、シンプルなチャート(棒グラフやパイチャートなど)を生成する場合です。たとえカスタムのデータ可視化ダッシュボードを作る場合でも、様々なライブラリがオープンソースで利用できる現在では、一からD3でバーチャートを作成することにあまり意味はありません。そこで重要になってくるのは、目的のアプリケーションを作る過程で何を作って何を作らないかの判断、いかに使い捨てのコードを減らすかと言った点になります。コードの再利用やモジュール化は典型的なソフトウェア開発の問題ですが、実際の設計や実装に持ち込む場合には、具体的な要求に向き合ってはじめて様々な問題が浮かび上がることがよくあります。プロジェクトで利用しているものとは別のテクノロジーを使った既存のライブラリとの連携や、サードパーティー・ライブラリの利用、パッケージング、アプリケーションレベルのデータモデリングなどが典型的な問題ですが、これらは全て古典的な問題でありながら、デスクトップ・アプリケーションと同等のUXをブラウザ上で実装するものを作る場合には、そのプラットフォーム独自のノウハウが必要になります。 今回は、現時点で最も広く使われているツールであるD3.js v4とReactの組み合わせを例に、どのように「モダンな」ウェブベースの可視化アプリケーションを設計・実装すれば良いのかを考えてみたいと思います。

カテゴリー: News

E2D3代表の五十嵐が「BEYOND 〜最先端に潜む数学たち〜」にて【可視化 × 数学】をテーマに講演

2017年6月2日、大人のための数学教室を運営する「和から株式会社」が主催するBEYOND 〜最先端に潜む数学たち〜の第2回目が開催されました。今回のテーマは、【可視化 × 数学】。   まずは、和から株式会社 堀口代表からのお話。 新潟県ご出身。山形大学卒業。大人のための数学教室 和(なごみ)を運営。数学好きの為のイベントを多数開催。 学んできた数学と社会で必要とされる数学(統計学、微積分など)が異なっていることを課題に感じている。 教室には、数学を純粋に楽しむ方から仕事スキルとして統計学を学ぶ方まで幅広く在籍。0.1と0.2の違いについて説明を要する方も。 今回はコラボして頂き、有難うございます。数学をエンジョイする方がもっと増えますように。 続いてE2D3五十嵐より。タイムリミット(を強引に押して)まで参加者とディスカッションしながら、好きなことを好きなように語るフリースタイルでした…。ひやひやしましたね! どういうときにどういうグラフをつかったらよいのか。グラフのより良い使い方、より良い表し方があるのではないかと探る講演会にしたいとのことでしたが、まず最初のインパクトが 「質問するやつは偉い!」スライド。 本スライドについてツイートしてくださった方のツイートが20,000リツイートを超える結果に。 まずは、五十嵐さんのこれまでの経緯。大学で脳科学を研究したが、先行研究者に圧倒され断念。世界→計測(マーケットが小さかった)→解析(すでに研究が進んでいた)→可視化(E2D3)→人と思考が流れ、現在の結論は、 data vizはデータに基づいて人・組織・社会を動かす方法の一つ。可視化は人間の為の技術。 だそうです。 話題は可視化の歴史へ。可視化のスタートは地図。地図の深化として、John Snowのコレラ発生地の地図を紹介。「地図の上にバーを重ねる」という形式のデータ可視化が行われました。地図はその後、TO図、メルカトル、モルワイデと発展。三次元を二次元に投影する方法は45個存在。コロプレス図は、フランスにおいてどの地区に犯罪が発生したか/多いかを示すためにできた地図。 棒グラフ、線グラフ、パイチャートを発明したプレイフェアについて言及。踏んだり蹴ったりの人生だったが、本を出版したことで社会に名が残ったことを強調。参加者に「本を書こう!」と呼びかけて、参加者困惑。 続いて、TEDでの可視化についての授業を紹介。「ネーピアの対数の発明は天文学者の寿命を倍にしたが、可視化の発明は人類の寿命を倍にした」。 可視化が一番発展したのは、「戦争」と「感染症」の対策を取るフェーズ。パンデミックに置ける可視化の役割は、すべての人を感染症から守ることではなく、パンデミックにならないように適切な政策を取ったか判断できるようにすること。「作り手が人や社会を動かしたいと思った時に、ビジュアライゼーションは目的をもって進化してきた」という言葉に、会場が息を飲んだのが分かりました。   本日のおさらい! E2D3はデータを使って主体的に学ぶ、奇跡のワンチャンをねらうためのツール。 本当に面白いグラフはcontrolできない。OSS+ハッカソンから産まれてくる。 人間同士のコミュニケーションを通して行う課題解決の手段がデータ可視化である。 E2D3、未来がありますね。   白熱した当日の対話型講演会の様子は「和から株式会社」様の公式ホームページに詳しく美しく掲載されていますので是非ご訪問ください。 twitterで #beyondmath #E2D3を検索して頂くと、素晴らしいまとめツイートがたくさん出てきますよ。

Safecast x E2D3 Data Visualization Workshop

11月3日、環境データの市民科学団体 SafecastとデータビジュアリゼーションコミュニティE2D3のはじめてのコラボイベント、環境データ可視化ハンズオンワークショップを開催しました。 天気の良い祝日にもかかわらず、30名以上の方にご参加いただきました。 今回のイベントでは、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…

GEMS Math Workshop with E2D3

10月29日土曜日に、パソコンやExcelがなくてもデータリテラシーについて学べるイベントを開催しました。イベントでは、アメリカの算数・統計授業のGEMS「食べ物で算数」ワークショップを体験しました。       ワークショップは、日本GEMSセンターの講師によるファシリテーション。 テーマは「食べ物で算数」、新しくオープンする架空のトルティーヤ屋さんのメニューを、材料の組合せや値段を調べながら考えます。     作業は、大人チームと、子どもチームとに分かれて行います。 お店のオーナーに手紙を書いてメニューの提案ができたら終了です。     終了後はみんなでトルティーヤを食べて、雑談タイム。 机上で考えたことを実際に試してみる体験学習の重要さ、手を動かして考えていく中で一定の法則を見つけていく楽しさ、手紙やグラフや物語という形で相手に伝える等複数の知力を働かせるMI理論に基づいたカリキュラムの効果、子供が自然に経営感覚を身につけられるプログラムの可能性について、バックグラウンドの異なる参加者(エンジニア、教育関係者、等)同士が語り合いました。         LT大会では、スクールカウンセラーの立場からメンタルヘルスにデータを生かす取組みについて、などがありました。   ■小林さん(伊勢原市にある産業能率大学の学生さん) 心をデータ化するソレーションという企業を立ち上げ   ■保育士資格に向けて勉強されているかつぬまさん 放課後の空きスペース(パソコン室)を活用して、放課後ビスケット体験。墨田区みどりっこクラブ   参加者のみなさま、会場を提供いただいた株式会社 インサイトテクノロジー様、ありがとうございました!