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

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

https://techplay.jp/event/626591

Transcript

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
11. Cytoscape σεΫτοϓɾΞϓϦέʔγϣϯ͔Β࢝· Γɺࠓ͸ؔ࿈ϓϩδΣΫτͷϒϥϯυ໊ʹ
12. ීஈ΍͍ͬͯΔ͜ͱ -ੜ෺ֶ෼໺ͰͷσʔλΛ౷߹/ղੳ/ՄࢹԽ͢ΔͨΊͷιϑ τ΢ΣΞج൫੔උ -ݚڀऀ΁ͷΠϯλϏϡʔɺઃܭɺٕज़ධՁɺ࣮૷ɺςετɺ ࿦จॻ͖ɺֶձൃදɺϫʔΫγϣοϓͷߨࢣɹʢͭ·Γͳ ΜͰ΋΍Γ·͢ʣ -͜ͷ෼໺Ͱѻ͏σʔλ -Ԙج഑ྻ -λϯύΫ࣭ͷࡾ࣍ݩߏ଄ -Ҩ఻ࢠ/λϯύΫ࣭ͷωοτϫʔΫʢάϥϑʣ -Ҩ఻ࢠͷػೳΞϊςʔγϣϯ -σʔλΛఏࣔ͢Δର৅ʢΫϥΠΞϯτʣ -جૅҩֶݚڀऀ -ྟচҩɹʢ༧ఆʣ
13. ࠷ۙͷϓϩδΣΫτ঺հ
14. ࠷ۙͷϓϩδΣΫτ - ֊૚Խ͞ΕͨҨ఻ࢠ܈ΛՄࢹԽ͢Δ - ϨΨγʔͳٕज़Ͱ࣮૷͞ΕͨΞϓϦέʔγϣϯΛɺ΢Σϒ ؔ࿈ٕज़Λ࢖֦ͬͯு͢Δ - զʑͷϓϩδΣΫτͰΑ͘ར༻͢ΔՄࢹԽ/UI෦඼ͷ࠶ར༻ Մೳͳ(React)ίϯϙʔωϯτԽ
15. NDEx Client Built with Electron Electron App Java-Swing App
16. DeepCellʢԾʣ
19. ຊ೔ͷςʔϚ
20. -ϞμϯͳσʔλՄࢹԽΞϓϦέʔγϣϯ։ൃͱ͸? -ෳࡶͳσʔληοτΛՄࢹԽ͢ΔΞϓϦέʔγϣϯ ͷσβΠϯख๏ -࣮ࡍͷઃܭͱ࣮૷: React + D3Λྫʹ
21. ຊ୊ͷલʹ…
22. ձ৔Ξϯέʔτ: ҎԼͷπʔϧΛར༻ ͍ͯ͠·͔͢ʁ
23. v4
27. -ϞμϯͳσʔλՄࢹԽΞϓϦέʔγϣϯ։ൃͱ͸? -ෳࡶͳσʔληοτΛՄࢹԽ͢ΔΞϓϦέʔγϣϯ ͷσβΠϯ -࣮ࡍͷઃܭͱ࣮૷: React + D3Λྫʹ
28. ʮϞμϯͳʯՄࢹԽΞϓϦέʔγϣϯͷ࣮ࡍ
29. ʮϞμϯͳʯՄࢹԽ ΢ΣϒɾΞϓϦέʔγϣϯͱ͸ʁ
30. ࢖༻ٕज़తʹϞμϯͰ͸ͳ͍ ՄࢹԽΞϓϦέʔγϣϯͷྫ
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ͷઃܭ͕ߏ଄ Խ͞Ε͍ͯΔ -σʔλͷ؅ཧʹҰఆͷϧʔϧ Λ࣋ͭ -ςετՄೳ ʢίϯϙʔωϯτɾπϦʔͷྫʣ
36. ಛఆͷςΫϊϩδʔ Λ࢖͏͜ͱ͸ඞͣ͠ ΋ʮϞμϯʯͰ͋Δ ͨΊʹඞਢͰ͸ͳ͍
37. ϞμϯͰ͋Δ͜ͱ ʹΞϓϦέʔγϣϯͷߏ଄σβΠϯ ʴ࢖༻͢ΔςΫϊϩδʔ
38. ͦ͏͸ݴͬͨ΋ͷͷ… ϚδϣϦςΟ͔Β֎ΕΔͱҰؾʹ༨ܭ ͳ࿑ྗ͕૿͑·͢ͷͰɺͰ͖Δ͚ͩϝ ΠϯετϦʔϜͱݺ΂Δ৘ใྔͷଟ͍ πʔϧ܈Λ࢖͏ͷ͕ݱ࣮తͰ͢
39. ࣮૷ͷͨΊͷ πʔϧ܈
40. ݱ࣌఺Ͱͷ࠷దղ -ݴޠ: ES2015 Ҏ߱ -ύοέʔδϚωʔδϟ: npm -Ϗϧυπʔϧ: Webpack 3 -ίϯϙʔωϯτԽ: React -ՄࢹԽ: - D3 - ޷ΈͷϨϯμϦϯάٕज़ (SVG/Canvas/WebGL)
41. ͜ͷ૊Έ߹ΘͤͰͰ͖Δ͜ͱ -ʮී௨ͷ։ൃʯ - τϥϯεύΠϧɺϛχϑΝΠɺςετͳͲͷࣗಈԽ - ϞδϡʔϧԽͱͦΕʹ൐͏࠶ར༻ੑͷ޲্ - npmίϚϯυͰͷΠϯετʔϧ - ίϯϙʔωϯτϕʔεͰͷՄࢹԽػೳઃܭ
42. WebComponents͸?
43. WebComponents -ະདྷʹ͸ීٴ͍ͯ͠Δ͔΋͠Εͳ͍ - GoogleͳͲͷڧྗͳޙԡ͠ -“Perfect World”Λ໨ࢦ͗͢͠ʁ -ಈ޲͸௥͏Ձ஋͋Γ
44. ֤։ൃπʔϧͷධՁ (ओ؍Ͱ͢)
45. ஌ࣝͷඞཁ౓ ඞਢ ඞཁʢ΋͘͠͸ྨࣅͷπʔϧʣ ES5ʹͩ͜ΘΔඞཁ͕ͳ͚Ε͹ඞਢ
46. ϑϩϯτΤϯυք۾͕ ෳࡶԽ͗͢͠໰୊ How it feels to learn JavaScript in 2016 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
47. ͔͠͠ຊ౰ʹͦ͜·Ͱ ෳࡶͩΖ͏͔ʁ ґଘ؅ཧ ϏϧυͱλεΫ࣮ߦ ޓ׵ੑͷͨΊͷม׵ʢτϥϯεύΠϧʣ
48. ࣮૷͸ҠΓมΘͬͯ΋ɺجຊ తͳπʔϧͷ΍͍ͬͯΔ͜ͱ ͸ͦΕ΄ͲมΘ͍ͬͯͳ͍
49. ϞμϯͰ͋Δ͜ͱ ʹΞϓϦέʔγϣϯͷߏ଄σβΠϯ ʴ࢖༻͢ΔςΫϊϩδʔ Recap
50. ϞμϯͰ͋Δ͜ͱ ʹΞϓϦέʔγϣϯͷߏ଄σβΠϯ ʴ࢖༻͢ΔςΫϊϩδʔ Recap
51. -ϞμϯͳσʔλՄࢹԽΞϓϦέʔγϣϯ։ൃͱ͸? -ෳࡶͳσʔληοτΛՄࢹԽ͢ΔΞϓϦέʔγϣϯ ͷσβΠϯ -࣮ࡍͷઃܭͱ࣮૷: React + D3Λྫʹ
52. ՄࢹԽΞϓϦέʔγϣϯΛ σβΠϯ͢Δ
53. ΞϓϦέʔγϣϯͷλΠϓ
54. γϯϓϧͳ νϟʔτ Ұͭͷը໘ʹɺҰͭɺ΋ ͘͠͸ෳ਺ͷಠཱͨ͠σʔ λΛՄࢹԽ͢Δ Examples from: http://www.reactd3.org/docs/basic/
55. Examples from: http://www.reactd3.org/docs/basic/ Data 1 Data 2
56. 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
57. -ෳ਺ͷσʔληοτΛෳ਺ͷख๏ͰՄࢹԽ -ՄࢹԽίϯϙʔωϯτ͸ΠϕϯτͰ࿈݁͞Ε͍ͯΔ -ػೳ͸σεΫτοϓɾΞϓϦέʔγϣϯʹ४ͣΔ Data Dashboard
58. ϥΠϒϥϦ ൚༻ੑΛߴΊͯଞऀ͕࠶ར ༻Ͱ͖ΔΑ͏ʹઃܭ͞Εͨ ՄࢹԽίϯϙʔωϯτ Data Visualization Component CSS 3rd party lib JS
59. λΠϓʹ߹ΘͤͯσβΠϯΛ࢖͍෼͚Δ -γϯϓϧͳνϟʔτΛ࡞ΔͷʹɺReactͳͲͷσβΠϯํ๏ʹҰఆ ͷറΓΛ͔͚ΔϑϨʔϜϫʔΫΛ࢖͏ͷ͕ຊ౰ʹඞཁ͔ʁ - ߋʹݴ͑͹ɺD3ͳͲΛ࢖ͬͯॻ͘ඞཁ͸ຊ౰ʹ͋Δͷ͔ʁ -ٯʹɺෳࡶͳσʔλΛ࣋ͭμογϡϘʔυΛ࡞ΔͷʹɺҰຕͷ HTMLʹJSΛϕλॻ͖͢ΔΑ͏ͳํ๏ͰϝϯςφϯεੑͳͲΛ֬ อͰ͖Δ͔ʁ -ϑϨʔϜϫʔΫ͔Β࡞ΓํΛબͿΑΓ΋ɺσʔλͱݟͤํ͔Βϑ ϨʔϜϫʔΫΛબͿ
60. ࣗ෼ͳΓͷελΠϧΛߟ͑Δ -γϯϓϧͳՄࢹԽΞϓϦέʔγϣϯͰ͋ͬͯ΋ɺࣗ෼͕೺ ѲͰ͖͍ͯΔϘΠϥʔϓϨʔτ͔Β࢝ΊΕ͹ɺ֤छϑϨʔ ϜϫʔΫΛ࢖͏ཧ༝ʹ͸ͳΓಘΔ - ׬શʹϒϥοΫϘοΫεͱͯ͠ଞਓͷϘΠϥʔϓϨʔτ Λ࢖͏৔߹͸ɺϝϯςφϯε΍֦ு࣌ʹࠔ೉Λ൐͏ -ଞਓ(΋͘͠͸਺ϲ݄ޙͷࣗ෼͕)ݟͯཧղͰ͖ΔΑ͏ͳߏ଄ Λߟ͑Δ
61. ࣮ࡍͷσβΠϯྫ μογϡϘʔυͷશͯΛπϦʔͰߏ੒͢Δ
62. έʔεελσΟ: σεΫτοϓ୅ସͷ σʔλՄࢹԽμογϡϘʔυ࡞੒
63. σʔληοτ -֤छ࣮ݧ͔ΒಘΒΕͨେن໛ͳҨ఻ࢠωοτϫʔΫ -౷ܭղੳΛߦ͍ੜ੒ͨ͠ʮΦϯτϩδʔʯ - DAGͱ؆ུԽ͞ΕͨπϦʔ -ެڞσʔλϕʔεʹొ࿥͞ΕͨҨ఻ࢠΞϊςʔγϣϯ
64. ཁ͢Δʹ… -ҎԼͷΑ͏ͳσʔλΛΠϯλϥΫςΟϒͳՄࢹԽͱ͠ ͯදݱ͠ɺϢʔβʔͷબ୒ͳͲʹج͍ͮͯෳ਺ͷϏϡʔ Λ࿈ಈ͠มԽͤ͞Δ - ֊૚ߏ଄ - άϥϑʢωοτϫʔΫʣ - ֤छϓϩύςΟʢςʔϒϧσʔλʣ
66. μογϡϘʔυͷը໘͔Βඞ ཁͱͳΔίϯϙʔωϯτ܈Λ πϦʔͱͯ͠ॻ͖ग़͢
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 ՄࢹԽʹඞཁͳཁૉΛ ίϯϙʔωϯτͷπϦʔͱͯ͠
68. ͦͷίϯϙʔωϯτΛ࡞Δ ͷʹඞཁͳσʔλϞσϧΛ ߟ͑Δ
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 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 σʔλϞσϧ͸Ұͭͷେ͖ͳπϦʔͱͯ͠
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. ϙΠϯτ -ΫϥΠΞϯταΠυͷશͯΛ໦Ͱߟ͑Δͷ͸ɺՄࢹԽΞϓ Ϧέʔγϣϯʹ͸ൺֱత૬ੑ͕ྑ͍ - σʔλͱՄࢹԽίϯϙʔωϯτͷඳը΁ͷରԠ͕໌ྎ - ϒϥϯν͝ͱʹػೳ͕෼͔ΕΔͷͰɺͲ͜Λ࠶ར༻Մೳ ʹ͢Δ͔ΛܾΊ΍͍͢ - ػೳ௥Ճɹ
 ʹɹσʔλ/ίϯϙʔωϯτ໦΁ͷϒϥϯνʢࢬʣ௥Ճ
