Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

「モダンな」可視化アプリケーション開発とはどのようなものか?

2 753 vues

Publié le

注意: 日本語フォントがうまく表示されませんので、PDFをダウンロードするか、こちらからご覧ください。 

https://speakerdeck.com/keiono/modanna-ke-shi-hua-apurikesiyonkai-fa-tohadofalseyounamofalseka

E2D3主催の勉強会(2017/07/08(土) 13:00 〜 21:00 @TECH PLAY SHIBUYA)にて発表したスライドです。モダンなデータ可視化アプリケーションを作るにはどのようにすれば良いのかを、実務者の視点から考察した内容です。

https://techplay.jp/event/626591

Publié dans : Données & analyses
  • Hello! High Quality And Affordable Essays For You. Starting at $4.99 per page - Check our website! https://vk.cc/82gJD2
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

「モダンな」可視化アプリケーション開発とはどのようなものか?

  1. 1. Modern Dataviz Application Development 「モダンな」可視化アプリケーションとは? Keiichiro Ono University of California, San Diego
  2. 2. Keiichiro Ono UC, San Diego Dept. of Medicine Bioinformatics software engineer National Resource for Network Biology 
 The Cytoscape Consortium
  3. 3. Keiichiro Ono UC, San Diego Dept. of Medicine Bioinformatics software engineer National Resource for Network Biology 
 The Cytoscape Consortium
  4. 4. Cytoscape Platform for (biological) network analysis and visualization
  5. 5. Cytoscape
  6. 6. cytoscape.js
  7. 7. Cytoscape デスクトップ・アプリケーションから始ま り、今は関連プロジェクトのブランド名に
  8. 8. 普段やっていること -生物学分野でのデータを統合/解析/可視化するためのソフ トウェア基盤整備 -研究者へのインタビュー、設計、技術評価、実装、テスト、 論文書き、学会発表、ワークショップの講師 (つまりな んでもやります) -この分野で扱うデータ -塩基配列 -タンパク質の三次元構造 -遺伝子/タンパク質のネットワーク(グラフ) -遺伝子の機能アノテーション -データを提示する対象(クライアント) -基礎医学研究者 -臨床医 (予定)
  9. 9. 最近のプロジェクト紹介
  10. 10. 最近のプロジェクト - 階層化された遺伝子群を可視化する - レガシーな技術で実装されたアプリケーションを、ウェブ 関連技術を使って拡張する - 我々のプロジェクトでよく利用する可視化/UI部品の再利用 可能な(React)コンポーネント化
  11. 11. NDEx ClientBuilt with Electron Electron App Java-Swing App
  12. 12. DeepCell(仮)
  13. 13. 本日のテーマ
  14. 14. -モダンなデータ可視化アプリケーション開発とは? -複雑なデータセットを可視化するアプリケーション のデザイン手法 -実際の設計と実装: React + D3を例に
  15. 15. 本題の前に…
  16. 16. 会場アンケート: 以下のツールを利用 していますか?
  17. 17. v4
  18. 18. -モダンなデータ可視化アプリケーション開発とは? -複雑なデータセットを可視化するアプリケーション のデザイン -実際の設計と実装: React + D3を例に
  19. 19. 「モダンな」可視化アプリケーションの実際
  20. 20. 「モダンな」可視化 ウェブ・アプリケーションとは?
  21. 21. 使用技術的にモダンではない 可視化アプリケーションの例
  22. 22. Cytoscape • Java + Swing • 基本的にO社はほぼ放棄 したUIツールキット • 使用技術的にはモダン ではない
  23. 23. Cytoscape - 一方、開発スタイルや設計はできるだけ現代的であろうとしている - OSGiによるモジュール化 - APIと実装の分離 - データモデル、viewモデル、レンダリングレイヤーの分離 - GitHub / CI / Unit tests / etc.
  24. 24. Heer, Jeffrey, and Maneesh Agrawala. "Software design patterns for information visualization." IEEE transactions on visualization and computer graphics 12.5 (2006). 可視化特有の デザインパターンの利用
  25. 25. HiView Top Component Start Button Command Bar Widget Fit Button Zoom Out Button Zoom In Button DAG View Network Viewer Widget Cytoscape.js Renderer WebGL based renderer (Optional) Search Widget Query Panel Start Query Button Clear Query Button Query Text Box Search Result Panel Search Result List Search Result 1 Search Result n Property Panel Raw Interaction Data View NetworkViewer Widget Cytoscape.js Renderer Selected Edge Property Panel Edge Score List Edge Score Chart Filter List Widget Edge Type Filter Panel Type Checkbox 1 Type Checkbox n Edge Score Filters panel Z-Score Filter Integrated similarity score filter Title Panel Title UUID Description Base Tabbed Pane Gene Property Panel Gene Name Nested Property List List Item 1 List Item n Description Term Property Panel Selected Object’s Property Tab Nested Prop Interaction Tab Interaction List Inter Inter Assigned Genes Tab Gene List Gen Gen Toolbar Application Title 一つの定義
  26. 26. HiView Top Component Sta Command Bar Widget Fit Button Zoom Out Button Zoom In Button DAG View Network Viewer Widget C W Search Widget Query Panel Start Que Clear Qu Query Te Search Result Panel S Property Panel Raw Interaction Data View Filter List Widget Edg Edg Title Panel Title UUID Description Base Tabbed Pane Gene Term Toolbar Application Title 一つの定義 -モジュール化されている -よく知られた可視化のパター ンや原則を利用している -アプリケーションの基本設計 - データとUIの設計が構造 化されている -データの管理に一定のルール を持つ -テスト可能 (コンポーネント・ツリーの例)
  27. 27. 特定のテクノロジー を使うことは必ずし も「モダン」である ために必須ではない
  28. 28. モダンであること =アプリケーションの構造デザイン +使用するテクノロジー
  29. 29. そうは言ったものの… マジョリティから外れると一気に余計 な労力が増えますので、できるだけメ インストリームと呼べる情報量の多い ツール群を使うのが現実的です
  30. 30. 実装のための ツール群
  31. 31. 現時点での最適解 -言語: ES2015 以降 -パッケージマネージャ: npm -ビルドツール: Webpack 3 -コンポーネント化: React -可視化: - D3 - 好みのレンダリング技術 (SVG/Canvas/WebGL)
  32. 32. この組み合わせでできること -「普通の開発」 - トランスパイル、ミニファイ、テストなどの自動化 - モジュール化とそれに伴う再利用性の向上 - npmコマンドでのインストール - コンポーネントベースでの可視化機能設計
  33. 33. WebComponentsは?
  34. 34. WebComponents -未来には普及しているかもしれない - Googleなどの強力な後押し -“Perfect World”を目指しすぎ? -動向は追う価値あり
  35. 35. 各開発ツールの評価 (主観です)
  36. 36. 知識の必要度 必須 必要(もしくは類似のツール) ES5にこだわる必要がなければ必須
  37. 37. フロントエンド界隈が 複雑化しすぎ問題 How it feels to learn JavaScript in 2016 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
  38. 38. しかし本当にそこまで 複雑だろうか? 依存管理 ビルドとタスク実行 互換性のための変換(トランスパイル)
  39. 39. 実装は移り変わっても、基本 的なツールのやっていること はそれほど変わっていない
  40. 40. モダンであること =アプリケーションの構造デザイン +使用するテクノロジー Recap
  41. 41. モダンであること =アプリケーションの構造デザイン +使用するテクノロジー Recap
  42. 42. -モダンなデータ可視化アプリケーション開発とは? -複雑なデータセットを可視化するアプリケーション のデザイン -実際の設計と実装: React + D3を例に
  43. 43. 可視化アプリケーションを デザインする
  44. 44. アプリケーションのタイプ
  45. 45. シンプルな チャート 一つの画面に、一つ、も しくは複数の独立したデー タを可視化する Examples from: http://www.reactd3.org/docs/basic/
  46. 46. Examples from: http://www.reactd3.org/docs/basic/ Data 1 Data 2
  47. 47. Scrollytelling -複数のデータセットを用いて ストーリーを構成する -複数の独立したデータセット をチャートに -データジャーナリズムでよく 使われる https://pudding.cool/process/how-to-implement-scrollytelling/ https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/ homan-square-chicago-police-detainees https://www.nytimes.com/interactive/2016/07/07/world/americas/ bolivia-climate-change-lake-poopo.html
  48. 48. -複数のデータセットを複数の手法で可視化 -可視化コンポーネントはイベントで連結されている -機能はデスクトップ・アプリケーションに準ずる Data Dashboard
  49. 49. ライブラリ 汎用性を高めて他者が再利 用できるように設計された 可視化コンポーネント Data Visualization Component CSS 3rd party lib JS
  50. 50. タイプに合わせてデザインを使い分ける -シンプルなチャートを作るのに、Reactなどのデザイン方法に一定 の縛りをかけるフレームワークを使うのが本当に必要か? - 更に言えば、D3などを使って書く必要は本当にあるのか? -逆に、複雑なデータを持つダッシュボードを作るのに、一枚の HTMLにJSをベタ書きするような方法でメンテナンス性などを確 保できるか? -フレームワークから作り方を選ぶよりも、データと見せ方からフ レームワークを選ぶ
  51. 51. 自分なりのスタイルを考える -シンプルな可視化アプリケーションであっても、自分が把 握できているボイラープレートから始めれば、各種フレー ムワークを使う理由にはなり得る - 完全にブラックボックスとして他人のボイラープレート を使う場合は、メンテナンスや拡張時に困難を伴う -他人(もしくは数ヶ月後の自分が)見て理解できるような構造 を考える
  52. 52. 実際のデザイン例 ダッシュボードの全てをツリーで構成する
  53. 53. ケーススタディ: デスクトップ代替の データ可視化ダッシュボード作成
  54. 54. データセット -各種実験から得られた大規模な遺伝子ネットワーク -統計解析を行い生成した「オントロジー」 - DAGと簡略化されたツリー -公共データベースに登録された遺伝子アノテーション
  55. 55. 要するに… -以下のようなデータをインタラクティブな可視化とし て表現し、ユーザーの選択などに基づいて複数のビュー を連動し変化させる - 階層構造 - グラフ(ネットワーク) - 各種プロパティ(テーブルデータ)
  56. 56. ダッシュボードの画面から必 要となるコンポーネント群を ツリーとして書き出す
  57. 57. HiView Top Component Start Dialog Widget Server Information Panel Credential Panel Password Text Box ID Text Box DAG UUID Text Box Server URL Text Box Button Panel Back to home Button Start Button Command Bar Widget Fit Button Zoom Out Button Zoom In Button DAG View Network Viewer Widget Cytoscape.js Renderer WebGL based renderer (Optional) Search Widget Query Panel Start Query Button Clear Query Button Query Text Box Search Result Panel Search Result List Search Result 1 Search Result n Property Panel Raw Interaction Data View NetworkViewer Widget Cytoscape.js Renderer Selected Edge Property Panel Edge Score List Edge Score Chart Filter List Widget Edge Type Filter Panel Type Checkbox 1 Type Checkbox n Edge Score Filters panel Z-Score Filter Integrated similarity score filter Title Panel Title UUID Description Base Tabbed Pane Gene Property Panel Gene Name Nested Property List List Item 1 List Item n Description Term Property Panel Selected Object’s Property Tab Nested Property List List Item 1 List Item n Interaction Tab Interaction List Interaction 1 Source Type List Score for types Target Interaction n Assigned Genes Tab Gene List Gene 1 Gene props (TBD) Gene n Toolbar Application Title Toggle Menu Button Application Settings Widget Title Panel Links Panel Main View Settings Panel View Threshold Slider Controller’s View State Panel Show/Hide Search Panel Switch Show/Hide Command Bar Switch 可視化に必要な要素を コンポーネントのツリーとして
  58. 58. そのコンポーネントを作る のに必要なデータモデルを 考える
  59. 59. Hierarchy DAG Search Selected Term Network Properties Nodes Edges Root Node ID NDEx UUID Node 1 Node n Node Property 1 Node Property m Edge 1 Edge n Edge Property 1 Edge Property m Raw interaction network Position (x, y) Term Properties Nodes Edges Term ID Term Name Other property 1 Other property nClient Data Model Root Client Side Routing Current location Query User Credential NDEx ID NDEx Password Is search running Search Result Hit 1 Hit n Is loading network Past locations Is loading network 1st child of property 1 M-th child of property 1 Network in Cytoscape.js Edge ID Source Node Target Node Node ID Tree (In Cytoscape.js) Network Style (Renderer-dependent) Hidden Edges Hidden Edge 1 Hidden Edge nNDEx UUID NDEx UUID Term ID Filters Application Setting Rendering Options Main Tree View Threshold Edge Type Filter Edge Score Filters Edge Type 1 Edge Type n Is selected Appearence Title Score Threshold 1 Score Threshold 2 Is selected Background color location 1 location n データモデルは一つの大きなツリーとして
  60. 60. HiView Web Application MyGene.info Description Pathway annotation Functional annotation NDEx Raw interactions Main DAG (hierarchy) CX to Cytoscape.js Service CX Tool written in Go Graph Layout Service D3 Cluster Layout Other custom layouts そしてその可視化アプリケーション実現 に必要なバックエンドをシンプルに作る
  61. 61. ポイント -クライアントサイドの全てを木で考えるのは、可視化アプ リケーションには比較的相性が良い - データと可視化コンポーネントの描画への対応が明瞭 - ブランチごとに機能が分かれるので、どこを再利用可能 にするかを決めやすい - 機能追加 
 = データ/コンポーネント木へのブランチ(枝)追加
  62. 62. -モダンなデータ可視化アプリケーション開発とは? -複雑なデータセットを可視化するアプリケーション のデザイン -実際の設計と実装: React + D3を例に
  63. 63. 実装するための 技術選択
  64. 64. React + D3.js v4
  65. 65. それぞれの特徴
  66. 66. React
  67. 67. -Viewのみに特化した比較的小さなフレームワーク -コンポーネント化を強く意識した設計 - Reactベースのアプリケーション =
 コンポーネントの集合 React
  68. 68. D3.js v4
  69. 69. -可視化に関する様々な計算を行う事実上の標準ライブラリ -v4になり後方互換性を捨てた大規模なアップデートを行う - モジュール化 - 元々D3は可視化に限らない様々な機能の集合体だった - レイアウト、CSV読み込み、カラーコーディング生成 D3.js v4
  70. 70. v4のモジュール群
  71. 71. d3-pathd3-array d3-dsvd3-drag d3-format d3-dispatch d3-timer d3-quadtree d3-collection d3-time d3-time-formatd3-transition d3-color d3-interpolate d3-ease d3-hierarchy d3-brush d3-selection d3-queued3-random d3-voronoi d3-zoom d3-scaled3-forced3-polygon D3.js v4 d3-chordd3-request d3-geod3-axis d3-shape D3.js v4
  72. 72. d3-drag d3-dispatch d3-timer d3-transition d3-color d3-interpolate d3-ease d3-hierarchy d3-brush d3-selection d3-queued3-random d3-voronoi d3-zoom d3-polyg
  73. 73. 例: D3 stratify moduleをレイア ウトエンジンとしてサーバー サイドで使う
  74. 74. なぜ組み合わせるのか?
  75. 75. -カラーマッピング、標準的 レイアウトなど可視化に関 するマッピング、モデリン グ部分の機能が充実してい る -比較的ローレベルな機能が 多いので、コンポーネント レベルでの書き方の規律は 持たない -基本的には、与えられたデー タ(props)を元に差分を指示通り に描画するのみ -コンポーネント化との相性が いい -データ可視化の基本的な考え 方にもよく馴染む - 与えられたデータから視覚 要素へのマッピング関数
  76. 76. 各ライブラリの役割分担 -基本的にはReactに仮想DOMの管理を任せる -コンポーネントのツリーとして可視化を表現する -D3を数学用ライブラリとして使い、可視化関連に 必要な計算のみに徹する - カラーコーディング、レイアウト、スケーリ ングなど
  77. 77. アプリケーション デザインのパターン
  78. 78. Data Mapping render() Low-level rendering Transform 各ライブラリの役割分担
  79. 79. パターン1: 描画をReactに任せる -React-centricな書き方 - 可視化モジュールをツリー形式の構造に分割 - 例:グラフデータ - ノード、エッジをベースコンポーネントとして、 その集合としてのグラグコンポーネントを定義 -もっとも標準的なReactコンポーネントの書き方のパターン
  80. 80. Shape EllipseNode Neuron Rectangle コンポーネントの関係
  81. 81. 最もシンプルなコンポーネントの例 const Ellipse = props => ( <ellipse rx={props.w} ry={props.h} style={props.style} /> )
  82. 82. class Shape extends Component { render() { const shapeName = this.props.shapeName if (shapeName === 'circle') { return ( <Ellipse width={this.props.size} height={this.props.size} style={this.props.style} />) } else { return ( <Neuron data={this.props.data} size={this.props.size} />) } } }
  83. 83. class Node extends Component { onClick = event => { this.setState({selected: !this.state.selected}) this.props.eventHandlers.nodeSelected(this.props.id) } render() { return ( <g className={this.props.nodeType} transform={this.getTransform(this.props.position)} onClick={this.onClick} > <Shape size={this.props.nodeSize} position={this.props.position} style={style} shapeName={shapeName} data={this.props.data} /> {textElement} </g> ) } }
  84. 84. D3はどこに…?
  85. 85. 脇役に徹する import * as d3Interpolate from 'd3-interpolate' const colorMapper = d3Interpolate.interpolateHcl('white', ‘orange') const fillColor = colorMapper(this.props.datapoint) 数値に対応したカラーコーディングの生成
  86. 86. 脇役に徹する componentDidMount() { const treeArea = d3Select.select('#' + this.state.rootTag) const zoom = d3Zoom.zoom(treeArea) .scaleExtent([1 / 10, 100]) .on('zoom', this.zoomed) const zoomArea = d3Select .select('#' + this.state.zoomAreaTag) .call(zoom) // Move to initial location zoomArea.call(zoom.transform, d3Zoom.zoomIdentity.translate( this.props.initialPosition.x, this.props.initialPosition.y)) } ズームレベルの計算
  87. 87. const getTree = edges => { return d3Hierarchy .stratify() .id(d => (d.id)) .parentId(d => (d.parentId))(edges) } const applyCluster = d3Tree => { const layout = d3Hierarchy .cluster() .size([360, 1600]) .separation((a, b) => { return (a.parent === b.parent ? 1: 2) / a.depth }) // Apply layout and generate (x,y) positions layout(d3Tree) } レイアウトの生成
  88. 88. パターン2: ほとんどの描画をD3で行う -D3の流儀でほとんどの描画を行う -Reactのrender()内ではターゲットとなるタグを描画するのみ
  89. 89. render() { return ( <svg width={width} height={height}> <g ref='graph' /> </svg> ) } パターン2で作成した場合のrender()メソッド
  90. 90. componentDidMount() { this.d3Graph = d3.select(ReactDOM.findDOMNode(this.refs.graph)) // ここからはいつものD3のコード(略) },
  91. 91. どちらのパターン がベターなのか?
  92. 92. 答:状況による -実装者の技量、アプリケーションの規模、データの大きさ などによって答えは異なる -よりReact風なアプリケーションを目指すならパターン1 を、薄いラッパーとして使いたいだけならパターン2を
  93. 93. Tips
  94. 94. スクラッチからの作成を避ける -目的の達成に、本当にD3でのカスタムコンポーネントが必 要か? -既存のライブラリの組み合わせやラッピングの検討 - render()メソッド内では起点となるタグのみを描画 - ライフサイクルメソッドでアップデートを管理 - (これが結構辛い場合もある…)
  95. 95. 全てをフロントエンド でやろうとしない -必要に応じてバックエンドで処理 するように書く -PythonやRの方が得意そうな処理 だと思えば、薄いラッパーを書い てREST API、もしくはRPCとして 呼び出す -その場合には極力シンプルに、で きればstatelessに Docker as Portable Data Visualization Backend
  96. 96. まとめ
  97. 97. まとめ -モダンと呼べる可視化アプリケーションはメンテナンス可 能な構造を持つ -特定のテクノロジーに縛られすぎない - ある程度の変化は受け入れる -現状ではReact+D3の組み合わせは構造化された可視化アプ リケーションを作る場合に便利な選択肢である
  98. 98. 触れられなかったこと -データ管理部分の実装 - Flux / Redux - アプリケーションの規模によるところが大きい -SVG以外の描画 -Webpackなどのビルドツールを使う際のノウハウ
  99. 99. 参考文献 Learning React Functional Web Development with React and Redux By Alex Banks, Eve Porcello Publisher: O'Reilly Media Release Date: May 2017 現時点(7/2017)でもっとも「標準的な」テクノロジーの組 み合わせで書いてある良書
  100. 100. 2017 Keiichiro Ono kono@ucsd.edu

×