React with D3: DOM Manipulation Orchestration
- 1. 1 React with D3: DOM Manipulation Orchestration Elden S. Park Nov 2018
- 2. Index • What is SVG and why does it matter • Why D3 • Challenges in dealing with two DOM controlling libraries • Ways to make React and D3 interoperate • Data passing inbound/outbound • Synthetic Events • Spy method to capture child data • Birth of Dechart.js • Retrospective 2
- 3. SVG 3
- 4. SVG, Scalable Vector Graphics SVG XML-based vector image format for two-dimensional graphics Supported by most web browsers 4
- 5. SVG, Scalable Vector Graphics SVG (2) https://picsvg.com/example/bike-1.svg 5 One of the most popular tools to create visual objects in web with its declarative nature
- 6. Comparisons with Other Drawing APIs SVG (3) • Drawn as element in DOM just like plain HTML • Easy to manipulate, event handlers can be attached • Slower than WebGL-based Canvas • Vector graphics. Scalable regardless of resolution, unlike Canvas (raster-based) 6
- 7. Chart Libraries (with or without SVG) SVG (4) 7 Chart.js Canvas, Easy-to-use, Hard to extend C3.js SVG, D3 Wrapper, Abstracted Recharts.js SVG, D3-React binding, Exclusive with React D3.js SVG, DOM low level manipulation, Big community ...and more
- 8. D3 8
- 9. A Brief Introduction to D3.js D3.js • Data-DOM Binder (not a chart library) • Features include, though not limited to, • Selection • Functional Property Bindings • Transition (animation) • Various use cases: Chart, Map, Diagrams 9
- 10. Examples of D3 Objects D3.js (2) 10 Of Multiple Sources Provided in, https://github.com/d3/d3/wiki/gallery
- 11. When Should You Consider Using D3? D3.js (3) • Visualizing data with specific features (e.g. business-related) • Creating charts not depending on specific 3rd party framework (React, Angular, etc) • Need an abundance of samples and QA’s • You are already familiar with DOM 11
- 13. Challenges in Using Both D3 and React D3-React 13 • React handles DOM with its internal Virtual DOM representation. D3, which also manipulates DOM, conflicts with React • Performance degrades if a great number of SVG elements are rendered in React’s DOM tree
- 15. `React in Full Control` Way D3-React Ways to Interoperate 15
- 16. `React in Full Control` Way D3-React Ways to Interoperate (2) 16
- 17. `React in Full Control` Way D3-React Ways to Interoperate (3) 17 React (DOM) svg path ... D3 (Math) Path Calculation Data Event Handlers
- 18. `React, D3 Governing Each Region` Way D3-React Ways to Interoperate (4) 18
- 19. `React, D3 Governing Each Region` Way D3-React Ways to Interoperate (5) 19 React (DOM) div path ... D3 (Math + DOM) Event Handlers svgAction Triggers
- 20. Two Ways to Interoperate D3 and React D3-React Ways to Interoperate (6) 20 React Full Control React, D3 governing each region - One-way (natural*) Data Flow - Complicated (two control towers) - Maybe worse Performance - Usual - D3, React linked tight (hard to reuse w/o React) Independence - D3 remains agnostic of externals
- 21. Which Way to Choose, Why? D3-React Ways to Interoperate (7) 21 `React, D3 Governing Each Region` can be more appealing especially because, • It allows to keep the pure D3 code. => It is hard to debug the combined logic of D3 and React. => D3 code can be used easy without React.
- 23. D3 Object Encapsulation D3 Abstraction 23
- 24. D3 Object Encapsulation D3 Abstraction (2) 24
- 25. D3 Object Encapsulation D3 Abstraction (3) 25 D3 abstraction, hereafter is to be called `D3chart`
- 29. React May Pass Data Such as Functions React to D3, Inward Data Traffic 29 Callbacks, for example, to listen to events in D3 (e: Event) => { /*...behavior...*/ } + We can also make use of D3’s own event handling utilities
- 30. React May Pass Data Such as Functions React to D3, Inward Data Traffic (2) 30
- 31. React May Pass Data Such as Functions React to D3, Inward Data Traffic (3) 31
- 33. `handle-()` Methods and Corresponding Calls React to D3, Inward Data Traffic (4) 33 Various event handlers (of N types) are passed in to D3chart. This leads D3 to call dedicated handlers for different actions. f1 (e1: Event) => void f2 (e2: Event) => void fn ... When condition1: f1() condition2: f2() ...
- 35. Generating Custom Events React to D3, Inward Data Traffic 35 D3chart generates events, which React Components subscribe to listen to. Event handlers (call + definition) reside outside of D3chart. *Synthetic Event in this context refers to custom object D3chart defines, nothing to do with React’s own Synthetic Event.
- 36. Generating Custom Events React to D3, Inward Data Traffic (2) 36
- 37. Generating Custom Events React to D3, Inward Data Traffic (3) 37
- 39. React’s Response to Synthetic Events React to D3, Inward Data Traffic (4) 39
- 41. React’s Response to Synthetic Events React to D3, Inward Data Traffic (5) 41
- 42. React’s Response to Synthetic Events React to D3, Inward Data Traffic (6) 42
- 43. React’s Response to Synthetic Events React to D3, Inward Data Traffic (7) 43 The beauty of generating Synthetic Events is its keeping D3 logic free of any literals passed from external libraries
- 44. Inbound Traffic of Data React to D3, Inward Data Traffic (8) 44 { Data, (Event Handlers) } flow into D3 object from React Components. React (DOM) div path ... D3 (Math + DOM) Event Handlers svgData Synthetic Event
- 46. blackbox D3 Listening to Events in React D3, Outward Data Traffic 46 How can D3 listen to events on React’s Components when React does not even know it has a child? div div svg path click
- 47. Exposing Action Trigger D3, Outward Data Traffic (2) 47
- 48. Spy Method to Capture Child Data D3, Outward Data Traffic (3) 48
- 49. Spy Method to Capture Child Data D3, Outward Data Traffic (4) 49
- 51. Pseudo Two-Way Data Binding D3-React Binding 51 div div svg path dispatch() dispatch() Event Handlers Data Synthetic Event click
- 53. Creating a Library of Our Own Dechart.js 53 Reusable abstraction (D3chart) became a library. - Configurable - Built-in chart type (Line, Bar, etc) - External-lib free D3 wrapper Dechart.js https://github.com/dechartjs/dechart Dechart-react.js https://github.com/dechartjs/dechart-react *Migration (mirroring) to Github in progress (Nov 18’)
- 55. Modularized Render Functions Dechart.js (2) 55 Chart is composed of several elements so can be render functions. It is easier when D3 cares nothing about other view logic (e.g. React)
- 56. Pure JavaScript Style Injection Dechart.js (3) 56 We are minimizing the impact of third-party factors, style is no exception.
- 58. Wrapping Up Retrospective 58 • Both React and D3 controls DOM, but they can operate together • If possible, define D3 and React separated • Unidirectional Data Flow is not powerful enough for all situations • Static typing needs to be considered building an app (lib) of scale
- 60. Thank you End of Slide 60 Gamsahabnida Elden S. Park eldeni.github.io