Star Plots On Interactive Displays

Star Plots On Interactive Displays

The goal of this project was to develop a set of multi-touch interaction techniques for star plot visualizations and ideally to incorporate additional data into a single star plot.

Tools

  • Python
  • libavg

How It Started

The project was divided into two parts — first, we explored how we can use fluid and direct multi-touch interaction to explore star plot visualizations and second, we created a new way of integrating additional levels of information into a star plot.

What We Did

We split up the semester into three common phases:

  • Analysis phase
  • Concept phase
  • Implementation phase

Analysis Phase

Our analysis consisted of a literature review that we used to assess what functionalities star plots have, how they are currently used, if approaches for incorporating natural interaction exist at all, and if we could be inspired by examples of touch interaction with other visualizations. We also came up with problems and challenges regarding the functionalities of star plots and the interaction. The analysis phase served as an introduction to star plots on a more scientific basis. All members of my team had worked with star plots before but in this analysis phase, we achieved to increase our knowledge significantly.

Concept Phase

We further worked with our problems and challenges that we had identified and came up with lots of ideas to solve them. All of the team members came up with ideas and sketched them out, which led to a vast amount of sketches.

A collage with various sketches for star plot concepts

One problem, we identified and we found very interesting, is showing data that is more structured and has multiple levels in a star plot. For instance, if one axis shows the amount of car accidents in one month, this amount can be broken down by the location of the accident (if the accident happened on the highway, outside of a city, or inside a city). We had several ideas and concepts to address this issues. Here are a few of them to get an impression:

Implementation Phase

Based on discussions within our team and with our supervisors, we decided which concepts were the most promising and should be implemented as a prototype. For the issue of visualizing data with multiple levels in star plots, we decided for the split axes because they seemed to be the most interesting with a lot of potential regarding the interaction with the axes. Furthermore, the split axes integrate nicely into the star plot and are fairly scalable, which means they do not increase the size of the overall visualization.

We built the prototype for a 27″ display that supported pen and touch input. For the UI and the visualization we used the Python in combination with the framework libavg. We used a data set from the Destatis, which is the Federal Statistical Office of Germany. The topics of the different data sets were family structures, accidents, marriages, and students.

The Result

In general, we decided to add a handle to each axis since axes are usually very small in size which makes them hard to interact with using multi-touch. This handle enables a person to move axes by dragging the handle, pin them to a specific location using a hold gesture, and split the axes using a double tap.

A screenshot of the prototype showing a star plot with several data objects

On the first image, a person uses the axis handle to move the axis. There are two ways to move an axis: 1. Using one finger to drag an axis, moves the axis and skips other axes once they cross each other, or 2. using two fingers to drag an axis, which leads to the axis pushing other axes in case they would otherwise cross each other. The first case enables re-arranging axes, whereas the second case can be used to “tidy up” a star plot to creating space to interact with other axes and still keep the current order of the axes.

The second image shows an axis that was split using a double tap on the axis handle and the sub-axes can now be re-arranged in the same way as a normal axis (without skipping higher level axes). Furthermore, wiping several times across the star plot resets the plot and distributes all axes equally.

Lessons Learned

Looking back at the project, I’m still happy with the outcome and think that I learned a lot during this project. Of course, there are things that I would do differently now but overall, it turned out well. However, there are still concepts that we talked about during the project that I would still like to implement, see if they work, and find out if they are really as interesting as they seem.

Further Information

Our result was extended and later published as a poster with an accompanying video by our supervisors at the ACM ITS (Interactive Tabletops & Surfaces) conference 2015 in Madeira, Portugal.

Ricardo Langner, Ulrike Kister, Christin Engel, Tom Horak, and Raimund Dachselt. 2015. Towards a Fluid Interaction Concept Bringing Star Plots to Interactive Displays. In Proceedings of the 2015 International Conference on Interactive Tabletops & Surfaces (ITS ’15). Association for Computing Machinery, New York, NY, USA, 349–354. DOI: https://doi.org/10.1145/2817721.2823505