Slide 1
Slide 1 text
Angular in Development of
Visual Analytics Systems
Yosuke Onoue
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Visual Analytics
“The science of analytical reasoning
facilitated by interactive visual interfaces.”
Thomas & Cook 2005
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Visualization and Visual Analytics
Data Drawing Result
Visualization processes is not so simple
Data
Data
Filtering
Transforming
Merging
Laying out
…
Insights
！
Slide 6
Slide 6 text
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!
Slide 7
Slide 7 text
Visual Analytics System for SEM
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
I received best poster award in IEEE PacificVis 2017!
Slide 10
Slide 10 text
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!