Visualization Lab - early prototype


#1

Visualisation Lab creeps towards usefulness…

  • load data from web (LDP or SPARQL)
  • load data from local file
  • load built in test using RDF
  • load built in test using JSON

The aim is to help visualise, explore and edit the semantic Web, but for now you can use it to get very simple graphs from local RDF files or data loaded from the web including Solid pods.

Forgive the styling - this is very early code.

Older: https://visualisation-lab.now.sh/
Latest: http://vlab.happybeing.com/

Update - latest has some more SPARQL queries but you need to turn CORS checks off in the browser to use them (eg CORS Everywhere add-on in Firefox).

“Where we’re going we don’t need roads”

Here’s a hint of where I’m headed and what we can create together if you join me (also very handy for tracking the coronavirus):

20200213_143323730
link

And using Svelte with a component like svelte-grid (try the link below, it’s fun :slightly_smiling_face:) we can add views, resize them, drag them around to make a versatile visual workbench for all kinds of data on Solid, SAFE Network and the Web:

20200213_143705270
https://svelte-grid.now.sh/

Code

Join me, lots of scope to learn about exciting technology here from basic web stuff, the up and coming svelte framework, RDF/Linked Data/Semantic Web, visualisation etc.


An idea for incremental UX
#2

Visualisation Lab now has a bunch of sample SPARQL queries (courtesy of d3sparql.js). Select from the drop-list on the right and run. You can edit the query or create one from scratch.

Brought to life with Svelte, RDF/LinkedData and SPARQL!

Older: https://visualisation-lab.now.sh/
Latest: http://vlab.happybeing.com/

Update - latest has some more SPARQL queries but you need to turn CORS checks off in the browser to use them (eg CORS Everywhere add-on in Firefox).


#3

Nice, it seems to work on mobile device

:+1::muscle:


#4

Cool, thanks for trying it out. I don’t think I’ve tried it on mobile myself yet! Not sure why the coloured area is all squashed on the left, they should be full width.


#5

good!try load “https://eureka.name/profile/card” success


#6

“Where we’re going we don’t need roads”

Here’s a hint of where I’m headed and what we can create together if you join me (also very handy for tracking the coronavirus):

20200213_143323730
link

And using Svelte with a component like svelte-grid (try the link below, it’s fun :slightly_smiling_face:) we can add views, resize them, drag them around to make a versatile visual workbench for all kinds of data on Solid, SAFE Network and the Web:

20200213_143705270
https://svelte-grid.now.sh/

Code

Join me, lots of scope to learn about exciting technology here from basic web stuff, the up and coming svelte framework, RDF/Linked Data/Semantic Web, visualisation etc.


#7

Looking for ways to standardise the visual model I’ve been playing with Vega and Vega Lite in Svelte

Lots to learn (which is fun) and lots to like, with much help from Dominik in the Vega community

Demo: https://svelte-vega-eval.now.sh/

Code:

Update: Vega Voyager

Voyager is an advanced but very easy to use Vega visualisation and analysis application that can be embedded as a component, and which I’ve embedded in a Svelte app.

Here’s a six minute screencase showing Voyager in action:

Here’s the Svelte app which includes Voyager:


Common standards for visual data representation
#8

Update on Visualisation with Vega and Vega Lite

I’ve been doing more playing with Vega/Vega-Lite, even debugging them! I have eight different visualisations using on different data, again using Svelte

Next: use a single RDF source with output to all of the different visualisations.

Demo: https://svelte-vega-lite-eval.now.sh/
Code: branch test-visualisation-components

UPDATE:

UPDATE 1st April 2020
Quite a lot has happened to VisLab since my last post. You can use it to view the latest COVID-19 data for whichever countries you choose for example (and can zoom and pan the graph with the mouse).

Just now though I’ve been learning SPARQL so I can create interactive UIs which query sources like dbPedia.

So this is not strictly Solid, but related because SPARQL is a query language for Linked Data and you can also use VisLab to visualise the data on your Solid pod (very crudely for now).

dbPedia Example

Using dbPedia’s SPARQL endpoint I’ve made an example which creates a graph for Cnut the Great.

