Graphical Interaction

Transcription

1 Fakultät für Informatik Technische Universität München Bachelor s thesis: Graphical Interaction on Enterprise Architecture Visualisations Referee: Björn Kirschner Supervisor: Sascha Roth 1

2 Structure 1. Introduction to Graphical Interaction 2. Requirements 3. Design 4. Demo 5. Problems 6. Outlook 2

3 1. Introduction to Graphical Interaction Visualisation provides a powerful means of making sense of data [HS12]. => Visualisations for desicion support Displaying an entire large graph may give an indication of the overall structure, but makes it difficult to understand [HMM00]. => Need for Graphical Interaction )'(#*+,("-#.!"#$./!"01+2"0+("&'3 Data model query View data model Symbolic model Graphical Interaction Information model!"#$%&"'( View model Visualisation model = General interaction functionality valid on all visualisations independent of the viewpoint. Conceptual Framework for Interactive Enterprise Architecture Management Visualizations [SMR12] Examples: zoom, pan 3

4 2. Requirements (use cases)!"#$%&"#%'"()!""#'()%'#"*+,'-.,,/!""#'()%'0*11"&+!""#!""#'()%'+/)2,3!""#'*+)&4'%&' "(,3(),-'-)&2"-!""#'()%'$)&8.'4,+1*3,' 91"*8.'+83,,&+: $%&'()%'$3,++)&4' %33"-'5,6+ $%& $%&'*+)&4'%& "(,3(),-'-)&2"- (),-'()+*%/)+%1)"&')&' *//+83,,&'#"2, $%&'06'23%44)&4' 1.,'()+*%/)+%1)"& $%&'()%'+-)$,'4,+1*3,' 91"*8.'+83,,&+: 4

5 3. Design - The Helicopter View Staus Bar Slider #$$%& "! Helicopter View '()(*(+,-%.(+/01(+02(3) Two alternatives of fitting the visualisation into the Helicopter View 122!3 0!!!!!!!!!!!!!!"#$#%#&'(!)#&*+,#&+-#.$ / 5

6 3. Design 4&$+ 8'(&*9&/:*(6?#*(&5 :'>$+*/8'(&.'+5 ;<< 0$56"+$5"&$'(!"#$%"&$'( ;<< 2+$3*. ;<< )*+$,'-&*./0$*1 ;<< 2&"&65/=". 6

7 4. Demo...the actual program...

8 5. Problems - Performance Setting the view box on a SVG is very slow Possible improvements via: working with timeouts showing only wireframe during interaction employing hardware acceleration Web workers in HTML5 (concept for multithreading) bring no enhancements since there is still only one UI thread. 8

9 5. Problems - Opening a new window Opening the visualisation in a new window Tests of three alternatives (n=1000 on a map with 250 nodes): Server callback (2220ms) Re-render JavaScript (1414ms) Move DOM elements to the child window (649ms) 9

10 5. Problems - Bugs Bugs especially in Firefox when opening visualisations with colour gradients in a new window 10

11 5. Problems - Touch gesture detection Poor standardisation of gesture detection on touch screens (pinch, swipe) Safari on ios: events which detect pinch and twist (ongesturestart,...) W3C Standards (work on ios and Android): events which forward list of touches of all fingers (ontouchstart,...) => own gesture detection algorithm necessary! Opera Mini: no information about touches Only limited support offered by third-party libraries: E.g. JQuery Mobile: no pinch, no vertical swipes 11

12 6. Outlook Usability improvements after user feedback Performance improvements Helicopter View component as basis for additional functionality 12

13 Questions......? Citation: [HS12] Heer, Jeffrey ; Shneiderman, Ben: Interactive Dynamics for Visual Analysis A taxonomy of tools that support the fluent and flexible use of visualizations. In: ACM Queue 10 (2012), No. 2 [HMM00] Herman, I ; Melancon, G ; Marshall, M S.: Graph visualization and navigation in information visualization: A survey. In: IEEE Transactions on Visualization and Computer Graphics 6 (2000), No. 1 [SMR12] Schaub, Michael ; Matthes, Florian ; Roth, Sascha: Towards a Conceptual Framework for Interactive Enterprise Architecture Management Visualizations. In: Modellierung,