Using Ext JS Components to Turn Big Data into Actionable Intelligence

Transcript

2. Using Ext JS Components to Turn Big Data into Actionable Intelligence Olga Petrova Sales Engineer @ Sencha
3. Agenda • Common problems and pitfalls • Ext JS solution • Benefits • Sample BI application
4. “Without data you’re just another person with an opinion.” W. Edwards Deming
5. Data Science is a Top Trend
6. Best Job in USA
7. Huge Demand for Data Scientists
8. Huge Demand for Data Science Courses
9. Huge Demand for Data Science Applications
10. UI Disadvantages of Popular Solutions • Performance problems by visualization of huge datasets • Pure user interactions • Difficult customization • Difficult integration with current applications
11. 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
12. Sample Application
13. Use Case Data American Community Survey 2013 www.census.gov/programs-surveys/acs
14. 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.
15. “Where should I live?” Main Question:
16. “Purchasing Power” Concept Purchasing power is the number of goods or services that can be purchased with a unit of currency. http://www.bea.gov/newsreleases/regional/rpp/rpp_newsrelease.htm
17. Application Functionality • Display of original data sources • Display of data analysis results: highlight hidden trends and insides • Data visualization
18. Data Sources
19. Data Sources Problem How to show a grid with more than 1 Million rows?
20. 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
21. 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
22. Data Sources: Houses Grid
23. Data Sources Benefits • Extreme performance • Real-time Big Data • Filtering and sorting are supported
24. Data Analysis / BI
25. Data Analysis / BI Problem How to aggregate data to highlight hidden trends and insides?
26. Data Analysis / BI Possible solutions • Third-party solution: problems with integration, pure interactivity • Self-made solution: manual data aggregation and visualization with tables or lists
27. Data Analysis / BI Ext JS Solution Sencha Pivot Grid: aggregate data per several dimensions and highlight hidden trends and insides
28. “Purchasing Power” Pivot Grid
29. Data Analysis / BI Benefits • Out-of-box solution for displaying BI • Easy highlighting of hidden trends and insides • Custom data aggregation • Local and remote calculations
30. Data Visualization
31. Data Visualization Problem How to create a custom high-performance visualization with rich user interactions?
32. Data Visualization Possible solutions • Develop a custom chart component manually: take time • Use third-party solution: integration problems
33. Data Visualization Ext JS Solution • D3.js adapter • Sencha Charts
34. Data Visualization: Out-of-box Visualization
35. Data Visualization: Custom Visualization
36. Data Visualization: Custom Visualization
37. Data Visualization Benefits • 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
38. Used Ext JS Components • Ext JS Buffered Grid • Ext Speeder back-end • Ext JS Pivot Grid • D3.js Adapter
39. GitHub https://github.com/olga-petrova/DataAnalysisApplication
40. Conclusion Ext JS offers a robust and flexible UI for enterprise data analysis applications, visualize big datasets in grids and charts with high performance