Best JS libraries to help build visualisation components of RDF (using Sveltejs)

At last I’m playing with RDF and building Svelte components to visualise it! But what libs to use? Much of this will help choosing JS libs for any use case, but I’ll explain with my use case in mind.


UPDATE: for now I’ve settled on graphy.js for the following reasons:

  • seems capable at a usefully low level (for me) and well designed for the real world (supports streams and set opertations for example, with SPARQL like filters in development)
  • good balance between features and library size (at 360K overhead for my needs it’s bigger than Rdfjs/fetch but still much smaller than more capable alternatives: rdflib.js 606K, LDFlex + Comunica adds 1.4M)
  • well documented and supported, and being developed extended
  • complies with RDF/JS standards

Having failed to get rdflib working inside a Svelte component (see issue #381, but this is not the only blocker) I’m looking at other libs for fetching RDF resources and parsing them for visualisation, so easy iteration and query of a triple store is important. Later I might want to write RDF back.

There are several candidates that on scanning the repos look good. Any recommendations? I’d like advice for which will be easiest to iterate over returned triples in order to generate data for visualisation components.

The ones I’ve found are:

EDIT: There’s a handy Comparison of RDFJS libraries from the w3c, of some of these and some not mentioned.

The above was posted earlier on the Solid chat here, which added the following for consideration:

I missed both of those because I had them filed under Solid/rdflib’ rather than as generic RDF libs. But now I see there is a generic and Solid specific version of LDFlex. Tripledoc depends on solid-auth-client, might be suitable, I’m not sure but I’ll probably steer clear of it to keep things ‘svelte’ :wink: and stay generic as possible, at least for now.


Following responses on the Solid chat and seeing that rdfjs uses w3c specified types I’m liking that and also the stream support of graphy.js so I’ll start with those, but would still like to hear of any alternatives and opinions on all these options from anyone.

Thanks.

Note: related to an earlier discussion of visualisation libraries, which lead me to focus on D3 for now (Visualisation libraries in JavaScript).


UPDATE

Here are some example Svelte components, one using each of Comunica/LDFlex, rdflib.js, Rdfjs and graphy. Very simple, but may help you get started:

2 Likes

graphy.js is looking promising. I already like that it supports streaming and seems to have good docs, and it looks likely to become the default set of parsers for rdfjs, see this github discussion:

1 Like

My RDF-Easy is a possible alternative. It currently uses rdflib but I will probably change it to use communica or graphy.js at some point. You do need to know some SPARQL to use it, but if you understand RDF, SPARQL is not much more to learn on top of it.

2 Likes

I had a few problems using different RDF JS libs with Svelte so I made a repo with some working examples.

Here are some example Svelte components, one using each of Comunica/LDFlex, rdflib.js, Rdfjs and graphy. Very simple, but may help you get started:

EDIT: There’s a handy Comparison of RDFJS libraries from the w3c, of some of these and some not mentioned.

4 Likes

New example: Svelte built visualisation of RDF using d3-force is online! Uses separate Svelte components to:

  • load RDF (using graphy)
  • map RDF to objects for visualisation
  • display using d3-force on HTML Canvas

Live here: https://svelte-rdf-vis.now.sh/
Code: https://github.com/theWebalyst/svelte-rdf-vis

3 Likes

UPDATE: for now I’ve settled on graphy.js for the following reasons:

  • seems capable at a usefully low level (for me) and well designed for the real world (supports streams and set opertations for example, with SPARQL like filters in development)
  • good balance between features and library size (at 360K overhead for my needs it’s bigger than Rdfjs/fetch but still much smaller than more capable alternatives: rdflib.js 606K, LDFlex + Comunica adds 1.4M)
  • well documented and supported, and being developed extended
  • complies with RDF/JS standards
1 Like

About svelte https://www.wired.com/story/javascript-framework-puts-web-pages-diet/amp

Nice find @smag0.

Harris says Svelte is best suited for cases where performance and file sizes are particularly important, such as apps that run on smart TVs or low-power devices

That much is true but Svelte is my favourite framework for other reasons:

  • easy to learn
  • doesn’t get in the way
  • works with anything
  • encourages good design
  • knowledgeable friendly, helpful community
  • and most of all it is fun!

I think every project can learn from this. It will thrive if it is not just capable, but easy to learn and fun to use.

Aspiring to those should be as high a priority as anything else, and I’ve realised this is what I’m driving at with VisLab vlab.happybeing.com

I think few get this, and even less can achieve it. @jeffz is definitely one, and that makes him an incredible asset to Solid.

I’d like to see that recognised and his solutions promoted as a model. I’m going to try my best to emulate it but I don’t think it’s easy.

2 Likes