Visualisation libraries in JavaScript


#1

I’m looking for recommendations for visualisation libraries in JavaScript. I’m going to do a search so am looking for your recommendations and warnings! I see Spoggy uses vssjs.js which looks good but there are quite a few others too.

My priorities:

  • I’m displaying RDF graphs (of course :smile:)
  • I’ll want to represent data in multiple ways (entity relationship, timeline, tabular)
  • UI is crucial (flexible, explorable, interactive: easy zoom/pan, ability to configure representation with icons/labels/attributes/styles, provide context menus, handle input events)
  • in time I’d like this to be a UI for exploring large (unlimited size?) datasets but am not expecting these libraries to be that clever - but if you know of any designed for that please say.
  • it would though be good if the library is optimised for treating large amounts of in memory data efficiently when the viewport is scaled out (eg switching to simpler representation of elements when detail cannot be discerned, so large scale icon -> simpler icon -> tiny square -> dot at very small scale)

#2

You’ve probably already heard about it, but to be sure: the main library for data visualisation in in-browser Javascript is D3.


#3

A D3 force simulation, like in https://github.com/d3/d3-force/blob/master/README.md would work.
Putting it in SVG could be added as a serialization option to rdflib.js. But for very large datasets I think some kind of 3 dimensional rendering will probably be necessary.


#4

@happybeing D3 is also used by Webvowl . They use a D3 force simulation, which I think would be not too hard to add to rdflib.js. The changes to add an svg serialization option I think can be pretty much localized to two files: serialize.js and serializer.js.


#5

Thanks everyone, D3 does look promising. I have lots to follow up from here and other places which will keep me busy.

This never occurred to me. I’m not sure if it fits for my purposes yet but I’d like to keep it in mind. Can you explain how this would be used to implement things?

I see that rdflib.js is useful for retrieving and modifying RDF resources over LDP, and that it can consume and generate (serialise) different formats, as well as creating, editing, querying RDF graphs in memory.

I’m not sure how an SVG serialisation would fit into this. I can see you could use it to generate a visualisation of a graph, and display this in an HTML document. But I’m wondering if this would make sense, rather than using D3 to provide the generation plus interaction?


#6

The code in the serializer visits the nodes and enumerates the links so you could use that to serialize to SVG, which is an XML format.

The animation itself will be written to the SVG serialization, so the interaction with the animation such as stretching links and moving nodes will be taken care of in the browser.

As for actually editing nodes, onclick events could be added to the SVG that would call some JavaScript to do that. That would maybe be better for the second iteration.

For big datasets like biologists use the graphs would get too big and detailed and slow and not so useful. But if you look at foaf in WebVowl it looks pretty good and is useful, I think.


#7

Thanks, that helps. I need to understand how these parts fit together better, so it’s time to decide what to start poking.

Feels like I’m standing looking at a large number of bears :bear:, and I have only a stick!


#8

For Spoggy, I used @jeffz solid-file-client that give me folder/subfolders/files in json and I wrote a parser to retrieve file content, that give me nodes and edges. Checking next if the node with the same label already exist, I use it else I create it


#9

Thanks, I haven’t looked at spoggy code yet. I can see it would be simple to start with solid-file-client, so quicker to get something going, but think it will be more flexible to get the graph directly: GET & parse RDF and traverse the graph directly (eg with rdflib.js).


#10

I’ve used D3 to visualize RDF a lot in the past, and indeed it is super-cool (and yeah, the force-directed graph is always going to be your go-to starting point). But I’d just forewarn you that if you haven’t used it before, it has a steep learning curve. It’s a very low-level library (meaning you can make it do almost anything!), but that also means you have to write a lot of code, and learn how all that code needs to work together. In my opinion, it’s a major time investment, but really worth it if you want a kick-ass UI.

Quick tip (I’d start out using Canvas and not SVG - you can use either, and SVG is slightly easier to work with, but Canvas will perform slightly better for small graphs (e.g. up to a couple of hundred nodes), but much better for big graphs (e.g. up to 10,000 nodes)).


#11

Thanks @pmcb55, you’ve confirmed a few things and taken my understanding forward significantly too. I’ve done some basic work on getting d3 to work in a https://svelte.dev app and found some really cool things using it to show me what it can do and how to use it. I’m fine with the learning curve (he says :roll_eyes:) and had an inkling about Canvas from a conversation on the sveltejs chat, so will aim in that direction.