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

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大会では、スクールカウンセラーの立場からメンタルヘルスにデータを生かす取組みについて、などがありました。   ■小林さん(伊勢原市にある産業能率大学の学生さん) 心をデータ化するソレーションという企業を立ち上げ   ■保育士資格に向けて勉強されているかつぬまさん 放課後の空きスペース(パソコン室)を活用して、放課後ビスケット体験。墨田区みどりっこクラブ   参加者のみなさま、会場を提供いただいた株式会社 インサイトテクノロジー様、ありがとうございました!

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

2016年9月23日、渋谷dots.をお借りしてデータビジュアライゼーション 毎月もくもく会 vol. 9を開催しました。今回は、初のLT&パネルディスカッションメイン形式を採用し、もくもく会というよりはシンポジウムの様相を呈しておりました。 様々な分野の最前線でデータビジュアライゼーションと日々格闘している発表者の皆様の生の声に感化され、会場が一体になってデータビジュアライゼーションの価値や未来について語り合いました。 会は二部構成で、一部は参加者4名の方からのLT、二部はE2D3に深く関わってこられたお二人のパネルディスカッションでした。 LT大会(基調講演) テーマは、『どうやったら新しいデータビジュアライゼーション作品を作れるのか。それぞれの視点で、日頃の思いを語って頂きました。 1.    アオキさん「インフォグラフィックスとデータビジュアライゼーションの融合」 横浜のデザイナーさん。インフォグラフィックス作品に取り組んでいる。インフォグラフィックスは、一時点をとらえた静的なもの、一つの事件・インシデントを示すものであり、ニュースを伝える力が強いと考えている。 デザイナーの世界(情報が伝わるようにグラフィックスをまとめあげるが時として芸術作品)とエンジニアの世界(正確なデータを反映するが時に受け手にとって情報過多)とデータの見せ方がわかるデータサイエンティストのような人の三者がバランスを取れることが大事なのではないかと考えている。 会場からは、インフォグラフィックスの特性とは何か、凝ったインフォグラフィックスが逆に分かりにくさを産むことがある葛藤についての質問がありました。 2.    三好さん「どうやったら新しいデータビジュアライゼーション作品を作れるのか」+ 「どうやったらバズるデータビジュアライゼーション作品を作れるのか」 北海道とシロクマをこよなく愛するバズるdataviz作品の作り手。どうやったらバズる新しいデータビジュアライゼーション作品を作れるかという問いの答えは、「着想は真似事」+「自分の興味」+「自分が見たいという欲求」を重ね合わせていくことではないかと考えている。 過去に自身が作成した作品でバズったものの特徴は、見た目が美しい、1分以内に操作が理解できる、事実の再確認ができる、知らないことも含まれている、受け手が当事者になりうる、時事ネタが入っている等、だと分析している。 アーバンデータチャレンジ金賞等を受賞したが、作品を作ることで人脈が広がったことについても興味深いと感じている。 会場からは、作品作りの際の配色に対する考えについて、作品に対する世間の反応が予想と違うことについての質問がありました。 3.    内田さん「マネジメントを快適化するデータビジュアライゼーション」 SIerであり、プリザンターの使い手。仕事の進捗状況確認や平準化のきっかけ等、会社経営やプロジェクト運営の判断材料提供ツールとして、データビジュアライズに価値を見出している。 「データを集める仕組み」、「コミュニケーションの仕組み」、「ビジュアライゼーションの仕組み」。これらを合わせたものがプリザンターであると考えている。 プロジェクトマネジメントにおける実践的なデータ活用例 会場からは、ぜひ業務で使ってみたいという感想が出ました。また、ルーチンでない業務におけるプリザンターの活用方法、マネジメント自体が機能していない場合のプリザンターの活用方法について質問がありました。 4.    山崎さん「人々のニーズからデータビジュアライズを生み出し展開する」 金沢のUIUXを極めた学生さん。まちや往来の盛り上がりを可視化した作品を紹介。まちの賑わいをバスのアウトフィットに表し繁華街行きのバスであることを感覚的に理解させるバス、人間の心拍数を音楽に変えてその場の盛り上がりを表現する、等。 デザインは、対象物を美しくすることではなく、ユーザーが何を求めているかを考え抜き、ユーザーがスムーズに行動できるような状況を実現することだと考えている。 ユーザーとしての体験を中心に考えると作品の発想が広がることが多い。デバイスを超えて立体的なデータビジュアライズができるようになると感じている。データビジュアライゼーションでは数字や言語にこだわる必要がなく、直感的に理解できるということがデータビジュアライゼーションの価値なのではないかと考えている。 会場からは、他人にとっての見心地を理解し実現することの難しさについてコメントがありました。 第二部は、E2D3にいつも素晴らしいサジェスチョンを下さるデータジャーナリズムの神とE2D3発案者によるパネルディスカッション。 衝撃的な発言の連続で会場全体が盛り上がったパネルディスカッションでのトーク内容は、以下の通り。 データビジュアライゼーションとは何か データビジュアライゼーションという単語は流行語にすぎない。データを見せていくということはこれまでもこれからも重要。 データビジュアライゼーションは、紙メディアには不可能であった「データを一気に見せること」を可能にした。ただし、デザイン性やわかりやすさを追求すると結局シンプルなグラフに戻る。コストの割にメリットのないデータビジュアライゼーション。 地図という見せ方は、ストーリーを語るのに向かない。読み手に、読ませたい・見せたい場合は、人が記事や可視化されたものを読みといていくこと(読み手のアクション)に期待するよりは、書き手が視線誘導を技術として使っていく必要がある。 インフォグラフィックスとデータビジュアライゼーションの違い インフォグラフィックスとデータビジュアライゼーションの違いは、静的か動的かではなく、探索的データビジュアライゼーションVS説明的データビジュアライゼーションであり、インフォグラフィックは後者の一部だと考えている。 データ分析を体得していなければ、どんなに可視化しても何のアウトプットもでてこない。データ分析とは仮説を立てること。 データジャーナリズムとは そもそも、データビジュアライゼーションは批判である。相手が間違っていることをデータで指摘するのがデータジャーナリズム。わかりやすいデータビジュアライゼーションには本来の価値はないので、センセーショナルなものでなければならない。記事が信用されなくなってきた背景にデータジャーナリズムがあるのではないか(データを根拠にして初めて価値があるという流れが出てきた)。海外では、記者が匿名でもデータ自体の事実確認が取れれば、信用される。ただ、日本はデータで人を攻撃することはなく、データよりも人間の話の方が信用される傾向にある。 ディープラーニングとデータビジュアライゼーションの関係 ディープラーニングで出てきたものを可視化してもセンセーショナルさはない。 機械学習の中でいつデータビジュアライゼーションが利用されるかというと、データの素性を表す時や答えのあたりをつけるとき等に使う。データを基にしてその法則性をコンピューターが探し出すのがディープラーニングだが、その法則をなぜコンピュータが出したのか人間が理解する必要がある(=人間にもわかるような形にする)。その際にデータビジュアライゼーションを使う。 日本のデータビジュアライゼーションへ一言 日本のオープンデータ化は遅れているという話になりがちだが、昔はPDFを無理やりCSVに変換する地道な作業をしていることがあった。オープンデータやるほうがコストが上がるのでは本末転倒。「CSV公開されてないから作業できない」なんて甘えだ。 22:30近くまで続いたイベントの後には懇親会!終電に間に合って良かったですね。 こんな素晴らしいディスカッションができる集まりがE2D3です。もっと話したい方は、次のもくもく会に来てくださいね。