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

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…

地理空間情報 x ビジネス x オープンソースGIS 勉強会!

7月13日(水)、東京・渋谷区の青山スタートアップアクセラレーションセンター(ASAC)で、地理空間情報とQGISをはじめとしたオープンソースのGISについての勉強会を開きました。 講師は、QGISの入門書「オープンデータ+QGIS  統計・防災・環境情報がひと目でわかる地図の作り方」の著者で合同会社MIERUNE代表社員の朝日孝輔さんと業務執行社員の古川泰人さん。そして、総務省の槙田直木さんです。 告知から時間がなかったにもかかわらず、70名近くの方に参加していただきました。 一番バッターは、古川さん。地図を使うことで何ができるのか。そもそも地図ってなんなのか。そして、地図の役割の移り変わりについて説明していただきました。「昔の地図は権力者のメディアだった。でも、グーグルマップの登場で、今は、誰もが利用・発信できる市民のメディア(道具)になった」という言葉が印象的でした。 地図が“市民”のメディアとなるツールがオープンデータやオープンソースのGIS(地理空間情報システム)で、メディアとしての成果の1つがCode for Sapporoの保育園マップなんだという説明は、なるほどなと思いました。 古川さんの発表資料はこちら↓ 20160713E2D3Workshop from Yasuto Furukawa 続いて登壇したのは、朝日さん。ことし6月、古川さんと一緒に、地理空間情報を活用したコンサルティング会社「MiERUNE」(札幌市)を立ち上げました。 古川さんは、QGISの実践的な使い方を中心に、地図上にデータを重ね合わせることで新たな事実を発見するをデータ解析の方法や、QGISのプラグイン機能を活用したアニメーションや3Dによる視覚化の方法について、分かりやすく講義してくれました。一見するととっつきにくいQGISですが、ありとあらゆる機能を自由に利用することができるポテンシャルの大きさを感じさせてくれました。 朝日さんの発表資料はこちら↓ 地理空間情報 x ビジネス x オープンソースGIS 勉強会! from Kosuke Asahi 地理空間情報とは言っても、どんなデータがどこにあるのか。槙田さんは、私たちが自由に使える公共データの使い方や注意点などを解説してくれました。 特に、農林水産省が公開している農林業センサスを中心とした「地域の農業を見て、知って、活かすDB」は、ことし6月に公開が始まったばかりのデータベースで、貴重な情報をいただきました。 槙田さんの発表資料はこちら↓ QGISで遊べる公共境界データ Public boundary data of small areas of Japan for QGIS beginners from Naoki MAKITA もともとこの勉強会。上京の予定があった朝日さんが、イベントを通じて知り合ったE2D3の五十嵐康伸さんに「お茶でも飲みませんか」と連絡したのがきっかけだったといいます。「だったら、できるだけ多くの人にGISの魅力を知ってもらおう」と、ほぼ“ムリャぶり”に近い形で準備が始まりました。開催まで間がなく、果たしてどれだけの人が関心を持ってくれるのか心配でしたが、会場が満席になるほどの盛況になり、地理空間情報への関心の高さに驚きました。(会場で、朝日さんと五十嵐さんはこの日が初対面だったことを知ってさらに驚きました。) 最後に会場の提供にご協力いただいた、トーマツベンチャーサポートの松本雄大さんには、この場を借りて、改めて感謝を申し上げます。

How to Commit Graphs to E2D3 for Mac Users

こんにちは E2D3のContributerの大曽根です。 今回は、はじめてのグラフをcommitする 環境は、Mac(バージョン 10.10.2) + Chrome(バージョン 41.0.*)です。 まずこちらを参考にして、E2D3のソースを持ってきます。 https://github.com/e2d3/e2d3/wiki/Getting-Started npm start をしてhttp://localhost:8000/index.htmlにアクセスすると、下記のような画面を見ることができます。               ここにグラフを追加することができます。 今回は、bubble-chartを追加したいと思います。 cloneしてきたままですと、masterのbranchにいますので、まず、branchをきってそこに移ります。 今回はbubble-chartなので、branch名もbubble-chartにします。 $ git checkout -b bubble-chart まずは、contribディレクトリ直下に”bubble-chart”というディレクトリを作成します。 その中に data.csv main.css main.js README.md thumbnail.png というファイルを作成します。 ※今回はサンプルのbarchart-javascriptから持ってきてしまいました。   主にmain.jsをいじってグラフを作成していきます。 今回はbubble chartということで3つのメトリックをそれぞれ、x軸とy軸および円の大きさにプロットします。 こんな感じに作ってみました。   次に、サムネイルの設定をしていこうと思います。好きな画像をディレクトリ内に入れて thumbnail.pngという名前で保存すればよいのですが、E2D3の”Save Image”の機能を使って作成してみようかと思います。 先ほどの画像の右上の”Save Image”のボタンを押下し、.png形式で保存します。 その後、bubble-chartのディレクトリにthumbnail.pngという名前で保存すれば完了です。 一覧に表示されるようになります。   最後に、READMEを編集しましょう。README.mdを編集することで、Indexのグラフのサムネイルをマウスオーバーした際の表示を変更することができます。下の図がその例になります。 できましたら、commitして、 $…