Benedikt Groß profile image

Works antidisciplinarily, is a speculative and a computational designer.
He currently lives in Ravensburg / Stuttgart.

related pages – inhaltliche nähe

tagged as:

Cooperation between Ronald The and Benedikt Groß. The project “related pages” is part of the wiki project, see full context here.

Visualization of the proximity of the content. Press reload to load a new random set

Page context (

The proximity of the content aims at offering to the user an alternative possibility to navigate across the wiki Contrary to the conventional hierarchical way to navigate which you can find below “menu” – the focus of that kind of navigation is on the proximity of the content.



  • drag’n’drop: move and fix the nodes
  • click: opens the hyperlink
  • alt-click: break the fixation of the node
  • Cmd/strg-click: opens the hyperlink in a new window

Proximity calculation

For the calculation of the proximity of the content we primarily needed the necessary data which are provided by the Wiki. This happens by the following way:
We query the data bank as followed: (simplified example) “dear data bank; please search all the pages in our Wiki that fulfil the following conditions”:

  • at least 1 tag in common with the current page
  • pages, that are linked to the current page
  • pages, that are linked with outgoing links on the current page
  • pages, that are at a level above in the breadcrumb-navigation

For all the Wikipages that were found, we now will calculate the Tanimoto coefficient to our current page. The Tanimoto coefficient represents the accordance of 2 sets of categories to each other. Example:
The Tanimoto coefficient of the following 2 sets

A: dog, cat, tree
B: dog, cat, house
Is 0,666

By applying now these calculated results; we are now able to place, categorize and filter all the provided Wikipages:

  • nodes with links or back links to other nodes will be set on a higher rank
  • by applying the Tanimoto coefficient, we are now able to create a ranking of all the nodes
  • only nodes which correspond more than 5% to the conditions of the central node shall be provided

All the pages that fulfilled these conditions represent now our data basis in order to create our visualisation. The quality of our system depends always on the quality of the authors’ categorisation, because, without having tags we are not able to make any conclusions about the relation of the contents.


The red node represents our current page. We call this our central node. The coloured codification – 3 different tones of grey – represent the moment of the last update (view also the legend). Principally, the distance between the nodes represents the distance of the content. Neighboured nodes therefore have the highest agreement. The branching structure of our visualisation is found because we are going in strict rotation through our ranking (ranked after the similarity to our current page). By applying the Tanimoto coefficient we are now trying at every step to find the node that fits the best and to link it afterwards with our current page. We repeat this step until we went through our complete ranking and until all the nodes are created. The positioning of the nodes is calculated by a so-called “force directed layout algorithm”. The idea is that every node repels automatically all the other nodes and every brink behave like a virtual feather. The system tries automatically to achieve a relaxed condition. That is why this algorithm is often used to create networks out of graphs.

XML interface

The data concerning the proximity of the content of a certain page are provided by a simple web service. Consequently, they easily can be found and read by a standard http search. They also can be used by every other application: The data are transferred by using a xml file.

Http Query

The http query is always done by adding “/naehe.xml after the url of a page of the Wiki.

Example: For the current page “medienlabor/inhaltliche-naehe” the url has to be

XML Structure

For our current visualisation; we only have used a part of the provided data. We defined the interface as general as possible to allow creating a lot of different visualisations. The structure of a XML file is always categorized as followed:

  • <naehe> root node, the highest point in the hierarchy
  • <wiki_categories> all the tags of the Wiki (we didn’t use that in our current visualisation)
  • <centralnode> the current page
  • <breadcrumbs> all the pages of our Wiki that are higher in the hierarchy of the breadcrumb navigation
  • <wiki_link_related> all the pages that are linked to our current page of the Wiki
  • <category_related> all the other pages of the Wiki which possess an intersection of the tags to our current page


Complete sourcecode Flex (AS 3) Project (16/12/2008).


  • Visualizing Data, First Edition by Ben Fry. Copyright 2008 Ben Fry, 9780596514556.
  • XPath implementation for ActionScript 3.0
  • German translation of this post