Angular in Development of Visual Analytics Systems

LT slides for ng-kyoto Angular Meetup #6

Transcript

1. Angular in Development of Visual Analytics Systems Yosuke Onoue
2. Self Introduction • Yosuke Onoue • Assistant Professor, Science for Innovation Policy Unit, Kyoto University • Community: • ng-kyoto co-organizer • GDG Kobe staff • Interests: • Visualization, Optimization • JavaScript, Python, Rust
3. Visual Analytics “The science of analytical reasoning
 facilitated by interactive visual interfaces.” Thomas & Cook 2005
4. Web-based Visualization Tools • D3.js • Plotly.js • Chart.js • Google Charts • Highcharts • vis.js • Vega • cytoscape.js • Leaflet.js • … Many visualization tools for Web
5. Visualization and Visual Analytics Data Drawing Result Visualization processes is not so simple Data Data Filtering Transforming Merging Laying out … Insights ！
6. Complexity of Visual Analytics Systems • Fetching data • Transforming data • Filtering data • Merging data • Applying algorithms • Rendering • Zooming and panning • Changing parameters • Storing results • … Visualization libraries don’t have sufficient functions
 to implement complex visual analytics systems!
7. Visual Analytics System for SEM
8. System Implementation • Frontend • Web-standard implementation (HTML / CSS / JS) • Angular for application architecture • Cytoscape.js for graph visualization • Backend • REST API implemented in Ruby • Parameter estimation using Lavaan • Available at: https://likr.github.io/interactive-sem
9. I received best poster award in IEEE PacificVis 2017!
10. Summary • Needs of web-based visual analytics is increasing! • Web application frameworks are needed
 to implement complex visual analytics systems • Handling complex data flow • Rendering graphics with SVG, Canvas, and WebGL • Integrating with visualization libraries • The visualization community hope development of web technologies!