こちらの講演で使ったスライドです。生物学関連の研究でどのように可視化が使われているのか、それらのニーズに対応するためにどのようにソフトウェアを作っているのかについてのお話です。 https://peatix.com/event/1756920/

1. 今あえてコードから
可視化を作る
生物学分野での実例を交えて
Keiichiro ONO
University of California, San Diego
Department of Medicine

2. 自己紹介
● Keiichiro ONO （大野圭一朗）
● ライフサイエンス分野に特化したソフトウェア開発者
● カリフォルニア大学サンディエゴ校医学部 Trey Ideker研究室
○ 以下の非営利団体で技術者をやっています
■ National Resource for Network Biology
■ The Cytoscape Consortium
■ Cancer Cell Map Initiative
■ San Diego Center for Systems Biology
● 主なプロジェクト
○ Cytoscape / DCell / NDEx / Cytoscape Explorler（仮）

3. 本日の概要
● 少々長めのイントロ兼、本業の紹介
○ 2020年現在の例から
● 今あえてカスタムなコードから可視化を作る必要性のある場面
○ Plotly Dashによるインタラクション作成
○ 汎用可視化ツールとしての deck.gl - グラフ描画コンポーネントを例にして
● まとめ

4. 長めのイントロ兼本
業の紹介

5. 2020年

7. SARS-CoV-2

8. 2020年は生物学関連のワードがメディアを飛び交った
ポリメラーゼ連鎖反応（PCR）
プライマー
ゲノム解析によるウイルスの系統樹
mRNAワクチン

9. 2020 ~ COVID-19 ~ Visualization

10. https://www.ncbi.nlm.nih.gov/nuccore/NC_045512.2およそ30kbp = 情報としては30,000文字

12. From: A SARS-CoV-2 protein interaction map reveals
targets for drug repurposing
Fig. 3: SARS-CoV-2 protein–protein interaction network.

13. From: A SARS-CoV-2 protein interaction map reveals
targets for drug repurposing
Fig. 3: SARS-CoV-2 protein–protein interaction network.

14. 様々な手法やツール
アラインメントビューア
ゲノムブラウザ
タンパク質の構造ビューア
相互作用の可視化
系統樹
etc.

15. https://nextstrain.org/sars-cov-2/

16. COVID-19関連研究で使われる情報
遺伝子配列（ゲノム情報）
タンパク質の構造
タンパク質と薬剤の相互作用
感染経路
系統樹

17. COVID-19関連研究で使われる情報
遺伝子配列（ゲノム情報）→ 文字列
タンパク質の三次元構造 → 文字列と座標
タンパク質と薬剤の相互作用 → グラフ構造
感染経路 → グラフ構造
ウイルスの系統樹 → 木構造

18. 計算機は生物を研究するためのインフラ

19. 私の本業: 生物学者が使うツールやインフラを整える
https://idekerlab.ucsd.edu/

20. 私の本業: 生物学者が使うツールやインフラを整える
https://idekerlab.ucsd.edu/

21. https://www.nytimes.com/2020/11/09/science/dogs-aging-behavior.html

22. 犬の年齢の推定
分子生物学からのアプローチで犬の年齢を人間に置き換えたときのもの
を推定できる計算式を導く
→ 手法は統計やネットワーク分析、扱うデータや種は様々
ただしやはり難易度の高いがんなどの人の疾患関連が多い

23. Genotype → Phenotype

24. KEGG PATHWAY: Map01100 Metabolic pathways (Global Map)

25. → こういった研究を支えるソフトウェアを作る

26. 実際には何をやっているのか？
解析部分：
研究者の生み出したアルゴリズムを一般の生物学者が使えるようなツールにまとめる
可視化部分：
既存の手法を組み合わせて探索的可視化のアプリを作ったり、論文に使われる図の作
成に使えるようなツールを作る
→「バイオインフォマティクス」という言葉の怪しさ（？）に比べて、やっていることは意外と
地味

27. インフラ整備 → お金の問題

29. CZI: Facebook創業者夫妻の慈善団体
Essential Open Source Software for Science program
➔ 科学研究を支えるオープンソースソフトウェアは、基本的にそれ自体がお金を生む
ことは極めて稀
➔ でも無ければ困るというレベルまで普及したソフトウェアも多数
➔ 外部からの資金なしでは成り立たない
◆ その一部を助けましょう、という理由でザッカーバーグ夫妻の団体が設立
https://chanzuckerberg.com/eoss/proposals/

30. 主なプロジェクト

