Skip to content

User interface documentation

Konrad Abicht edited this page Sep 18, 2013 · 15 revisions

Here we will give you an overview about the main parts of CubeViz's user interface.

Left Sidebar

Lets start with the left sidebar, the main entry point to start CubeViz. Furthermore, it provides a facet-oriented search to select the data you want. The main structure is, from top to the bottom:

  • dataset selection
  • slice selection
  • attribute selection
  • measure selection
  • dimension selection
  • two buttons:
    • left button provides a link to share the dataselection with other people
    • right button leads to the visualization or updates it

For a real world example, please have a look here:

If you want to change, for instance, one of the dimension selection, you have to click to the related change-button of a dimension. That leads you to a window, which provides a dimension element selection. The following screenshot illustrates an example:

It provides you the possibility to configure the element which is related to the clicked link. In the illustration it was the dimension year. In the window you see on top the title and description text of the according element, below are four buttons:

  • select all and deselect all items
  • sort by alphabet and check status

These buttons helps you to do not get lost by sorting the elements and de-/select them. Below these buttons there is the main part of the window: the element list. There is one entry for one element with its title. If you hover over one entry, you will see its URI as tool tip.

Below the list of entries there are two button on the right side. The Cancel button closes the window without change the data selection, but the other one will update the data selection according to what you changed here.

About facet-oriented search

Facet-oriented search means, that an user set filters (facets) and approximates his target step by step. This type of search does not limit you by set senseless restrictions, but let the data itself be the search mask.

The DataCube vocabulary provides a couple of possibilities to serve the facet-oriented approach. The first one are slices. A slice is a certain configuration of dimensions and their elements. CubeViz provides a slice selection in the left sidebar to enable their usage.

Another possibility is the selection of certain dimension elements, which is the usually approach. Based on the DataCube vocabulary, dimensions identify observations, which is similar to the URI-concept of RDF. So, by change the selection of dimension elements you directly change the collection of retrieved observations.

Exploration and visualization area

After you chose a certain data selection in the left sidebar and pressed update chart, you will (hopefully) see a fancy visualization. The structure of the exploration and visualization area is illustrate in the image above.

There are four areas:

  • Head area - Contains title of selected model and a link, which opens a window containing more information about the model
  • Visualization - Fills the most space on the screen. It visualize the given observations in a certain way, for instance as a bar chart.
  • Visualization selector - It provides a mechanism to alter the visualization, if you want. Furthermore you can configure the current visualization, for instance switching the axes or set a logarithmic scale. But the last point depends on the provided configuration. If you want to play around with these, have a look into the ChartConfig.js in the main folder.
  • Legend - It provides a list of all retrieved observations according to the data selection. Furthermore it also provides a couple of functions to explore and interact with the data.

Visualization selector

Its purpose is to provide you different points of view on the data. Additionally, you can adapt the visualization in a several ways, depending on the configuration. CubeViz shows only options which fits with the data selection, because available charts can visualize only data with a certain amount of multiple dimensions.

The administrator of the site is able to set the mentioned configuration. To do that, he has to adapt the ChartConfig.js in the root folder of CubeViz. It is organized as JSON-Object and contains, apart from visualization configuration itself, image paths or set visualization classes for certain use cases with defined number of multiple dimensions.

Visualization

As mentioned before, a visualization is a certain point of view on the data. In CubeViz the visualization has the aspiration of given the user a new impression of his data selection, but honestly, that's rarely the case. However, the visualization is provided by two different libraries: HighCharts and D3.js. CubeViz was designed to enable the usage of any library as long as there is a proxy class, which connects the backend with the visualization itself.

Legend

The legend is a list of retrieved observations. For each observation it provides additional information, such as according dimension elements, and furthermore, sorting functions. Its main purpose is to help the user to explore the data directly.

After a huge update in version 1.0, it provides a couple of new functions. From now on, the list is organized as a table. Each column in the table represents one dimension, but the last one represents the measure itself. Each column is sortable as ascending and descending. CubeViz also displays information about the dimension elements itself. For instance, in the measure column head you will see the minimum and maximum value. Another example is, that in each dimension related column you will see the number of available dimension elements and number of elements, which are really in use by the retrieved observations.

Furthermore, you can directly change the measure value of an observation which instantaneously updates the visualization. But you don't really change the original value but an additional temporary value will be stored next to the original one. CubeViz is able to recognize it and will display it instead of the original one.