72. -ϞμϯͳσʔλՄࢹԽΞϓϦέʔγϣϯ։ൃͱ͸? -ෳࡶͳσʔληοτΛՄࢹԽ͢ΔΞϓϦέʔγϣϯ ͷσβΠϯ -࣮ࡍͷઃܭͱ࣮૷: React + D3Λྫʹ
73. ࣮૷͢ΔͨΊͷ ٕज़બ୒
74. React + D3.js v4
75. ͦΕͧΕͷಛ௃
76. React
77. -ViewͷΈʹಛԽͨ͠ൺֱతখ͞ͳϑϨʔϜϫʔΫ -ίϯϙʔωϯτԽΛڧ͘ҙࣝͨ͠ઃܭ - ReactϕʔεͷΞϓϦέʔγϣϯɹʹ
 ίϯϙʔωϯτͷू߹ React
78. D3.js v4
79. -ՄࢹԽʹؔ͢Δ༷ʑͳܭࢉΛߦ͏ࣄ্࣮ͷඪ४ϥΠϒϥϦ -v4ʹͳΓޙํޓ׵ੑΛࣺͯͨେن໛ͳΞοϓσʔτΛߦ͏ - ϞδϡʔϧԽ - ݩʑD3͸ՄࢹԽʹݶΒͳ͍༷ʑͳػೳͷू߹ମͩͬͨ - ϨΠΞ΢τɺCSVಡΈࠐΈɺΧϥʔίʔσΟϯάੜ੒ D3.js v4
80. v4ͷϞδϡʔϧ܈
81. 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
82. d3-drag d3-dispatch d3-timer d3-transition d3-color d3-interpolate d3-ease d3-hierarchy d3-brush d3-selection d3-queue d3-random d3-voronoi d3-zoom d3-polyg
83. ྫ: D3 stratify moduleΛϨΠΞ ΢τΤϯδϯͱͯ͠αʔόʔ αΠυͰ࢖͏
85. ͳͥ૊Έ߹ΘͤΔͷ͔ʁ
86. -ΧϥʔϚοϐϯάɺඪ४త ϨΠΞ΢τͳͲՄࢹԽʹؔ ͢ΔϚοϐϯάɺϞσϦϯ ά෦෼ͷػೳ͕ॆ࣮͍ͯ͠ Δ -ൺֱతϩʔϨϕϧͳػೳ͕ ଟ͍ͷͰɺίϯϙʔωϯτ ϨϕϧͰͷॻ͖ํͷن཯͸ ࣋ͨͳ͍ -جຊతʹ͸ɺ༩͑ΒΕͨσʔ λ(props)Λݩʹࠩ෼Λࢦࣔ௨Γ ʹඳը͢ΔͷΈ -ίϯϙʔωϯτԽͱͷ૬ੑ͕ ͍͍ -σʔλՄࢹԽͷجຊతͳߟ͑ ํʹ΋Α͘ೃછΉ - ༩͑ΒΕͨσʔλ͔Βࢹ֮ ཁૉ΁ͷϚοϐϯάؔ਺
87. ֤ϥΠϒϥϦͷ໾ׂ෼୲ -جຊతʹ͸ReactʹԾ૝DOMͷ؅ཧΛ೚ͤΔ -ίϯϙʔωϯτͷπϦʔͱͯ͠ՄࢹԽΛදݱ͢Δ -D3Λ਺ֶ༻ϥΠϒϥϦͱͯ͠࢖͍ɺՄࢹԽؔ࿈ʹ ඞཁͳܭࢉͷΈʹప͢Δ - ΧϥʔίʔσΟϯάɺϨΠΞ΢τɺεέʔϦ ϯάͳͲ
88. ΞϓϦέʔγϣϯ σβΠϯͷύλʔϯ
89. Data Mapping render() Low-level rendering Transform ֤ϥΠϒϥϦͷ໾ׂ෼୲
90. ύλʔϯ1: ඳըΛReactʹ೚ͤΔ -React-centricͳॻ͖ํ - ՄࢹԽϞδϡʔϧΛπϦʔܗࣜͷߏ଄ʹ෼ׂ - ྫɿάϥϑσʔλ - ϊʔυɺΤοδΛϕʔείϯϙʔωϯτͱͯ͠ɺ ͦͷू߹ͱͯ͠ͷάϥάίϯϙʔωϯτΛఆٛ -΋ͬͱ΋ඪ४తͳReactίϯϙʔωϯτͷॻ͖ํͷύλʔϯ
92. Shape Ellipse Node Neuron Rectangle ίϯϙʔωϯτͷؔ܎
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) } ϨΠΞ΢τͷੜ੒
102. ύλʔϯ2: ΄ͱΜͲͷඳըΛD3Ͱߦ͏ -D3ͷྲّྀͰ΄ͱΜͲͷඳըΛߦ͏ -Reactͷrender()಺Ͱ͸λʔήοτͱͳΔλάΛඳը͢ΔͷΈ
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. ͲͪΒͷύλʔϯ ͕ϕλʔͳͷ͔ʁ
106. ౴ɿঢ়گʹΑΔ -࣮૷ऀͷٕྔɺΞϓϦέʔγϣϯͷن໛ɺσʔλͷେ͖͞ ͳͲʹΑͬͯ౴͑͸ҟͳΔ -ΑΓReact෩ͳΞϓϦέʔγϣϯΛ໨ࢦ͢ͳΒύλʔϯ̍ Λɺബ͍ϥούʔͱͯ͠࢖͍͍͚ͨͩͳΒύλʔϯ̎Λ
107. Tips
108. εΫϥον͔Βͷ࡞੒Λආ͚Δ -໨తͷୡ੒ʹɺຊ౰ʹD3ͰͷΧελϜίϯϙʔωϯτ͕ඞ ཁ͔? -طଘͷϥΠϒϥϦͷ૊Έ߹Θͤ΍ϥοϐϯάͷݕ౼ - render()ϝιου಺Ͱ͸ى఺ͱͳΔλάͷΈΛඳը - ϥΠϑαΠΫϧϝιουͰΞοϓσʔτΛ؅ཧ - ʢ͜Ε͕݁ߏਏ͍৔߹΋͋Δ…ʣ
109. શͯΛϑϩϯτΤϯυ Ͱ΍Ζ͏ͱ͠ͳ͍ -ඞཁʹԠͯ͡όοΫΤϯυͰॲཧ ͢ΔΑ͏ʹॻ͘ -Python΍Rͷํ͕ಘҙͦ͏ͳॲཧ ͩͱࢥ͑͹ɺബ͍ϥούʔΛॻ͍ ͯREST APIɺ΋͘͠͸RPCͱͯ͠ ݺͼग़͢ -ͦͷ৔߹ʹ͸ۃྗγϯϓϧʹɺͰ ͖Ε͹statelessʹ Docker as Portable Data Visualization Backend
110. ·ͱΊ
111. ·ͱΊ -Ϟμϯͱݺ΂ΔՄࢹԽΞϓϦέʔγϣϯ͸ϝϯςφϯεՄ ೳͳߏ଄Λ࣋ͭ -ಛఆͷςΫϊϩδʔʹറΒΕ͗͢ͳ͍ - ͋Δఔ౓ͷมԽ͸ड͚ೖΕΔ -ݱঢ়Ͱ͸React+D3ͷ૊Έ߹Θͤ͸ߏ଄Խ͞ΕͨՄࢹԽΞϓ ϦέʔγϣϯΛ࡞Δ৔߹ʹศརͳબ୒ࢶͰ͋Δ
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)Ͱ΋ͬͱ΋ʮඪ४తͳʯςΫϊϩδʔͷ૊ Έ߹ΘͤͰॻ͍ͯ͋Δྑॻ
114. 2017 Keiichiro Ono kono@ucsd.edu