31. NDEx
the Network Data Exchange:
A Resource for Network Analysis, Collaboration and Publication
(「インデックス」と発音します)

32. NDExとは？
● 生物学方面のネットワーク/パス
ウェイデータのためのワークス
ペース兼公開のためのプラット
フォーム
○ 「生物学的ネットワークのための
GitHub」
● 公共データベースに登録されたも
ののミラーと、ユーザーデータの併
用

33. COVID-19 reference networks in NDEx Repository

35. （汎用のネットワーク可視化ツール）

37. 大規模なインタラクションから複
雑な手書きのパスウェイまで描
画可能

40. 生物学研究での探索的可視化ツール
＝ 比較的ニーズが複雑
→ カスタムなツールを作成する必要性

41. HiView: 2.7.x

42. HiView: 2.7.x
D3 Circle Packing
React-VIS
Cytoscape.js
Material UI

43. 基本的なパターンは
既存のツールでカ
バーされる
多くの場合、データの種類と
量が決まると自ずと手法は決
まる
→ アプリケーションの構成
要素は比較的シンプル

45. The Data Visualisation Catalogue
https://datavizcatalogue.com/
データの型が決まれば、まず既存の手法、
ツールでカバーできないかを考える
定番の手法があれば、ほぼ間違いなく既存
のツールやライブラリが存在するため、ま
ずはその利用を検討する

46. それでも自分でコードを書く必要がある時…
大量のデータ
インタラクション
新しい可視化手法

47. それでも自分でコードを書く必要がある時…
大量のデータ
インタラクション
新しい可視化手法

48. 問題の複雑さ
● 既存の手法を用いた単一種類のデータ可視化
● 複数のデータ型に対する可視化
● 単一種類の大量のデータ
● 複数のチャート間のインタラクション
● 大量かつ複数のデータ型のチャート間のインタラクション

49. 問題の複雑さ
● 既存の手法を用いた単一種類のデータ可視化
● 複数のデータ型に対する可視化
● 単一種類の大量のデータ
● 複数のチャート間のインタラクション
● 大量かつ複数のデータ型のチャート間のインタラクション

50. それでも自分でコードを書く必要がある時…
大量のデータ
インタラクション
新しい可視化手法

51. インタラクションを実装するhttps://dash-gallery.plotly.host/dash-cytoscape-lda/

52. 自由にインタラクションを作る
● 既存のBIツール（Tableauなども含む）でもインタラクティブなアプリケーションやダッ
シュボードを作ることは可能
● しかし限界はある
○ カスタマイゼーションの限界
○ 必要なUIコンポーネントの不足
● ただ、JavaScriptで描画部分などを書くのは避けたい

53. Plotly Dash

54. Plotly Dashで何ができるか？
豊富なオープンソースのコンポーネントを組み合わせてPythonのみで可視化とそれに
伴うインタラクションを作成可能
ウェブ・アプリケーションとして比較的容易に公開可能
データ分析者にとって馴染みの深いPythonのみで記述可能
例：
https://dash-gallery.plotly.host/Portal/

55. Dashの日本語の書籍
なんと日本語の書籍も出ています
Pythonインタラクティブ・データビジュア
ライゼーション入門 ―Plotly/Dashによ
るデータ可視化とWebアプリ構築―
https://www.asakura.co.jp/books/is
bn/978-4-254-12258-9/

58. さらなる複雑性、大規模データ
DashはJS部分を触らなくてもアプリケーションを構築できるのがウリ
したがって、描画コンポーネント部分を拡張したい、作りたい場合にはフロントエンド関連
技術のレイヤーまで降りていくしかない
今公開されているコンポーネント群で目的のアプリケーションが容易に実装可能かどう
かは作る前にきちんと見積もるのが大切
Dashでは難しいケース → React / Redux / D3 / deck.gl / etc.

59. それでも自分でコードを書く必要がある時…
大量のデータ
インタラクション
新しい可視化手法

60. 既存のツール: グラフ描画を例に
そもそも大量のデータポイントをそのまま可視化するようなケースをサポートしている
ツールは少ない
ブラウザで100万を超えるようなデータポイントを描画するようなアプリケーションは、そ
もそもちょっと前まではパフォーマンス的に難しかった

61. 私たちの場合： 大規模グラフの俯瞰図
問題：
● ブラウザでも大規模なグラフの「傾向」を見たい
○ クラスタの分布、大きさ
○ 巨大な階層構造
● 高速なインタラクション
○ Google Mapのような感覚でズーム /パン
● ノード数に比べてエッジ数がはるかに多い密なネットワークを可視化したい
これらの要求を満たす既存のJavaScriptライブラリがない
→ 俯瞰図用のビューアを作ろう

