Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

https://techplay.jp/event/626591

Keiichiro Ono

July 08, 2017
Tweet

More Decks by Keiichiro Ono

Other Decks in Programming

Transcript

  1. Keiichiro Ono UC, San Diego Dept. of Medicine Bioinformatics software

    engineer National Resource for Network Biology 
 The Cytoscape Consortium
  2. Keiichiro Ono UC, San Diego Dept. of Medicine Bioinformatics software

    engineer National Resource for Network Biology 
 The Cytoscape Consortium
  3. v4

  4. Heer, Jeffrey, and Maneesh Agrawala. "Software design patterns for information

    visualization." IEEE transactions on visualization and computer graphics 12.5 (2006). ՄࢹԽಛ༗ͷ σβΠϯύλʔϯͷར༻
  5. 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 Ұͭͷఆٛ
  6. 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ͷઃܭ͕ߏ଄ Խ͞Ε͍ͯΔ -σʔλͷ؅ཧʹҰఆͷϧʔϧ Λ࣋ͭ -ςετՄೳ ʢίϯϙʔωϯτɾπϦʔͷྫʣ
  7. ϑϩϯτΤϯυք۾͕ ෳࡶԽ͗͢͠໰୊ How it feels to learn JavaScript in 2016

    https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
  8. 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 ՄࢹԽʹඞཁͳཁૉΛ ίϯϙʔωϯτͷπϦʔͱͯ͠
  9. 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 n Client 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 n NDEx 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 σʔλϞσϧ͸Ұͭͷେ͖ͳπϦʔͱͯ͠
  10. 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 ͦͯͦ͠ͷՄࢹԽΞϓϦέʔγϣϯ࣮ݱ ʹඞཁͳόοΫΤϯυΛγϯϓϧʹ࡞Δ
  11. d3-path d3-array d3-dsv d3-drag d3-format d3-dispatch d3-timer d3-quadtree d3-collection d3-time

    d3-time-format d3-transition d3-color d3-interpolate d3-ease d3-hierarchy d3-brush d3-selection d3-queue d3-random d3-voronoi d3-zoom d3-scale d3-force d3-polygon D3.js v4 d3-chord d3-request d3-geo d3-axis d3-shape D3.js v4
  12. -ΧϥʔϚοϐϯάɺඪ४త ϨΠΞ΢τͳͲՄࢹԽʹؔ ͢ΔϚοϐϯάɺϞσϦϯ ά෦෼ͷػೳ͕ॆ࣮͍ͯ͠ Δ -ൺֱతϩʔϨϕϧͳػೳ͕ ଟ͍ͷͰɺίϯϙʔωϯτ ϨϕϧͰͷॻ͖ํͷن཯͸ ࣋ͨͳ͍ -جຊతʹ͸ɺ༩͑ΒΕͨσʔ

    λ(props)Λݩʹࠩ෼Λࢦࣔ௨Γ ʹඳը͢ΔͷΈ -ίϯϙʔωϯτԽͱͷ૬ੑ͕ ͍͍ -σʔλՄࢹԽͷجຊతͳߟ͑ ํʹ΋Α͘ೃછΉ - ༩͑ΒΕͨσʔλ͔Βࢹ֮ ཁૉ΁ͷϚοϐϯάؔ਺
  13. 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} />) } } }
  14. 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> ) } }
  15. ࿬໾ʹప͢Δ import * as d3Interpolate from 'd3-interpolate' const colorMapper =

    d3Interpolate.interpolateHcl('white', ‘orange') const fillColor = colorMapper(this.props.datapoint) ਺஋ʹରԠͨ͠ΧϥʔίʔσΟϯάͷੜ੒
  16. ࿬໾ʹప͢Δ 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)) } ζʔϜϨϕϧͷܭࢉ
  17. 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) } ϨΠΞ΢τͷੜ੒
  18. render() { return ( <svg width={width} height={height}> <g ref='graph' />

    </svg> ) } ύλʔϯ̎Ͱ࡞੒ͨ͠৔߹ͷrender()ϝιου
  19. ࢀߟจݙ Learning React Functional Web Development with React and Redux

    By Alex Banks, Eve Porcello Publisher: O'Reilly Media Release Date: May 2017 ݱ࣌఺(7/2017)Ͱ΋ͬͱ΋ʮඪ४తͳʯςΫϊϩδʔͷ૊ Έ߹ΘͤͰॻ͍ͯ͋Δྑॻ