「モダンな」可視化アプリケーション開発とはどのようなものか？
•
7 likes•3,804 views
注意： 日本語フォントがうまく表示されませんので、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
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (9)
Similar to 「モダンな」可視化アプリケーション開発とはどのようなものか？
Similar to 「モダンな」可視化アプリケーション開発とはどのようなものか？ (20)
More from Keiichiro Ono
More from Keiichiro Ono (20)
「モダンな」可視化アプリケーション開発とはどのようなものか？
- 1. Modern Dataviz Application Development 「モダンな」可視化アプリケーションとは？ Keiichiro Ono University of California, San Diego
- 2. Keiichiro Ono UC, San Diego Dept. of Medicine Bioinformatics software engineer National Resource for Network Biology The Cytoscape Consortium
- 3. Keiichiro Ono UC, San Diego Dept. of Medicine Bioinformatics software engineer National Resource for Network Biology The Cytoscape Consortium
- 7. Cytoscape Platform for (biological) network analysis and visualization
- 8. Cytoscape
- 9. cytoscape.js
- 13. 最近のプロジェクト紹介
- 14. 最近のプロジェクト - 階層化された遺伝子群を可視化する - レガシーな技術で実装されたアプリケーションを、ウェブ 関連技術を使って拡張する - 我々のプロジェクトでよく利用する可視化/UI部品の再利用 可能な(React)コンポーネント化
- 15. NDEx ClientBuilt with Electron Electron App Java-Swing App
- 16. DeepCell（仮）
- 19. 本日のテーマ
- 21. 本題の前に…
- 23. v4
- 31. Cytoscape • Java + Swing • 基本的にO社はほぼ放棄 したUIツールキット • 使用技術的にはモダン ではない
- 32. Cytoscape - 一方、開発スタイルや設計はできるだけ現代的であろうとしている - OSGiによるモジュール化 - APIと実装の分離 - データモデル、viewモデル、レンダリングレイヤーの分離 - GitHub / CI / Unit tests / etc.
- 33. Heer, Jeffrey, and Maneesh Agrawala. "Software design patterns for information visualization." IEEE transactions on visualization and computer graphics 12.5 (2006). 可視化特有の デザインパターンの利用
- 34. 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 一つの定義
- 35. 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の設計が構造 化されている -データの管理に一定のルール を持つ -テスト可能 （コンポーネント・ツリーの例）
- 39. 実装のための ツール群
- 40. 現時点での最適解 -言語: ES2015 以降 -パッケージマネージャ: npm -ビルドツール: Webpack 3 -コンポーネント化: React -可視化: - D3 - 好みのレンダリング技術 (SVG/Canvas/WebGL)
- 41. この組み合わせでできること -「普通の開発」 - トランスパイル、ミニファイ、テストなどの自動化 - モジュール化とそれに伴う再利用性の向上 - npmコマンドでのインストール - コンポーネントベースでの可視化機能設計
- 42. WebComponentsは?
- 44. 各開発ツールの評価 (主観です)
- 46. フロントエンド界隈が 複雑化しすぎ問題 How it feels to learn JavaScript in 2016 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
- 53. アプリケーションのタイプ
- 64. 要するに… -以下のようなデータをインタラクティブな可視化とし て表現し、ユーザーの選択などに基づいて複数のビュー を連動し変化させる - 階層構造 - グラフ（ネットワーク） - 各種プロパティ（テーブルデータ）
- 67. 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 可視化に必要な要素を コンポーネントのツリーとして
- 69. 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 データモデルは一つの大きなツリーとして
- 70. 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 そしてその可視化アプリケーション実現 に必要なバックエンドをシンプルに作る
- 71. ポイント -クライアントサイドの全てを木で考えるのは、可視化アプ リケーションには比較的相性が良い - データと可視化コンポーネントの描画への対応が明瞭 - ブランチごとに機能が分かれるので、どこを再利用可能 にするかを決めやすい - 機能追加 ＝ データ/コンポーネント木へのブランチ（枝）追加
- 73. 実装するための 技術選択
- 74. React + D3.js v4
- 75. それぞれの特徴
- 76. React
- 78. D3.js v4
- 79. -可視化に関する様々な計算を行う事実上の標準ライブラリ -v4になり後方互換性を捨てた大規模なアップデートを行う - モジュール化 - 元々D3は可視化に限らない様々な機能の集合体だった - レイアウト、CSV読み込み、カラーコーディング生成 D3.js v4
- 80. v4のモジュール群
- 81. 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
- 82. 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
- 83. 例: D3 stratify moduleをレイア ウトエンジンとしてサーバー サイドで使う
- 85. なぜ組み合わせるのか？
- 89. Data Mapping render() Low-level rendering Transform 各ライブラリの役割分担
- 90. パターン1: 描画をReactに任せる -React-centricな書き方 - 可視化モジュールをツリー形式の構造に分割 - 例：グラフデータ - ノード、エッジをベースコンポーネントとして、 その集合としてのグラグコンポーネントを定義 -もっとも標準的なReactコンポーネントの書き方のパターン
- 93. 最もシンプルなコンポーネントの例 const Ellipse = props => ( <ellipse rx={props.w} ry={props.h} style={props.style} /> )
- 94. 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} />) } } }
- 95. 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> ) } }
- 96. D3はどこに…？
- 97. 脇役に徹する import * as d3Interpolate from 'd3-interpolate' const colorMapper = d3Interpolate.interpolateHcl('white', ‘orange') const fillColor = colorMapper(this.props.datapoint) 数値に対応したカラーコーディングの生成
- 99. 脇役に徹する 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)) } ズームレベルの計算
- 100. 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) } レイアウトの生成
- 103. render() { return ( <svg width={width} height={height}> <g ref='graph' /> </svg> ) } パターン２で作成した場合のrender()メソッド
- 104. componentDidMount() { this.d3Graph = d3.select(ReactDOM.findDOMNode(this.refs.graph)) // ここからはいつものD3のコード(略) },
- 105. どちらのパターン がベターなのか？
- 107. Tips
- 108. スクラッチからの作成を避ける -目的の達成に、本当にD3でのカスタムコンポーネントが必 要か? -既存のライブラリの組み合わせやラッピングの検討 - render()メソッド内では起点となるタグのみを描画 - ライフサイクルメソッドでアップデートを管理 - （これが結構辛い場合もある…）
- 109. 全てをフロントエンド でやろうとしない -必要に応じてバックエンドで処理 するように書く -PythonやRの方が得意そうな処理 だと思えば、薄いラッパーを書い てREST API、もしくはRPCとして 呼び出す -その場合には極力シンプルに、で きればstatelessに Docker as Portable Data Visualization Backend
- 110. まとめ
- 112. 触れられなかったこと -データ管理部分の実装 - Flux / Redux - アプリケーションの規模によるところが大きい -SVG以外の描画 -Webpackなどのビルドツールを使う際のノウハウ
- 113. 参考文献 Learning React Functional Web Development with React and Redux By Alex Banks, Eve Porcello Publisher: O'Reilly Media Release Date: May 2017 現時点(7/2017)でもっとも「標準的な」テクノロジーの組 み合わせで書いてある良書