Visualisation libraries in JavaScript

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)
3 Likes

The features you’re asking for seem far to broad for a single library of course… :wink: The Wikidata Query Service seems to have all the capabilities (example; press blue button) you require. It’s using at least D3.js or something that depends upon it.

D3.js is the de facto visualization library for JavaScript, but because of its broad features it’s quite complex. It’s fast and has all kinds of data processing mechanics. There’s quite an amazing introduction to D3 here: Amelia Wattenberger. D3.js can be used to make any kind of representation including HTML tables (JS source, tabular representation you asked for :wink: ). For all the features you ask for D3.js might be worth exploring. In short: D3.js is about turning data into graphics (e.g. SVG, canvas, HTML, etc.).

Though, I’m sure there are more high-level libraries that suite your purposes but I’m not sure if there are any that fulfill all of your requirements.

4 Likes

I second D3. It’s great. It’s not sooo hard to get into (I think there’s a lot of guides for simpler graphs), and there’s a lot built atop as @bzee says. :+1:

2 Likes

Thanks both of you, D3 is looking good. Really great links there @bzee very helpful! :smile:

Am looking to combine with sveltjs at the moment to add a bit more learning, they have a great community on their discord channels.

Unless of course Maidsafe throw more API at me, when I’ll be back on that!

UPDATE:

  • I’m looking at using sveltjs to build some poc stuff (another very helpful community there!)
  • I really like the WikiDataQuery Service network graph with image icons and text that disappears at small scale, so looked for how that is generated. Some WDQS result views use d3 (tree, bubble, dimple, geo map and multi-dimensional charts) but the network is generated using ‘vis’, a package deprecated in favour of visjs (used by spoggy!). I’ll try d3 to start, but bear visjs in mind.
  • d3 has some nice editable playground stuff at observablehq.com but these don’t seem to be exportable like the sveltejs REPL examples which is a shame.
1 Like

First results! Thanks to all who commented or helped out.

D3 Force Directed Graph

The D3 Force Directed Graph example converted to Sveltejs:

Live: D3 Force Graph - svg • REPL • Svelte

Code: GitHub - happybeing/d3-fdg-svelte: d3 Force Directed Graph example (d3-force) implemented in sveltejs. REPL:

6 Likes

I now have three examples using different approaches for comparison when I increase the size of graph:

2 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: GitHub - happybeing/svelte-rdf-vis: Svelte RDF Visualisation Lab - prototype svelte visualisation components