Interactive Link Visualization

• Michael Hamann
• slauriere

• Rajat Khanduri

350 hours (Large size project)

Hard

The idea of this project is to create an interactive visualization of the structure of a wiki or a part of it. This should be done in the form of a graph where nodes represent documents in the wiki and edges represent links. Such visualizations have been created for DokuWiki but also more recently developed tools like Obsidian or Roam have graph view features. The main tasks would be to:

• Develop a data source that provides link information combined with some document information. A major challenge here will be performance and rights as the data must not include any documents inaccessible to the current user. Therefore, in particular for non-admins, the graph size needs to be limited. Further, filtering options should be provided to, e.g., just consider a space or documents that have a relationship with the current document.
• Develop a client-side visualization (could be a macro) to display such a graph. The visualization should provide some interactivity and in particular the possibility to visit the displayed documents.

A good choice for the client-side visualization is probably a force-directed layout as available in D3. As there may be documents without links, special features for disjoint graphs should be considered. Another very interesting choice for the visualization is Sigma.js. Their main demo visualizes links in Wikipedia, so this is very fitting and the performance seems to be much better than D3. They also have a demo with mouse manipulation. Therefore, feature-wise for this project it seems quite similar to D3. It should be investigated how Sigma.js handles disconnected nodes and graphs with several connected components as this is not clear from the provided demos.

There are countless possibilities to further extend this project, here are just some ideas:

• Provide a Panel to display a visualization centered around the current document.
• Provide a background job to produce a dump of the relations of the whole wiki, depending on a configuration option (should be an option for admins) this dump could then be visualized just by admins or also by all users of a group or even any user without further delay. Possibly, this could also be something like a daily job to produce a new graph. Possibly, it would also make sense to offer an export option, e.g., in a file format for Gephi. This feature probably makes more sense for Sigma.js than for D3 as D3 is only suitable for small graphs but with D3 it could still be interesting with the export option.
• Display further data in the graph, like some metadata or even a preview of the content when hovering (or clicking on) nodes.
• Provide a way to cache the layout of the graph on the server such that the layout doesn't need to be re-created every time. Alternatively/additionally, the layout could also be calculated on the server.
• Provide ways to modify the color and/or shape of the nodes based on some properties like space, tags or also generically some XObject properties (could be configurable).
• Adjust the layout algorithm by adding attracting forces based on shared spaces such that documents of the same space are grouped together even if there are no links (this might be more difficult with Sigma.js).
• Make the layout algorithm configurable (adjust some of the forces), possibly even in view-mode with a live preview.

The idea is not to implement all of these ideas but rather to select and provide more details for a few of them. Of course, also new ideas are very welcome.

To get started, please complete the following tasks:

• Write a Velocity macro that displays a list of all links of the current document (hint: there is a method to get them in the Document API). You should add some (internal) links such that they are displayed in the list.
• Use the visualization library you chose to visualize these links (just the links from the current document to all linked documents, no links in-between them).

This will look boring but it can give you a first idea how to collect data and display a simple visualization. For the real project you should develop a proper API between the server and the client, for this prototype you can just generate JavaScript code in Velocity to add the links in the graph. Feel free to ask if you need any help or pointers to further documentation.

Related Resources

XWiki Extensions

• XWiki Interactive Maps Application: some code and features can be interesting for introducing facet filtering on the graph
• Page Relations: contains further Solr queries examples, and it could be useful to display such relations as well, even when backlinks are not present.

D3 Links

• Force layout: https://www.d3indepth.com/force-layout/

Other Knowledge Graphs Visualization Tools / UX

• https://obsidian.md/

Useful knowledge:

• Java for the data generation on the server side (only basics probably, might also be possible in Velocity)
• JavaScript and some SVG and CSS for creating the visualization
• A background in graph theory and graph layout certainly helps but is not required

2023

Successfully terminated