Hide menu

Learn More - about interaction techniques applied in eXplorer graphs

Since insight is normally gained through interaction, visualization components in the eXplorer application framework are integrated with various interaction techniques and interactive features to enhance their ability of in particular statistical data exploration and analysis. Interaction techniques implemented in eXplorer applications include:

Hovering, brushing, selection, zoom, pan, focusing (i.e. bringing selected items to the centre of view and in case of the map component, the map is zoomed in on the selected regions), dynamic filtering, focus-and-context, drill-down, tooltips, details-on-demand, time animation, etc..

Other components of the eXplorer applications are also enhanced with a rich set of interaction techniques. For example, in addition to common interaction techniques such as selection and hovering, the parallel coordinates plot is also enhanced with filtering, axis switching, and semantic zoom. The scatter plot is enhanced with zoom, scaling and animation The treemap is enhanced with drill-down techniques. The bar chart described in more detail below and the time graph are enhanced with the focus-and-context technique and so on.


Fisheye Lens technique in bar charts enhances statistical visualization

An important visual technique that has evolved from InfoViz is the Fisheye Lens technique that magnify the center of the field of view (Focus), with a continuous fall-off in magnification toward the edges (Context). Degree-of-interest is determined by the level of detail to be displayed assigned through user interaction. The Fisheye Lens, here applied to the bar chart, represents an interactive data reduction visualization tool for seeing both local detail and global context of a large number of bars simultaneously. It is an intuitive spatial navigation tool which clearly portrays immediate relationships between bars in focus and its neighbour bars. This Fisheye technique integrated into a bar chart was developed by NCVA in collaboration with NComVA as part of the GAV Flash component toolkit. This new fish eye tool was tested and verified in collaboration with OECD staff already in 2008.

Bar chart explanation

Figure:  Try the interactive embedded (Vislet) Fisheye Bar chart below. Our Bar chart implementation is based on a focus-and-context method using fisheye technique meaning that more bars than available space can be displayed. This is the standard configuration and is used in the initial view. The bottom slider http://www.ncomva.se/guide/Images/focus.pngcontrols where focus should be along the axis. Moving the focus slider will then place new bars in focus. Bars not in focus will be displayed as thin lines - visible in the background and giving the user an idea of all bars in the data set. Clicking on the Focus button will change the Bar Chart to use standard scroll technique along the axis.  With the crop button http://www.ncomva.se/guide/Images/crop.png the scale of the axis is controlled.

Interactive Fish eye Bar Chart 

Figure: Interactive Fish eye Bar Chart:

The distortion caused by the fisheye lens technique, in many cases, makes the focus view difficult for public users to perceive. To make it easier for our statistical user category, our research team did not use the same principle of the fisheye technique. Instead, we modified this technique by removing the distortion effect (as briefly described below) and applied it to interactive bar charts. The bars in the focus view have the same wider width and data values can easily be discovered and analysed. The bars in the context view are much thinner but the user can still see the overall trend of the statistical data. The focus view is interactively controlled by the user through a dual slider in the bottom of the bar visualization. This means that the user can increase or decrease the width of the bars. The user can move the slider to move the focus view, or move two control points of the slider to extend or shorten the focus view (i.e. to increase or decrease the number of items displayed in the focus view).

The attributes for the bar chart is set in this menu. 

bar chart multi mode




Figure: The eXplorer fish eye bar chart with two indicators "age group 65+" and "young group". Notice Germany 2012 where the "younger group" represents a percentage less than "age group 65+" .







Interactive World Map Vislet with three coordinated and linked views.




if the Vislet is not loaded immediately - Try again! The world geographical coordinates is a rather big file.

Or start the World eXplorer and evaluate the interactive features in the preloaded world data story at: http://mitweb.itn.liu.se/GAV/world/ . You can also import/load your own data!


Scatter Plot

The Scatter Plot (sometimes called a bubble chart) is a graph that displays how two indicators in the data set relate (correlate) to each other. A country is here represented by a dot at the intersection values for the two indicators chosen on the X-axis and Y-axis. Each dot has an X- and Y- coordinate (value) that matches the axes.  In the scatter plot, each dot represents a country and its position is controlled by a Y-coordinate (Fertility rate) and X-coordinate (Age dependency - amount of elderly people in the country).  The plot can also show two extra dimensions through the use of colour (population growth), which is shared between all views, and through the size (total population) of each dot sized by area. This means that the number of indicators simultaneously analysed can be increased to four. However, we still have one more attribute "Time". In the figure below, movement over time for a country is represented by its trail line.

world scatter plot




Figure: Scatter Plot in eXplorer. We have selected 5 (five) variables using 5 dimensions: X, Y, Colour, Size and Time 1) Population age 65 +  (% of total) Y-axis, 2) Population ages 0-14 X-axis, 3) Age 65+  (Colour) 4) Total Population (dot size by area) and 5) (time trail line) representing time 1960-2013. We see that Japan has had a dramatic increase of elderly population since 1960. We see also that China has had a dramatic reduction of younger population. The World here represented by a bubble shows a slowly growing elderly population and reduction of younger population. Niger has a different path with an increase of young population. 

Use the Vislet above for a better understanding of this technique.

