Turbo-charged Data Analysis and Visualization using Ext JS 6.2

The presentation shows how to visualize and analyze large datasets using Ext JS Grid, Pivot Grid, Charts, and D3 adapter.

Transcript

2. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Turbo-charged Data Analysis and Visualization using Ext JS 6.2 Olga Petrova Sales Engineer
3. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • “Without data you’re just another person with an opinion.” W. Edwards Deming
4. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data Science is a top trend
5. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Best job in USA 5
6. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Huge demand for Data Scientists 6
7. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Huge amount for Data Science courses 7
8. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • UI disadvantages of popular solutions • Performance problems by visualization of huge datasets • Pure user interactions • Difficult customization • Difficult integration with current applications 8
9. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Advantages of Ext JS UI • Robust out-of-box components for visualization of data analysis results • Optimized for huge datasets, extreme performance • Easy customization and integration with current applications 9
10. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Sample application
11. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Use case data American Community Survey 2013 www.census.gov/programs-surveys/acs 11
12. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Use case data • 2.276.839 people and 1.476.313 houses • People: state, sex, incomes, education, industry, occupation, working hours, etc. • Houses: state, type of house, property value, total household’s income, rent, owner costs, etc. 12
13. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Main question: “Where should I live?”
14. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • “Income after housing” concept [Income after housing] = [Total income] - [Expenses for a house]
15. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Application functionality • Display of original data sources • Display of data analysis results: highlight hidden trends and insides • Data visualization 15
16. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data sources Problem How to show a grid with more than 1 Million rows? 16
17. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data sources Possible solutions • Load dataset in a browser: at least 6 Million DOM elements (for 5 columns) • Use pagination: 1000 pages if page size is 1000 17
18. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data sources Ext JS Solution • Ext JS Grid with buffered rendering: only part of the dataset is rendered at a time • Ext Speeder backend: server-side smart cache 18
19. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data Sources: Houses Grid 19
20. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data sources Result • Extreme performance • Real-time Big Data • Filtering and sorting are supported 20
21. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data analysis Problem How to aggregate data to highlight hidden trends and insides? 21
22. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data analysis Possible solutions • Third-party solution: problems with integration, pure interactivity • Self-made solution: manual data aggregation and visualization with tables or lists 22
23. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Ext JS Solution Sencha Pivot Grid: aggregate data per several dimensions and highlight hidden trends and insides 23 Data analysis
24. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • “Income after housing” Pivot Grid 24
25. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data analysis Result • Out-of-box solution for display of data analysis results • Easy highlighting of hidden trends and insides • Custom data aggregation • Local and remote calculations 25
26. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data Visualization Problem How to create a custom high-performance visualization with rich user interactions? 26
27. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data Visualization Possible solutions • Develop a custom chart component manually: take time • Use third-party solution: integration problems 27
28. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data Visualization Ext JS Solution • D3.js adapter • Sencha Charts 28
29. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data Visualization: out-of-box visualization 29
30. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data Visualization: custom visualization 30
31. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data Visualization: custom visualization 31
32. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data Visualization Result • Any kind of custom visualization: huge examples gallery • Canvas and SVG engine support • Rich user interactions • Easy data binding to Ext JS store • Integration into Ext JS layouting system 32
33. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Used Ext JS components • Ext JS Buffered Grid • Ext Speeder back-end • Ext JS Pivot Grid • D3.js Adapter
34. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Conclusion Ext JS offers a robust and flexible UI for enterprise data analysis applications, visualize big datasets in grids and charts with high performance 34
35. ©  2016  Sencha  Inc.  • CONFIDENTIAL  • Thank you! Questions?