Mentor(s)
Estimated workload

350 hours (Large size project)

Difficulty

Medium

Details

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.

Developer profile

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
Active
Yes
Year

2023

Status

Proposed

Tags:
   

Get Connected