- I’m displaying RDF graphs (of course )
- 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)
The features you’re asking for seem far to broad for a single library of course… 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.
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.
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.
Thanks both of you, D3 is looking good. Really great links there @bzee very helpful!
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!
- 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.
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:
I now have three examples using different approaches for comparison when I increase the size of graph:
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