Visualize the graph in real time

[DiellzaElshani]

Description:

Visualizing the graph is sometimes the most impressive and catchy part of the work. Therefore, I'd suggest that we also need to chose a graph visualizer. We can think of a graph database that can read our ttl file in real time and visualize it (with instances).

Id suggest something opensource and web based. I will research some options in the upcoming days. I assume our prior feature requests would be ability to: (1) visualize the graph, (2) allow SPARQL queries; (3) if possible allow reasoning and data validation too (meaning that it allows us to add also SHACL shape graphs).

One way to go would be to use the GraphDB platform. The graphBD platform allows also querying the graph and working with the data.

@danielhz feel free to suggest something.

[danielhz]

I suggest using D3 (https://d3js.org/) for visualization on the Web. Many people use it to visualize graphs. But BHoM is in C# and D3 is Javascript.

Maybe we need a custom visualizer instead of a generic one because we can define visualizations that are better for the context we are modeling. Note that large graphs are difficult to visualize. This implies we need methods to summarize the graph structure, define a starting node, navigate across the structure, and so on.

[DiellzaElshani]

@danielhz I think D3 is a good way to start. Apparently also a colleague here at ICD is using it. I would imagine that we can call D3 (use the D3 library, to build an API) directly from Rhino/Grasshopper, and visualize the graph in real time within Rhino/Grasshopper.

[alelom]

Hey guys, just some warning on D3.js. We did use D3 for some advanced visualisations in BHoM, but I believe that its use was most successful when we used it to make proper web pages rather than on-the-go visualisations. D3 is a complicated beast, even more so to interoperate with another non-frontend (i.e. not for HTML web pages) language like C#. To create a D3 graph, you need first to transform your data in a format digestible from a D3 function that creates the graph. So, in addition to the infrastructure that creates the graph, we'd need to serialize our TTL graph (or, better, its backend generator CSharpGraph) into a raw data format digestible by D3. This alone is a challenge. Then, there is the actual graph creation in D3. D3 is meant for advanced data visualisation for web frontends, so it is mostly designed to work with the DOM (the HTML). This makes it an excellent tool for advanced data visualisation on web pages, but exceedingly complicated (and, I personally would add, decisively unpleasant) for anything else. If the aim is data visualisation, and there is no constraint to build an HTML page, my personal opinion is that literally anything else is better than D3. For example, in statistical analysis, you would use libraries like MatPlotLib to visualise whatever you are doing; you would use D3 only after finishing your study, but only in case you want to publish it on the web with some embedded interactivity. I think it is very easy to underestimate how difficult D3 is, especially for non web developers.

Since we are working in .NET and not in frontend webdev, a first simple approach would be to look at .NET libraries for data visualisation. Because I don't suppose there are many of them, or of great quality, if we end up unsatisfied we could then look at alternatives, including D3 if nothing simpler can be found. A good enough starting point could be to look at GraphViz, which includes a variety of tools for non-frontend languages. From a quick search I found a .NET (C#) wrapper for it. See example visualisations here.

[alelom]

Also, what about the WebVOWL visualiser, which we already have used with some success, but this time using the TTL export?

WebVOWL is created in D3.js, and is made exactly for visualising ontologies. It would be great if we could still leverage it without having to write another D3.js solution of our own.

If WebVOWL is not enough, and if we still want to do our own visualiser using D3.js, it may be good to consider forking the WebVOWL repo and build our functionality on top of it.

[DiellzaElshani]

If GraphDB has what we need, I see that the source code of their visualizations is open in D3 libraries. https://observablehq.com/@d3/gallery.

I think GraphDB could be a good way to go. We just need to see what are the advantages and disadvantages of using GraphDB (what can we do with the free graph db; data size limit, can it be used for commercial usage, etc).

[DiellzaElshani]

Check out this approach for visualizing and querying the graph: https://lbd-hackers.github.io/slides/20221116_BILT.html#/11/1

[DiellzaElshani]

I tried again the connection to Graph DB,

What works for me:

• Opening GraphDB
• Deleting a repository in GraphDB

What doesn't work:

• Create a repository,
• Post the graph to the repository,
• Update the graph on the repository.

@polnischfrosch let me know what you think I should try.

[alelom]

Hey @DiellzaElshani , thanks for this, but this issue was a feature issue which was closed because the feature was added. When you discover a problem with a feature, please raise an appropriate bug issue. Issues are also used to measure progress, we can't reopen old ones that were already addressed if bugs are found. Same with bug issues; if a bug issue was closed, it means that at some point the bug was closed; if the bug in question comes back, still a new issue should be raised explaining how the bug has reappeared and/or what difference it has with the now-closed bug. Could you please delete your last comment and move its content to a new bug issue?