Try at: http://vlab.happybeing.com

  • ‘SPARQL Query’ in first drop down
  • ‘Cnut the Great and relatives’ in second drop down
  • `Run Query’
  • Scroll down for graph (click/drag/hove nodes)
  • Uncheck ‘Show only the following fields’ to see the triples.

Feedback welcome!


#9

Hi,

Visualisation Lab is really cool. You are amazing with all this. Hope you don’t mind my nitpicking, but I can’t see any labels. I’m using Safari.

I don’t know anything about Cnut, but maybe the labels will help me understand why he was so great :slight_smile:

I wanted to try to help with your Sparql query, but its been a couple of years since I used it and I’ve forgotten a lot of it. I remember how hard it was to get used to the idea of selecting everything declaratively. My memory of this is vague, but I think at one point I even wrote some filters in Javascript, which you can do with Jena, so that I could select things imperatively.


#10

As far as I used it Jena is Java. Did you get it working with JavaScript?


#11

Yeah sorry you’re right, it was Java. My memory is not so good.


#12

Glad you tried it. All feedback is welcome but don’t expect anything polished - I’m just publishing the test code as I go along and haven’t go to adding labels yet, although if you hover over a node it will show a tooltip.

Not much else yet although I have begun to display nodes differently depending on the properties, and can use an image for the node if one is present. Those changes aren’t pushed yet though. I’m going to build a simple query interface for it next which will make it a bit more useful, but am busy with other stuff for today.

I’m getting the hang of SPARQL. You’re right it is a bit strange at first, but I like it. The docs and examples are not great though - more written from the viewpoint of the implementation than end user - but now I’ve got off the ground it is getting easier.


#13

Two new features in VisLab - now almost useful :wink:

  1. Search dbPedia for People
  2. Network graph shows type/gender, photo and rulership!

Try it: vlab.happybeing.com
Tip: hover over nodes.

More dbPedia searches in preparation.


#14

Still working on this but its now a useful tool so it would be great if any of you would like to have a play and offer feedback or suggestions. Questions too of course.

It’s a SPARQL endpoint interrogator which I’ve been adding to VisLab. Wut?

A SPARQL endpoint is like a public database of semantic information you can query. Which is like Wikipedia but for computers, in a language which conveys the meaning not just the data. In fact one of the sources is very like Wikipedia - dbPedia, and there’s also Wikidata. Both in the table so you can find them from there if you want to follow up.

What this does is scan these ‘endpoints’ and tell you if they work (many have disappeared over the years) and roughly what you can do with them. There’s a lot more I hope to do - such as indicate what kind of data they hold and how to ask questions about it. It is pretty basic for now so I’m interested in how much sense people can make of what is there so far, how it looks, the UI etc. So not just for SPARQL and Semantic Web folks.

All levels of feedback are welcome. Don’t be afraid, just polite! :smile:

Try it here: http://vlab.happybeing.com


#15

It is really great that you are doing this and I really admire how you’re not letting all the chaos out there get in your way. Please let me know if I’m not polite, I try to be, but sometimes I’m just clumsy.

Anyway, I’m getting blanks on those fields I see in your view are filled in:


#16

You need to click ‘Update Table’. Can you think how to make that clear? Ideally without writing instructions although I expect some will be needed, but if you have any other suggestions please let me know. There are several features that might need explaining so I’ll be interested to see what people discover themselves and anything they miss.

Thanks for trying it out and posting about it. This is very helpful! :smile: (and polite :wink:).

PS Can you tell me what device, OS and browser you are using. Useful to gather to see how well it works. I see the control showing ‘SPARQL 1.0’ only shows a single item for you whereas for me it is a list, which is important because you can select multiple items in there!


#17

I don’t know why I didn’t think to click ‘update table’ :crazy_face:. Maybe put it at the top and say ‘To begin, click ‘Update Table’’ for idiots like me :blush:.

I did and it now looks like this:

I’m using an Ipad with Firefox. The touch screen makes working with the databrowser impossible.

Its not clear to me what the columns mean and what the yes and no mean. Maybe you could put a short explanation at the bottom.

The ‘Sparql 1.0’ drop down has choices like the when you press the three dots next to it:

I’ll play with it some more later…


#18

Cool please do and your narrative comments are very useful thanks. I could explain more but initially its very helpful to know where things are not obvious.