Data Visualization in React

A short presentation showing the different aspects of data visualization in React by answering the simple 5 W's and How question.

Transcript

1. Data Visualization in React.
2. Who is using it? Live public products, inhouse tools, blog post, prototypes!
4. Serving the needs of many? Types of Visualizations
5. General Characteristics ◉ High level Abstractions ◉ Limited Flexibility. ◉ Limited Data Munge Function. ◉ Easy and Ready to use Viz options
6. Plug and Play options - Line, Bar, Pie Charts - Heatmaps - Choropleth - Sunburst - Scatter, Bubble Charts - TreeMaps - Sankey
7. Why, visualization in React ? Compelling reasons to consider?
8. Reasons why visualization in React can be a good thing. ◉ VirtualDOM, Performance ◉ Rich Developer Experience ◦ Reusability, Composability, Integration, Hot Reloading, ...
9. Apples and Oranges? React vs D3
10. - Visual appeal of D3 viz - Interactivity, Animation, Design, Colors etc - Scope and variety - Documentation and examples (Mike Bostock’s blocks) - Data related functions. Where D3 wins
11. - Better Developer Experience - Scaling is easy. 1K+ lines of code is difficult to manage in D3 - Fast Development - Easy Learning curve Where React wins
12. Match made in heaven? React with D3
13. Difficulties in Integration ◉ Different Philosophies for Data Updation & DOM Handling ◉ Approaches and perspective to develop are different. ◦ React - View oriented ◦ D3 - Data oriented ◉ Javascript is tricky!
14. Best of Both Worlds - Components + d3 functions The way out!
15. Libraries and Reusable Components ◉ reacharts - 6,376 ◉ react-vis - 1,641 ◉ victory - 4,770
16. Perfect Use cases anyone? When and where to use it?
17. Best Suited for - Dashboard style Apps with basic charts. Tight deadlines, Amateur visualization skills, fast pace development turn in favour of React.
19. “ Data Visualization in React is still in an early stage. D3 and React aren't still a perfect match, yet. Parent Javascript is a tricky creature. People are talking about it with their opinions and theories. But in the end everyone is trying for a happy ending!
20. ◉ akshay2905.github.io ◉ @imakshayverma, @OpenBudgetsIn Fin.