Lab 7: Sgvizler
Using Sgvizler to visualise the results of SPARQL queries on web pages
BECAUSE YOU NEED TO RUN A WEB HOST AND A SPARQL ENDPOINT IN THIS LAB, YOU SHOULD BRING YOUR OWN LAPTOP TO THIS LAB, OR WORK WITH SOMEONE WHO HAS BROUGHT A LAPTOP.
Skjæveland 2012: Sgvizler. Paper in the file storage in the portal. Sgvizler 0.6 web page (http://mgskjaeveland.github.io/sgvizler/) Google Charts web page (https://google-developers.appspot.com/chart/interactive/docs/)
You must have Jena Fuseki running on your machine, so you can access it from a web browser at http://localhost:3030 (or http://127.0.0.1:3030). So please make sure you have at least finished the first parts of Lab 6 (SPARQL queries with Fuseki) before you start this one!
You need a web server running on your machine.
- Alternative 1 is to use the browser embedded in Eclipse. You create the HTML file inside an Eclipse project, with extension .htm or .html. You can right click the file and choose either Editor to edit it or Browser to view it.
- Alternative 2 is to follow this guide to set up a web server on your computer: https://www.maketecheasier.com/setup-local-web-server-all-platforms/ . For Windows, this guide recommends XAMPP, which includes the Apache web server. You only need Apache, although XAMPP wants to install a few other useful packages too. Up to you what you want!
- TIP: In the final step on Windows, when you click the Start button in the XAMPP Control Panel, things may not work unless you are running the Control Panel as Administrator. (To run the Control Panel as Administrator, locate it in the Start meny under XAMPP, right-click it and select "Run as Administrator". Do not install XAMPP under C:\Program files on Windows 10, because you will have trouble with write permissions later. Put it in root (C:\) or under a directory you make yourselves such as C:\Programs .
- (TIP: On some computers, another server may already be listening to port 80. If so, you may need to terminate that server or move the XAMPP server to another port. There are lots of questions on the web about this.)
- Open a web browser and go to http://localhost:80 , or just http://localhost . You are now in contact with the web server you just installed and started.
- TIP: For security purposes, make sure you turn off your web server when you no longer use it. Because you will only use it as localhost, it is possible to use very strict security settings if you want, but we will not go into that here.
- Locate the index.htm file you just read. On Windows, it is located by default in C:\xampp\htdocs , or in the htdocs-folder of the directory wherre you installed XAMPP. On Linux, it may be located in /var/www/html . From now on, we will call this folder your HTML-folder. Make a change to this file, and then reload it in the web browser to see the change. Writing to the htdocs-folder udner Windows can be a challenge. You may need to change the file and folder permissions.
Go to the first of the "Minimal working examples" on http://mgskjaeveland.github.io/sgvizler/#examples . Save this example to the file quick-start.html in your HTML-folder. Go to http://localhost/quick-start.html in your web browser to see that it works.
Download these two files from http://people.uib.no/sinoa/ : lab7-simple-data.ttl and european-populations.ttl .
Start Fuseki as in Lab 6 (you need the --update). Go to http://localhost:3030, select your dataset and uplodad the file lab7-simple-data.ttl . Write and execute a SELECT query to see that the default graph now contains 20-25 simple rdf:type triples.
Edit the file quick-start.html in your HTML-folder so the data-sgvizler-endpoint is set to "http://localhost/mydataset/query". ("/mydataset" must be the name you used when you started the fuseki-server"!) Go to http://localhost/quick-start.html in your web browser to see that it has changed.
Congratulations! You have now used Sgvizler to visualise the results of a query to your own SPARQL endpoint on a web page hosted on your own web server. Although we have run all this locally (on http://localhost), the principles and steps involved are the same as on the open (semantic) web.
This is where the fun begins! Sgvizler's (and Google's) Table and BarChart charts allow the same data tables as PieChart. Change your page to display each of them. Sgvizler has an attribute for setting chart options: data-sgvizler-chart-options . Use it to set a title for your charts. (You may need to go into the Google documentation to find the available options, or you can guess.)
You can draw the data as a Gauge too, but you need to reverse the order of the coloumns in your table (so the counts come before the class names). Set the chart options so that the gauges go up to max 10 instead of max 100.
Upload the file european-populations.ttl and run a simple SPARQL query to see that the default graph now contains the populations of European countries.
Show the European population data as a GeoChart. Look at the Google documentation to explore different ways of showing the data in the map. For example, show populations as differently sized circles, set the background colour to black, and colour the regions with no data grey.