The presentation shows how to visualize and analyze large datasets using Ext JS Grid, Pivot Grid, Charts, and D3 adapter.
View Slide
© 2016 Sencha Inc. • CONFIDENTIAL •Turbo-charged Data Analysisand Visualization using Ext JS 6.2Olga PetrovaSales Engineer
© 2016 Sencha Inc. • CONFIDENTIAL •“Without data you’re justanother person with an opinion.”W. Edwards Deming
© 2016 Sencha Inc. • CONFIDENTIAL •Data Science is a top trend
© 2016 Sencha Inc. • CONFIDENTIAL •Best job in USA5
© 2016 Sencha Inc. • CONFIDENTIAL •Huge demand for Data Scientists6
© 2016 Sencha Inc. • CONFIDENTIAL •Huge amount for Data Science courses7
© 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 applications8
© 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 applications9
© 2016 Sencha Inc. • CONFIDENTIAL •Sample application
© 2016 Sencha Inc. • CONFIDENTIAL •Use case dataAmerican Community Survey 2013www.census.gov/programs-surveys/acs11
© 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
© 2016 Sencha Inc. • CONFIDENTIAL •Main question:“Where should I live?”
© 2016 Sencha Inc. • CONFIDENTIAL •“Income after housing” concept[Income after housing] =[Total income] - [Expenses for a house]
© 2016 Sencha Inc. • CONFIDENTIAL •Application functionality• Display of original data sources• Display of data analysis results: highlight hidden trends and insides• Data visualization15
© 2016 Sencha Inc. • CONFIDENTIAL •Data sourcesProblemHow to show a grid with more than 1 Million rows?16
© 2016 Sencha Inc. • CONFIDENTIAL •Data sourcesPossible solutions• Load dataset in a browser: at least 6 Million DOM elements (for 5 columns)• Use pagination: 1000 pages if page size is 100017
© 2016 Sencha Inc. • CONFIDENTIAL •Data sourcesExt JS Solution• Ext JS Grid with buffered rendering: only part of the dataset is rendered at a time• Ext Speeder backend: server-side smart cache18
© 2016 Sencha Inc. • CONFIDENTIAL •Data Sources: Houses Grid19
© 2016 Sencha Inc. • CONFIDENTIAL •Data sourcesResult• Extreme performance• Real-time Big Data• Filtering and sorting are supported20
© 2016 Sencha Inc. • CONFIDENTIAL •Data analysisProblemHow to aggregate data to highlight hidden trends and insides?21
© 2016 Sencha Inc. • CONFIDENTIAL •Data analysisPossible solutions• Third-party solution: problems with integration, pure interactivity• Self-made solution: manual data aggregation and visualization with tables or lists22
© 2016 Sencha Inc. • CONFIDENTIAL •Ext JS SolutionSencha Pivot Grid: aggregate data per several dimensions and highlight hiddentrends and insides23Data analysis
© 2016 Sencha Inc. • CONFIDENTIAL •“Income after housing” Pivot Grid24
© 2016 Sencha Inc. • CONFIDENTIAL •Data analysisResult• Out-of-box solution for display of data analysis results• Easy highlighting of hidden trends and insides• Custom data aggregation• Local and remote calculations25
© 2016 Sencha Inc. • CONFIDENTIAL •Data VisualizationProblemHow to create a custom high-performance visualizationwith rich user interactions?26
© 2016 Sencha Inc. • CONFIDENTIAL •Data VisualizationPossible solutions• Develop a custom chart component manually: take time• Use third-party solution: integration problems27
© 2016 Sencha Inc. • CONFIDENTIAL •Data VisualizationExt JS Solution• D3.js adapter• Sencha Charts28
© 2016 Sencha Inc. • CONFIDENTIAL •Data Visualization: out-of-box visualization29
© 2016 Sencha Inc. • CONFIDENTIAL •Data Visualization: custom visualization30
© 2016 Sencha Inc. • CONFIDENTIAL •Data Visualization: custom visualization31
© 2016 Sencha Inc. • CONFIDENTIAL •Data VisualizationResult• 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 system32
© 2016 Sencha Inc. • CONFIDENTIAL •Used Ext JS components• Ext JS Buffered Grid• Ext Speeder back-end• Ext JS Pivot Grid• D3.js Adapter
© 2016 Sencha Inc. • CONFIDENTIAL •ConclusionExt JS offers a robust and flexible UI for enterprise data analysis applications,visualize big datasets in grids and charts with high performance34
© 2016 Sencha Inc. • CONFIDENTIAL •Thank you!Questions?