62. ツールの選定
そもそも自分たちはCGの専門家でもなく、GPUを使ったコードのローレベルな最適化な
どをしたいわけではない
できるだけ汎用性があり、パフォーマンスの出る描画ライブラリが欲しい
そもそも大規模データをリアルタイムで分析（クラスター抽出など）するのは現実的では
ないので、そこは可視化の前処理に含んでも問題ない

63. Deck.gl
● Generalized framework for
data visualization
○ Just like Unity for game
developers
● Developed by data viz team
at Uber
● Open source
● Visualizes data in multiple
Layers

65. kepler.gl

66. deck.gl ≠ Geospatial Visualization Toolkit

67. Autonomous Visualization System (AVS)

68. Xiaoji Chen | Feb 2020 | Contact Us
https://docs.google.com/presentation/d/1qtXUQzMuIa8NYIKUa1RKfSwvgpeccY-wrPrYqsb_8rE/edit?usp=sharing

69. Why Large Graph Renderer?
● We already have good renderer for networks on browsers, like Cytoscape.js
● It is a fully featured graph renderer
○ Has a lot of features
■ Showing charts on nodes
■ Many types of nodes/edges
○ Fully interactive
● ...But NOT designed for huge data, including millions of objects

70. Overview of the project
Main Goal: Performance
● Showing overview of millions of objects
● Has minimum set of interactivity
○ Zoom
○ Pan
○ Selection
● Just like Google Map
○ Not an editor but fast, useful viewer
○ Showing details when zooming in, display just
overview when zooming out

71. deck.glでの可視化 = レイヤーの集合

72. 基本的な考え方
可視化したいデータポイントをいくつかのレイヤーに分割して表現できないか考える
既存のレイヤーで賄えるかを考える
Composite Layer

73. レイヤーに分割
グラフを描画する場合
ノード
ラベル
エッジ
背景

74. Design and Implementation
This is a React component (for web browsers)
Client Technology Stack
1. WebGL
2. Luma.gl
3. Deck.gl
4. Large Graph Renderer (LGR) ←

75. ● A React component
○ Reusable in our ecosystem
■ NDEx
■ HiView
■ Future web apps
● Fast rendering and limited interaction
○ Should handle millions of objects
○ Does not support full set of visual properties
Large Graph Renderer

76. STRING-human data set
20k nodes / 470k edges
Graph data in CX format
Auto-Graph Visualizer
https://github.com/idekerlab/auto-graph-visualizer
LGR

77. How LGR works
1. Feed the network data in CX2 data format
2. Convert the data into LGR’s format locally
3. LGR renders it

78. A composite graph layer created with scatter plot + line layers

79. A graph created with scatter plot + arc layers

83. 「小さな」ネットワークの例
http://dev.ndexbio.org/viewer/networks/c5a930c3-1ae3-11eb-b731-525400c25d22

84. 中規模のネットワークの例
http://dev.ndexbio.org/viewer/networks/ef67b25d-08e7-11eb-a2d4-525400c25d22

85. まとめ：
deck.glとは高速な描画と基本的なインタラ
クションに特化したツールキット

86. 実際のアプリケーション構築
描画は可視化アプリケーションの一部でしかない
前処理
データの入出力

87. D3.jsなどの既存のライブラリとdeck.gl

88. 役割分担が重要！
D3.js - 可視化のための数学ライブラリ
● 定番のパレットの取得
● 各オブジェクトのデータから位置への変換の計算
deck.gl - 大規模なデータのマシンパワー(主にGPU)による力技描画ライブラリ
Python / Rなどの各種ライブラリ - データの前処理やリアルタイムではこなせない時
間のかかる計算の処理

89. NIH症候群と戦う
https://en.wikipedia.org/wiki/Not_invented_here
D3.jsで一からチャートを作るのは面白いですが、本当に必要かをよく考える

90. 実際にウェブ・アプリケーションを作る
メモリの制約
データのロード時間
データポイントのレイアウト
これらを解決する仕組みを現在制作中

91. まとめ
2020年現在、基本的なツールキットは豊富に準備されている
まずはそれらを使えないかを考える
インタラクションが必要なアプリケーションの構築ではPlotly Dashも良い選択肢の一つ
大規模なデータの描画には、deck.glも検討に値する