How to create a new visualization

Introduction

Visualbox simplifies the creation of Linked Data-based visualizations. The user needs to write a SPARQL query, which will be executed to a SPARQL endpoint and then specify which visualization filter will use.

Using the GUI

The first step is to log in the Administrator Menu. To do so, go to /admin section of your Visualbox installation. For example if Visualbox is installed at http://localhost/visualizations/, go to http://localhost/visualizations/admin. You should see something similar to Figure 1:

The default password for user admin is admin.

Component Editor

You have several options, but for now we will focus on creating a simple visualization. Click on the Go to Editor button as seen in Figure 2:

Each visualization in Visualbox is created in a component: A component consists in one or more SPARQL queries ( models ) and usually one (but sometimes more) templates ( views ). The components available can be seen under Services menu. We want to create a new visualization, so we click on the NEW button marked in the red circle:

You will be asked to name the new component (e.g., newComponent) as in Figure 4:

A new component called newComponent will appear in the menu. Clicking on it will scroll the screen down to the view and models available. Clicking on the main model will show a simple query requesting 10 triples, something similar to

SELECT * WHERE{
 ?s ?p ?o
}LIMIT 10

Clicking on the html view will show a simple HTML page. In particular it will show the following line:

  {{models.main|GoogleVizTable:"s,p,o"}}

What this line means is "Use the results obtained by the query main and put it in a Google Table visualization, where the first column is filled with the results obtained in the variable s, the second column using the results form variable p and a third column using results from variable o". Clicking on the View Component button will open a new window with the visualization:

Editing the query

We want to have a timeline of the date of birth of several surrealist painters. To do that, we modify the main model to:

PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>

SELECT DISTINCT ?painterName ?bday WHERE {
 ?painter a <http://dbpedia.org/class/yago/SurrealistArtists> ;
          <http://dbpedia.org/ontology/birthDate> ?bday ;
          rdfs:label ?painterName .
  
 FILTER(LANG(?painterName) = "en")

}LIMIT 10

We can test if thew query works, by clicking on the Test this query against button. It will execute the query agains the local endpoint (assuming the local endpoint is http://dbpedia.org/sparql. See endpoints for info on how to configure endpoints). The results will be seen as a table:

Editing the template

Now click on the html template and change

  {{models.main|GoogleVizTable:"s,p,o"}}

for

  {{models.main|TimeKnot:"bday,painterName"}}

In this way, we say to Visualbox "Take the results from main and pass it to the TimeKnots filter, using the values from variable bday and painterName"

Clicking on the View Component button will reload the new window and you should see something like

Extra: Using data from multiple endpoints

You can load data from different endpoints. For example, if we want to show data from surrealist painters and number of triples in datasets from [LOGD] (http://logd.tw.rpi.edu) (!), you can create a new model by clicking on the new button in Models

You will be asked to name this new model. This is important Since we want this to be ran against logd sparql endpoint (http://logd.tw.rpi.edu/sparql) instead of the local endpoint (See endpoints) we should specify the name as logd/modelName. In this case we will name is logd/triples

We now have a new model in the models section

We can click on it and edit it as we did before. For testing purposes, we selcet the logd endpoint in the combo box and run the query. We will add the following query

PREFIX conversion: <http://purl.org/twc/vocab/conversion/>
SELECT ?g sum( ?triples ) as ?estimated_triples
WHERE {
  GRAPH ?g  {
   ?g void:subset ?subdataset .
   ?subdataset conversion:num_triples ?triples .
  }
} 
GROUP BY ?g

Finally in the html template we add a new line

  {{models.logd.triples|GoogleVizColumnChart:"g,estimated_triples,width=1200"}}

This basically says "Take the results from logd/triples (that was executed against logd endpoint) and use the data to create a Column Chart, using g in the X axis and estimated_triples in the Y axis. By the ways, the visualization should have a width of 1200 pixels"

The result should something like