To change which indicators to be displayed, use the three combo boxes, one for each axis and one at the top for dot size. The maximum dot size can also be adjusted through a bar on the right hand side. Hovering (tooltips) above a dot (country) will display detailed information, and clicking on the dot will select (highlight) the region in all views along with the Scatter Plot. You can select (highlight) several dots (regions) by clicking with the mouse on the dot and pressing the CTRL button on the key board at the same time. Alternative, click on one or several regions in the map and the corresponding dots will be highlighted in the Scatter Plot. 


World Scatter Plot with Zoom

Figure: A zoom function in Scatter Plot is initiated by holding down left mouse button and at the same time draw a rectangle (figure). Regions inside this rectangle will be zoomed in and axis scaling and annotations are changed accordingly. Zoom can also be initiated by using the middle mouse scroll. This alternative zoom function also depends on the position of the mouse.

See also interactive Guide: http://www.ncomva.se/guide/?chapter=Visualizations&section=Scatter%20Plot#_General


Parallel Coordinatest Plot

Statistics eXplorer introduces to the statistical community a well-known visualization method from the Information Visualization area called  Parallel Coordinates Plot (PCP).  PCP is a proven visualization technique for identifying trends and cluster in many scientific environments but has not been used in statistical visualization. PCP enables visual representation of spatial multivariate indicator data and hence could become an important mechanism in Statistics Analytics. Each country is represented by a string (line) passing through the “parallel axes” intersecting each axis at a point depending on the indicator value of region.  Each axis represents a single indicator. The highlighted strings forms a visual representation of the characteristics of one region (Niger etc.). 
















figure: http://www.ncomva.se/guide/?chapter=Visualizations&section=Parallel%20Axes%20Chart#_General


Histograms attached to each PCP axis are used to visualize the distribution of the indicator data values, splitting the axes into a user defined number of equally high rectangular areas (bins). A coloured region line intersects the PCB axis at a point depending on the indicator value and is then sorted into corresponding bin.  The length of a rectangle indicates the frequency of regions intersecting that bin, the more regions within an area the wider the rectangle. Histograms can be turned on/off and the number of bars can be specified. Histograms are dynamically moved during a time animation and can expose interesting trends over time.

Another advantage with the PCP exploration technique is the capability to dynamically make visual inquiries and filter data. Filtering data is a critical step in the process of data analysis. Filter out uninteresting regions; reduce the data set to a smaller, more manageable size. Each indicator axis has a pair of range sliders which define the bottom and top range for the query area. The range of an indicator can be specified by “dragging” the handles on the top and bottom of the corresponding range slider. Regions with values for a selected indicator, that fall outside of the spec­ified range, are filtered out. A combination of range slider movements can be used to dynamically formulate a more complex visual inquiry. These visual conditions and constraints will immediately re­flect the visual contents in all linked views. An example of a query using the sliders is shown below. After a dynamic query operation, applied to the indicator "Labour Productivity”, regional values below the mean (green line) was removed. A tooltips shows the exact value for the slider position along the indicator axis. A second condition is then given for indicator “Unemployment rate”, where regions with higher rate (above mean value) are removed.


PCP change Min and Max


The PCP has been extended with special features that are important to statistical exploration, such as, histograms and filter operations based on percentile statistics. PCP provides the following features:

  • Revealing correlation between indicators;
  • Estimation of degree of similarity between regions;
  • Finding clusters and outliers;
  • Analyze the characteristics of many regions;
  • Picking and highlighting of interesting data items for profile and comparison;
  • Comparison of individual characteristics of a region to the characteristics of all regions;
  • Comparison of indicators associated with a selected region;
  • Comparison of variations of values of different indicators;
  • Dynamic range sliders and statistical methods for defining events such as exceeding of a given threshold and identification of outliers;
  • Dynamic visual inquiries, filter operations using familiar statistical methods;
  • Facilitates dynamic animation in linked and coordinated views;

Parallell Coordinate Plot Demonstrator




Time Graph

Time Graph


The Time Graph component is an enhanced line graph that displays one indicator for a given time span. The x-axis represent the year and the y-axis the chosen indicator. Sweden, USA and Niger are selected in this example and can easily be distinguished and compared. The indicator "Population ages 65+" is visualized during the time span 1960 to 2010. 







The Time Graph can be interactively tested at:



Distribution Plot


Distribution Plot Europe



The Distribution Plot is an innovative variation of the box plot visualization method. It is similar to a vertical bar chart but it excels at showing how data items that belong to a cluster are distributed according to an indicator. Each cluster is represented as one row of dots, and these dots are a representation of each data item belonging to this cluster. The mean value is represented as a thin green line for each country. This component is based on the premise that each data item belongs to a cluster. It is a good way to visualize the differences within a cluster; showing the minimum, maximum and mean value as well as the interval of the values in the cluster. Use the menu on the left side to change which indicator to be visualized and use the green scroll bar on the top to "zoom" in on interesting areas. Try this demonstratror at:



Distribution Plot


Figure: Distribution Plot showing world countries categorized by continents


Eurostat Distr Plot

Figure Distribution Plot - Eurostat Unemployment rates NUTS2 regions:  http://epp.eurostat.ec.europa.eu/cache/RSI/






Page manager: mikael.jern@liu.se
Last updated: Thu Sep 01 16:57:09 CEST 2016