___ 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.

カリフォルニア大学サンディエゴ校医学部に所属するエンジニアであり、オープンソースのネットワーク可視化ソフトウェア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.

講師は、QGISの入門書「オープンデータ+QGIS  統計・防災・環境情報がひと目でわかる地図の作り方」の著者で合同会社MIERUNE代表社員の朝日孝輔さんと業務執行社員の古川泰人さん。そして、総務省の槙田直木さんです。

告知から時間がなかったにもかかわらず、７０名近くの方に参加していただきました。

一番バッターは、古川さん。地図を使うことで何ができるのか。そもそも地図ってなんなのか。そして、地図の役割の移り変わりについて説明していただきました。「昔の地図は権力者のメディアだった。でも、グーグルマップの登場で、今は、誰もが利用・発信できる市民のメディア（道具）になった」という言葉が印象的でした。

地図が“市民”のメディアとなるツールがオープンデータやオープンソースのGIS（地理空間情報システム）で、メディアとしての成果の１つがCode for Sapporoの保育園マップなんだという説明は、なるほどなと思いました。

古川さんの発表資料はこちら↓

続いて登壇したのは、朝日さん。ことし６月、古川さんと一緒に、地理空間情報を活用したコンサルティング会社「MiERUNE」（札幌市）を立ち上げました。

古川さんは、QGISの実践的な使い方を中心に、地図上にデータを重ね合わせることで新たな事実を発見するをデータ解析の方法や、QGISのプラグイン機能を活用したアニメーションや３Dによる視覚化の方法について、分かりやすく講義してくれました。一見するととっつきにくいQGISですが、ありとあらゆる機能を自由に利用することができるポテンシャルの大きさを感じさせてくれました。

朝日さんの発表資料はこちら↓

地理空間情報とは言っても、どんなデータがどこにあるのか。槙田さんは、私たちが自由に使える公共データの使い方や注意点などを解説してくれました。

特に、農林水産省が公開している農林業センサスを中心とした「地域の農業を見て、知って、活かすDB」は、ことし６月に公開が始まったばかりのデータベースで、貴重な情報をいただきました。

槙田さんの発表資料はこちら↓

もともとこの勉強会。上京の予定があった朝日さんが、イベントを通じて知り合ったE2D3の五十嵐康伸さんに「お茶でも飲みませんか」と連絡したのがきっかけだったといいます。「だったら、できるだけ多くの人にGISの魅力を知ってもらおう」と、ほぼ“ムリャぶり”に近い形で準備が始まりました。開催まで間がなく、果たしてどれだけの人が関心を持ってくれるのか心配でしたが、会場が満席になるほどの盛況になり、地理空間情報への関心の高さに驚きました。（会場で、朝日さんと五十嵐さんはこの日が初対面だったことを知ってさらに驚きました。）

最後に会場の提供にご協力いただいた、トーマツベンチャーサポートの松本雄大さんには、この場を借りて、改めて感謝を申し上げます。

The post 地理空間情報 x ビジネス x オープンソースGIS 勉強会！ first appeared on E2D3.

svgファイルをバックグラウンドに指定しています。svgアニメーションはブラウザ非推奨になっているので、CSSでアニメーションを実装しています。E2D3のリストへは近日中に公開予定です。

11/7に関連イベントを開催いたします。

【裏鎌倉×野良IT】感性ビジュアライゼーションの世界

The post E2D3 test of nature materials. first appeared on E2D3.

このポストは、株式会社ユーザベース様の許可を得て転載しております。オリジナルエントリーは、

「日本の夏は高温化しているか？」について可視化して確かめてみた。

をご参照ください。

The post "Is it getting hot in Japan?" I tried to visualise the data to confirm it. first appeared on E2D3.

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して、

$ git commit -m "bubble-chart added"

Pull Requestを行い、マージしてもらえれば完了です。

The post How to Commit Graphs to E2D3 for Mac Users first appeared on E2D3.