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.


#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