CubeViz Demo

We present two demo cases for CubeViz.js. Each case consists of a short introduction and a list of steps how to use it. Besides that, an introduction about the used data cube will be provided.

The first case presents a pre-configured instance and shows how to select and visualize data. The second one concerns how to setup and integrate CubeViz.



Target groups for this demo:

  • Non-technical users, who want to use a tool for data exploration and visualization. Please start with Case 1.
  • Technical users, who are interested in setup and integration of CubeViz. Please start with Case 2.


Demo is splitted in the following cases:

Case 1: About controlling CubeViz's user interface

  About

In this case we show how a pre-configured CubeViz.js instance looks like. We defined a certain SPARQL endpoint as data source and set the ID, where CubeViz.js will be shown in the DOM later on. CubeViz.js is shipped as one file which contains all neccessary libraries and code. The purpose of this case is to show the JavaScript only implementation of the data selection and later visualization. It is still work in progress and provides only a fraction of the old CubeViz.

  How to use

Please see the running CubeViz Demo Application below. It is preconfigured and shows the data cube of a SPARQL endpoint as default selection. Follow this steps to finish the demo:

  1. Please click on Dimensions to see a list of available dimensions, here countries and years.
  2. Select Italy from the Country part and 2007, 2009 and 2011 from the Year part (multi-selection possible using ctrl or shift key, while selecting items.) and confirm with OK.
  3. After your selection, the underlying visualization should show a column chart with procentual values about "% of basic public services for citizens, which are fully available online" in Italy in the selected years.
  4. There are other charts available. Click on Charts and select the bar or pie chart to chang the visualization.

Want to use your own data source? To do that, click on Import and insert either a SPARQL endpoint, remote RDF file or upload your own RDF file. Be aware, CubeViz.js is currently not able to handle bigger files than 15 MB, access through SPARQL endpoints should not have such limitations.

CubeViz Demo Application

There is a jsfiddle snippet which represents the instance shown. On jsfiddle you can change the code online and play around. Dont worry, its in its own space and you cant break things. JSFiddle-Link: jsfiddle.net/6j1scftp/

  About the used data cube

Here we use an adapted RDF-version of the Digital Agenda Scoreboard data cube of the European Commission. The Digital Agenda contains statistical information about key areas (e.g. \% of enterprises interacting online with public authorities) of European countries and outlines their performances per year. The original cube provides 3-dimensional data, but CubeViz.js can only handle 2-dimensional data, therefore a reduction was done. The raw data can be found here.

Case 2: About setup and integration of CubeViz

  About

In this case we show how to setup CubeViz: setup a data source and integrate it into DOM. You can define different kinds of data sources: SPARQL endpoint, RDF file and JSON-LD object. DOM-integration is done by set ID of the DOM element which contains the CubeViz container later on.

The whole process is simple and integration via DOM-ID is only the first step towards a more comprehensive integration (e.g. make UI elements styleable or use certain CSS-classes).

Below the simple integration all configuration possibilities are listed, e.g. how to hide the user interface elements.

  How to read

To following description is based on the source code below. It describes neccessary steps to setup CubeViz.

  1. Include CubeViz JavaScript file. We provide a minimized version through our Github repository which contains all required JavaScript code.
  2. Set values for keys data_source and ui_container. Key data_source contains either an URL to a SPARQL endpoint or RDF file or an instance of JSON-LD object, with Data Cube information.
  3. Create instance of CubeViz and pass on configuration. Doing that will led to an initialization of CubeViz container, but will not show the user interface.
  4. Start CubeViz and show user interface. After you called the run method, the user interface will be load into the DOM-object, reference by the ID (ui_container).
<html>
    <head>
        <!-- Step 1: Include CubeViz JavaScript file -->
        <script type="text/javascript"
             src="https://rawgit.com/AKSW/cubevizjs/develop/dist/cubeviz.min.js"></script>

        <script type="text/javascript">
            <!-- Step 2: Create configuration: set data_source and ui_container value -->
            var configuration = {
              data_configuration: {
                // Configure URL to RDF file or SPARQL endpoint, which contains Data Cube information, to use as data source
                source: 'https://rawgit.com/AKSW/cubeviz.ontowiki/master/assets/serbia.n3',
              },
            ui_configuration: {
                // ID of the DOM element which later includes CubeViz
                ui_container: 'cubeviz'
              }
            };

            <!-- Step 3: Create instance of CubeViz and pass on configuration -->
            var cubeViz = new CubeViz(configuration);

            <!-- Step 4: Start CubeViz and show user interface -->
            cubeViz.run();
        </script>
    </head>
    <body>
        <div id="cubeviz"></div>
    </body>
</html>

There is a jsfiddle snippet which represents the instance shown. On jsfiddle you can change the code online and play around. Dont worry, its in its own space and you cant break things. JSFiddle-Link: jsfiddle.net/bwm3gw47/

  About the used data cube

The data cube used in this case is about the gross of values added by activities in the Republic of Serbia of the years 2000 to 2009. The Source is the Statistical Office of the Republic of Serbia (www.stat.gov.rs/) and the data where generated from webrzs.stat.gov.rs/WebSite/public/ReportView.aspx. A clean data cube file is available here.

  Extended configuration

Beside the data-source and ui-container, there are some extended configuration possibilities to control CubeVizjs interface. For example all of the interface elements may be hidden to show only the chart. All current settings are given in the following example:
var configuration = {
  data_configuration: {
    // (String) URL to RDF cube or Sparql endpoint
    source: 'https://rawgit.com/AKSW/cubeviz.ontowiki/master/assets/serbia.n3',
    // (String) ID of default measure
    measure: 'http://purl.org/linked-data/sdmx/2009/measure#obsValue',
    // (String) ID of default attribute
    attribute: 'http://elpo.stat.gov.rs/lod2/RS-DIC/esa95-unit/RT_GDP',
    // (Array of Strings) IDs if shown dimension elements
    dimension_elements: ['http://elpo.stat.gov.rs/lod2/RS-DIC/time/Y2006', 'http://elpo.stat.gov.rs/lod2/RS-DIC/time/Y2009'],
  },
  ui_configuration: {
    // (String) ID of target DOM element
    ui_container: 'cubeviz',
    // (Boolean) Show or hide all interface elements
    show_ui_elements: false,
    // (String) Name of the chart: heatmap|column|pie
    chart_name: 'column'
  }
};

An Jsfiddle playground with all these configuration settings ca be found here. JSFiddle-Link: jsfiddle.net/9bo7ao4v/