Visualizations using Visualbox


Published on

In this talk I will show Visualbox, a "visualization server" based on LODSPeaKr that can make easy for non javascript experts to create simple but meaningful visualizations.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Visualizations using Visualbox

  1. 1. VISUALIZATIONS WITH SPARQL AND VISUALBOX Alvaro Graves @alvarograves
  2. 2. MOTIVATIONLinked Data brings tons of multidimensional data thatis easy(*) to queryHowever, having to make use of all that data we stillneed to being able to process it (as humans)One good way to make sense of this data is by usingvisualizations (*) Once you learn SPARQL
  3. 3. EXAMPLE versusImages: Few, Stephen (2010): Data Visualization for Human Perception. In: Soegaard, Mads and Dam, Rikke Friis (eds.). "Encyclopedia of Human-Computer Interaction". Aarhus, Denmark: The Interaction Design Foundation. Available online at
  4. 4. VISUALBOXBased on LODSPeaKrMake use of new and already existing visualizationfiltersCreating of visualization via new GUIPrinciple: Good data representation leads to good/easydata manipulation Corolary: Effort should be focused on obtaining the right data
  6. 6. MODELS (SPARQL QUERY) Using the SELECT query form will return a table, similar to SQL.main.query PREFIX foaf: <> SELECT ?person1 ?person2 WHERE{ ?person1 foaf:knows ?person2 . } person1 person2
  7. 7. VIEWS (TEMPLATES) We can decide how to operate with the data.html.template<ul>{{for row in models.main}} <li>{{row.person1.value}} knows {{row.person2.value}}</li>{{endfor}}</ul>output knows knows knows
  8. 8. FILTERS It is possible to apply filters to the data.Template{{for row in models.main}} {{row.person1.value|upper}}{{endfor}}OutputHTTP://EXAMPLE.ORG/JOHNHTTP://EXAMPLE.ORG/JOHNHTTP://EXAMPLE.ORG/GEORGE
  9. 9. VISUALIZATION FILTERS It is possible to apply visualization filters directly to all the results. These filters will generate the necessary code to create a visualizationModel (main.query)PREFIX cat: <>SELECT ?countryLabel (COUNT(?nobel) as ?total) WHERE { ?nobel dcterms:subject cat:Nobel_laureates_in_Physics; a foaf:Person; dbp:placeOfBirth ?country . ?country a schema:Country ; rdfs:label ?countryLabel FILTER(LANG(?countryLabel) = "en")}GROUP BY ?country ?countryLabelORDER BY DESC(?total)LIMIT 100
  10. 10. countryLabel totalUnited States 23Germany 14England 9Japan 6Austria-Hungary 5France 5Netherlands 4German Empire 3Soviet Union 3United Kingdom 3Italy 3
  11. 11. View (html.template)<body> <h2>Total of Nobel laureates in Physics by country</h2> {{models.main|GoogleVizPieChart:"countryLabel,total"}}</body>
  12. 12. TABULAR DATA Easiest case: consider table-based visualizations.View (html.template){{models.main|GoogleVizColumnChart:"countryLabel,total"}}
  13. 13. View (html.template){{models.main|GoogleVizBarChart:"countryLabel,total"}}
  14. 14. View (html.template){{models.main|GoogleVizLineChart:"countryLabel,total"}}
  15. 15. MAPS Represent data as latitude, longitude and labelSELECT DISTINCT ?city SAMPLE(?lat) AS ?latitude SAMPLE(?long) AS ?longitude ?area WHERE{ ?city a sch:City ; <> <> ; geo:lat ?lat ; geo:long ?long; dbp:areaTotalKm ?area .}GROUP BY ?city ?areaORDER BY DESC(?area)LIMIT 10
  16. 16. latitude longitude area45.4983 -91.7389 25.030.3167 -81.6667 229245.9989 -112.53 1868
  17. 17. View (html.template){{models.main|GoogleMaps:"latitude,longitude,area,width=800"}}
  18. 18. PARALLEL COORDINATESQuerySELECT ?carLabel ?wheelbase ?carWidth ?carLength ?transmission WHERE { ?car dcterms:subject <>; <> ?wheelbase; <> ?carWidth; <> ?carLength; <> ?transmission; rdfs:label ?carLabel. FILTER(LANG(?carLabel) = "en")}
  19. 19. PARALLEL COORDINATES carLabel wheelbase carWidth carLength transmission Lamborghini Aventador 2700.0 1136.0 4780.0 7 Lamborghini Reventón 2665.0 1135.0 4700.0 6 Lamborghini 400GT 2550.0 1257.0 4470.0 5Template{{models.main|D3ParallelCoordinates:"carLabel,wheelbase,carWidth,carLength,transmission"}}
  21. 21. GRAPHS Question: How to express a graph in a table? Answer: Table child → parentModel (main.query)SELECT ?person1 ?person2 WHERE{ ?person1 foaf:knows ?person2 .} person1 person2 Elizabeth Engstrom Ray Bradbury Neil Gaiman Robert A. Heinlein Neil Gaiman Ray Bradbury
  22. 22. View (html.template) {{models.main|D3ForceGraph:"person1,person2"}}
  23. 23. TREE STRUCTURESProblem: How do we retrieve a tree as a table?Solution (so far): Table child,parent with one row with noparent (root) child parent area Averill Park, New York Rensselaer County, New York 8.02896e+06 Sand Lake, New York Rensselaer County, New York 9.36e+07 Schaghticoke (town), New York Rensselaer County, New York 1.3442e+08 Poestenkill (town), New York Rensselaer County, New York 8.44336e+07 Schaghticoke (village), New York Rensselaer County, New York 2.33099e+06 Rensselaer County, New York
  24. 24. TREE STRUCTURESQueryPREFIX d: <>SELECT max(?regionLabel) as ?child max(?superregionLabel) as ?parent (max(?totalArea) as ?area) WHERE{ { ?region d:isPartOf <,_New_York>; d:areaTotal ?totalArea ; rdfs:label ?regionLabel; d:isPartOf ?superregion . ?superregion rdfs:label ?superregionLabel. FILTER(?superregion = <,_New_York>) FILTER(lang(?superregionLabel) = "en") }UNION{ ?region rdfs:label ?regionLabel . FILTER(?region = <,_New_York>) }FILTER(lang(?regionLabel) = "en")}GROUP BY ?regionLabel ?superregionLabelTemplate{{models.main|D3CirclePacking:"child,parent,area"}}
  25. 25. TREE STRUCTURES (2)Query (neruda.query)PREFIX rdfs: <>PREFIX dbp: <>PREFIX d: <>SELECT DISTINCT ?child ?parent WHERE{ { ?childNode dbp:influencedBy ?mid ; rdfs:label ?child . ?mid dbp:influencedBy ?parentNode; rdfs:label ?parent . FILTER(LANG(?parent) = "en" && ?parentNode = d:Pablo_Neruda) }UNION{ ?childNode dbp:influencedBy d:Pablo_Neruda; dbp:influencedBy ?parentNode; rdfs:label ?child . ?parentNode rdfs:label ?parent . FILTER(LANG(?parent) = "en" && ?parentNode = d:Pablo_Neruda) }UNION{ d:Pablo_Neruda rdfs:label ?child } FILTER(LANG(?child) = "en")}
  26. 26. child parent Pablo Neruda Dane Zajc Pablo Neruda Gary Soto Pablo Neruda James Tate (writer) Pablo Neruda Richard Aitson Pablo Neruda Erin Siegal Pablo Neruda Jože Snoj Dane Zajc Rudi Šeligo Dane Zajc Veno Taufer Dane Zajc Rigoberto González Gary Soto Thomas Lux James Tate (writer)html.template{{models.main|D3Dendrogram:"child,parent"}}
  27. 27. TREE STRUCTURES (2)
  28. 28. NOW YOU CREATE YOUR OWN VISUALIZATIONUse data that is of interest for youDescribe to tell a story or support a statementGive me feedback on how does visualbox works foryou