Why we redesigned the system
The former design of the system suited the PDA screen and was developed in OpenGL ES ( http://www.khronos.org/Opengles ). While OpenGL ES maybe efficient for 3D graphics, it is an overkill for doing just 2D graphics which is mostly the case in information visualization. Hence, the current work will leverage hardware assisted fast 2D rendering library provided by OpenVG ( http://www.khronos.org/openvg ) to render visualizations that are scalable across any screen size. Also, smartphones have smaller screen sizes compared to PDAs, so many of the visualization metaphors will be adapted accordingly. Since PDAs differ from smartphones in their user input styles (stylus and button input), the current project aims to develop a user interface best suited for button-based inputs while also retaining its compatibility with PDA interaction.
The revamped system design
The figure below shows our revamped visualization system designed to visualize data using the overview+detail paradigm. As shown in the figure, the system consists of two different components. To the left is the “Data Access” component, which consists of the databases (SQL Server 2000 on a remote server, SQL Server CE on the windows based mobile device and the ``Remote Data Access'' ( RDA ) technique used to pull data onto the mobile device). To the right is the “Data Visualization” component, which shows how we convert data (in the form of events) to various visualization entities synchronized with the time slider.
Revamped System: New visualization paradigm and real-time data access using RDA
The visualization design
The new visualization system closely follows the AppLens technique introduced by Karlson in ( http://www.cs.umd.edu/hcil/jazz/learn/papers/chi-applens-launchtile.pdf ). Their technique was primarily applied to arrange various utility programs on a smartphone for easy interaction while preserving context. While this technique had three modes of views - overview, context and detail, we have only two modes - overview/context view (Figure 3) and detail view (Figure 1, 2, 4, 5).
In the context view, we divide the screen into 5 sections as can be seen in Figure 3. In this view, we don't allow any detailed user interaction, except with the time slider and zooming into the information space for each region of the screen.
The right most section represents the time slider, which is used to step through time intervals. It enables a user to scroll through continuous time intervals and see the visualization corresponding to the time interval between its current and previous positions. The time range for the slider is preset to an hour before and after the football game since the network analysts wanted to examine connection patterns of tailgaters and others who might access the network after the game. The time axis is highlighted with green portion to indicate the time upto which real-time data has been read until then. The rest of the time axis is marked with a red portion to indicate that data has not yet been read for these times.
The rest of the screen space is divided into 4 regions (which I will refer to as top-left (TL), top right (TR), bottom-left (BL) and bottom-right (BR)).
The detail view screen is displayed when a user zooms into the information space from the overview screen. This can be done by using spatially intuitive mapped keys (in case of a smartphone). The zooming process is shown as a smooth animation (in order not to spatially disorient the user), which displays detailed information for the zoomed region and a brief meaningful summary for the compressed regions, if possible. For user interaction in this view, we have defined two modes: “Browse mode'' and “Exploration mode'' . In the former mode, a user can step through time intervals to update the visualization while being in the detail view. The latter mode can be used for detailed interaction with the currently zoomed region. A user can toggle switch between these modes using the button '3' on the keypad. The currently selected mode is displayed on the top left of the screen as can be seen in the Figure 1, 2, 4, 5. These figures are screenshots of the display screen in the detailed mode for each zone.
Screenshots from the system
|1. Syslog (Detail)||2. TraceMAC (Detail)|
3. System Overview/Context screen
|4. VideoLog (Detail)||5. PopularVideo (Detail)|
System running PDA and Smartphone
Here are two screenshots of our system running on a Dell Axim X51v system and a smartphone emulator.
System on PDA
System on Smartphone emulator