React, D3 and the dataviz ecosystem
1 like370 views
The document discusses the integration of D3.js, a data visualization library, with React, highlighting various approaches and best practices. It covers D3's capabilities in data manipulation and visualization, as well as the challenges faced when combining it with React's component-driven structure. Additionally, it provides resources and insights into libraries that facilitate this integration.
React, D3 and the dataviz ecosystem
- 1. React, D3 andReact, D3 and the dataviz ecosystemthe dataviz ecosystem
- 5. Next upNext up D3 React React + D3 Choosing an approach
- 7. What is D3.js?What is D3.js? Data-Driven Documents Low level, General Purpose Visualization Library Manipulates data based documents Open web standards (SVG, HTML, CSS and now Canvas) Allows interactions with your graphs
- 8. How does it work?How does it work? Loads data Binds data to elements Transforms those elements Transitions between states
- 10. D3 v4 UpdateD3 v4 Update More modular API improvements Breaking changes Highly adopted
- 11. D3 DATA JOINSD3 DATA JOINS
- 12. Transforms the DOM byTransforms the DOM by selecting elements andselecting elements and joining to datajoining to data
- 14. Update, EnterUpdate, Enter and Exit Patternand Exit Pattern Resources
- 15. D3 PATTERNS ANDD3 PATTERNS AND BEST PRACTICESBEST PRACTICES
- 16. Component PatternsComponent Patterns The Reusable API Object Oriented approach d3-component
- 17. D3 TestingD3 Testing D3 is hard
- 30. Dynamic Child ComponentsDynamic Child Components Unique 'key' to each child component rendered More efficient rendering Similar to D3's data joins Reconciliation - React Docs
- 31. React FiberReact Fiber Renderer and Reconciler are separated New reconciliating algorithm From batching DOM operations, now React can... Prioritize tasks Split into chunks and schedule Parallelize operations by Lin ClarkA Cartoon Intro to Fiber
- 33. CommonalitiesCommonalities Help us with the DOM Love pure functions
- 34. ChallengesChallenges D3 creates and transforms the DOM React as well, and keeps track of it Not meant to work together
- 35. REACT + D3REACT + D3 APPROACHESAPPROACHES
- 36. D3 within ReactD3 within React React renders root svg element D3 creates chart in componentDidUpdate Block chart updates with shouldComponentUpdate
- 37. D3 within ReactD3 within React PROS/CONSPROS/CONS ✓ Works fine ✓ Easiest when visualization is already implemented ✗ Not idiomatic on React ✗ A bit nasty
- 38. React Faux DOMReact Faux DOM It's a way to use existing D3 tooling but render it efficiently through React with the React ethos. D3 within React the right way
- 39. React Faux DOMReact Faux DOM PROS/CONSPROS/CONS ✓ Use all D3 APIs ✓ Good integration with already built D3 ✓ Server Side Rendering ✗/✓ Need to use React Animations ✗ Less performant ✗ Limited to small/medium size dataviz
- 40. Lifecycle Methods MappingLifecycle Methods Mapping Lightweight React Component Wrapper D3-only file with create, update and unmount methods Integrating D3.js visualizations in a React app
- 41. Lifecycle Methods MappingLifecycle Methods Mapping PROS/CONSPROS/CONS ✓ Easy to integrate D3 on ✓ Flexible, could encapsulate any chart
- 42. D3 for the Math,D3 for the Math, React for the DOMReact for the DOM D3 is used for math and formats React rules the DOM React-D3 Layouts
- 43. D3 sub-modules: Non-DOMD3 sub-modules: Non-DOM RelatedRelated Arrays (d3-array) Chords (d3-chord) Collections (d3-collection) Colors (d3-color) Dispatches (d3-dispatch) Easings (d3-ease) Forces (d3-force) Number Formats (d3-format) Hierarchies (d3-hierarchy)
- 44. D3 sub-modules: DOMD3 sub-modules: DOM RelatedRelated Selections (d3-selection) Transitions (d3-transition) Axes (d3-axis) Zooming (d3-zoom) Dragging (d3-drag) Brushes (d3-brush) Geographies (d3-geo) Shapes (d3-shape)
- 45. D3 for the Math,D3 for the Math, React for the DOMReact for the DOM PROS/CONSPROS/CONS ✓ Consistent with the React way ✗ A lot of work upfront ✗ D3 Reimplementation of certain parts ✗ Limited to SVG rendering
- 46. Reference
- 47. REACT + D3REACT + D3 LIBRARIESLIBRARIES
- 48. Research InsightsResearch Insights Non-maintained libraries Not easy to keep up with D3 and React D3 v4 cleaned up the field
- 51. VictoryJSVictoryJS Easy to get started Zoom and Voronoi React Native option
- 54. RechartsRecharts Really well tested Charts plus legend, tooltip and brush Great docs
- 57. react-visreact-vis react-motion animations Sunburst and Sankey Lack of tooltips
- 62. Well tested D3 V4 Great docs
- 63. Long term investment? Needs to be done ASAP?
- 64. Basic charts? One-off work? Highly customized?
- 65. Budget Training
- 66. ConclusionsConclusions D3 and React can work together They both move fast Hard to decide!
- 67. Thanks for listening!Thanks for listening! Twitter: Slides: Demo: @golodhros http://golodhros.github.io/react-d3 https://github.com/Golodhros/talk-react-d3
- 69. D3 ResourcesD3 Resources Mike Bostock D3 Reference d3 slack channel
- 70. Data-Joins ResourcesData-Joins Resources How Selections Work Thinking with joins General Update Pattern Selection API Reference
- 71. React-D3 ResourcesReact-D3 Resources Sam Jones - A Well Factored Pie Graph: React + D3 Adil Baaj - A starting point on using D3 with React Mike Williamson - D3 and React 3 ways Abhisek Jana - How to create reusable charts with React Collection of links/tools on how to integrate React & D3