Visualisation Lab - early prototype

Apps
,
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.

This is working purely on the web for now but but will appear on SAFE in time, which using Svelte should make easy.

Live Demos

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

‘Latest’ has some more SPARQL queries but you need to turn CORS checks off in the browser to use some of 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 SAfe Network and the Web:

20200213_143705270

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.

29 Likes
2

Visual Grammars

I’m looking for common standards for modelling data ready for visualisation as graph, tree, various charts etc but not finding much yet. If you know of any standards or places where models are well documented please let me know.

The alternative is to use what appear to be informal conventions such as { nodes [], links: [] } as used by d3 and others for a graph model in JSON.

So far I’ve not found any standards and very few well documented proprietary models. I found:

  • a defunct w3c group
  • piecemeal proprietary docs
  • vizJSON (IBM standard never published, used by RAVE)
  • Vega ‘visualisation grammar’ plus oodles of tools, libs,apps etc

Vega and Vega Lite

Vega looks promising - with documented models for a wide range of visualisations and backend and/or client side (Vega Lite) engines to render them. I’ve not had a chance to examine it yet as there is so much to that project. Very interesting indeed:

UPDATE: Vega / Vega Lite look very much what I need (“candidates for a lingua franca of data visualistion”). I’ve been playing, reading and chatting (to Dominik see video) and its both a very useful set of things to use for any visualisation project, and a good basis for my planned visualisation lab. They have their own visualisation lab like tool called Voyager (towards the end of the video) but that and Vega don’t yet overlap with my main area of interest (interaction with, exporation of, and editing of graph data/databases), but the two approaches will fit together very well and enable me and anyone to quickly add support for some very nice visual presentation and analysis, with great UI/UX.

Get up to speed on Vega and Vega Lite in 30 mins with this presentation:

UPDATE2: 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:

UPDATE 3:
I just published an early version of the JSON ViewModel Specification which is being developed along with Visualisation Lab.

Feedback welcome, see: JSON ViewModel Specification · happybeing/visualisation-lab Wiki · GitHub

5 Likes
3

Interesting and amazing this is not a bigger “thing” considering all the use cases for such tools.

6 Likes
4

“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 SAfe Network and the Web:

20200213_143705270

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.

4 Likes
5

The mobile version of that Covid19 is nice design… though keeps refreshing…

https://gisanddata.maps.arcgis.com/apps/opsdashboard/index.html#/85320e2ea5424dfaaa75ae62e5c06e61

1 Like
6

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:

3 Likes
7

Great data visualization.

8

Doesn’t build for me - I get webpack errors

code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/user/Documents/svelte-vega-eval/node_modules/webpack-dev-server/bin/webpack-dev-server.js'

Did you find this?

9

builds OK for me on Ubuntu 18.04 node v12.4.0 yarn v1.19.1 (with warning)

but then …
image

Probably something simple… I did this while finishing my dinner, I’ll look harder after I polish off my pudding :slight_smile:

EDIT: Is there a quick edit to make it run on another port? Its not in webpack.config.js… and grep -rn "8080" is err… chatty
I have Jenkins on localhost:8080 and a few things point to that right now - I disabled Jenkins to have a quick shufti here but I want to have that running again soon.

10

Yep working here OK after I upgraded yarn to 1.22.0

image
image625×963 70.7 KB

2 Likes
11

Thanks for the tip. Reinstalling yarn did the trick. That’s the power of pudding.

2 Likes
12

Every geek should have their lemon meringue pie before approaching the keyboard.

2 Likes
13

Update on Vega / Vega Lite
Vega / Vega Lite look very much what I need (“candidates for a lingua franca of data visualistion”). I’ve been playing, reading and chatting (to Dominik see video) and its both a very useful set of things to use for any visualisation project, and a good basis for my planned visualisation lab. They have their own visualisation lab like tool called Voyager (towards the end of the video) but that and Vega don’t yet overlap with my main area of interest (interaction with, exporation of, and editing of graph data/databases), but the two approaches will fit together very well and enable me and anyone to quickly add support for some very nice visual presentation and analysis, with great UI/UX.

Get up to speed on Vega and Vega Lite in 30 mins with this presentation:

1 Like
14

Update on 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:

4 Likes
15

I get an error trying to load a dataset JSON.parse: unexpected character at line 1 column 1 of the JSON data

1 Like
16

Glad you are trying it out John :slightly_smiling_face: and finding the bugs as usual!

This bug seems to be a problem if you use the Zeit deployed Voyager, but not if you run a local server. You can though load local files into either local or Zeit. This and some other minor issues are noted in the README.

So if you don’t want run it locally you need to first get the vega-datasets on your device, and then load them into Voyager from your device. If you just want to play with Voyager, use the Vega one via their site (also linked in my github repo).

Good luck - I think Voyager is an impressive tool.

2 Likes
17

Ah yes. Classic case of RTFM! Have downloaded a dataset now and it works as you suggest.

What are your plans by the way, or would that be giving too much away?

2 Likes
18

Glad you got it working :partying_face:

I’m exploring what’s out there and how I can pull things together. My interest is in creating a great UX for exploring, understanding and mutating data interactively.

I’m particularly interested in graphs - relational data - which is one reason I’m interested in RDF although having begun to look into it I see it needs improving in some areas, and there are moves to do this (cf. RDF*).

But graphs are only a small part of visualisation and analysis, so Vega and Voyager are great because, I believe, they make it relatively easy to add a wide range of options alongside the relational UX which I have some experience of developing. And they also provide the basis for a common standard for representing data to be visualised (the Vega and Vega Lite JSON schemas), which is why I stumbled on them.

TLDR: I’d like to build an interactive visual UI for working with data of all kinds, from a variety of sources with an exceptional UX. And have fun doing it! :slightly_smiling_face:

3 Likes
19

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 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

6 Likes
20

Saw this on hacker news today, maybe something useful

1 Like