Stable Views

The Stable Views UI - like Soundposter - is an alternative presentation layer for Topicmaps created with DMX - The Context Machine. The graph rendering is done solely with d3.js, SVG and CSS.

I started this as a playground for creating alternative topicmap renderings in between 2016 and 2017. A snapshot release of it is installed on this website.

Live Demo

As itself is written in DMX you can view all public contents of this website in stable views at

If you want to have a look at the timeline of this websites public contents go to (Not responsive)

Just keep in mind that you're looking at prototype software which is not a usable product.

Source Code

The source code of this software is located at

If you can contribute to the development of this software please find the README file, it'll help you get started.

Inspired by the Topicmaps UI

The Topicmaps UI by Jörg Richter (@jri) inspired this work.

In short, his interface tries to build upon our visual ("... the blue bar at the top there") and situative memory ("... as i was meeting Ben for the first time.") (p. 3, Richter, 2012, Presentation at K9, Größenwahn).

In DMX people think that an item "is" or "is best described" through its relations to other items. And those relations can represent context. To be able do meaningful research with this tool we believe that this user interface needs to allow users of free placement of items and it needs to persist those visual structures (stable geometries).

Challenges for the Stable Views UI

At best, we are able to address the following, more general challenges for this type of UI:

  • comparison: e.g. allow to compare details of any two given topics
  • multi selection: allow to select and trigger commands on a set of elements
  • query-ui: allow for iterative refinement of "Search Results", e.g. in forms of "Search Buckets"
  • command line interface: text based interaction to control the ui (search and reveal topics in maps, filter in maps, search and load maps, "mail jri")
  • themes: allow to switch between many CSS definitions
  • tiled windows: enable users to tile screen space wherever possible
  • advanced search capabilities - Presenting fulltext search results with their context.

Description of difference in relation the Topicmaps UI

The difference and focus of UI research in this code repository regarding the dm4-webclient is:

  • Do not aim at being a generic solution (straightaway) but first become a configurable one
    (looking at you: topic and association types)

  • Aim at an immediate control feel for users manipulating their view

  • Enable users multi-dimensional filtering of infos (faceted navigation)
    a.k.a. introduce visualize aspects of a query which allows iterative refinement
    therefore: design stuff that directly represents a semi-structured and/or structured query and
    think of how various result-sets may be represented

  • Facilitate comparison of deep information (the "teapot" of UIs for information processing tasks / infoviz-tools)

  • Try to achieve something like reversibility of commands on infos (Undo/Redo)
    e.g. try to implement command pattern . (though this may be just too much of an effort..)

  • Design "Workspaces" as explicit (and not necessarily implicit) places in regards to "Maps"

  • Provide infrastructure to personalize client-side renderings on per user and domain base
    in terms of: color-palette active, gui-theme loaded and preferred rendering settings (map, tree)

  • Operate with per-user configuration of all presentations settings (color scheme, fonts, shapes, etc.)

  • Tiling areas in a map? How would you imagine?


Technical Overview

This bundle ships four alternative user interfaces for information created and organized with DMX:

  • Topicmaps Reader Standard - Think of nodes, edges, labels and details (SVG Circles)
  • Topicmaps Reader DMX Style - Think of nodes, edges, labels and details memex style (SVG Rectangles)
  • Timeline Search & Browser - This is actually quite useful already and was developed as an alternate plugin but is now integrated into the stableviews module. Think of twitter without any "customer magic" but with the raw power of time range queries over all your NotesContactsBookmarks and Files.
  • Hexagon Frontpage - Think of a random startup screen visualizing your personal information for further investigation, not useful at all (yet).

Note: Please keep in mind that this software is under heavy development and the screens and dialogs might not always work at all or as expected. Therefore i appreciate any help and feedback though.

Feel free to provide me some feedback in the Issues section of this repo. Everyone is welcome!


Note: Please keep in mind that this software is under heavy development and the screens and dialogs might not always work at all or as expected. That said I can only provide you "nightly builds" or so called "snapshots" of the current state without any liability for functionality.

and more specifically the latest version compatible with DeepaMehta 4.9.1


I am curious and still like to explore and get to know more about the limits of visual sense-making. For example, we know (from studies in 2008 and 2009) that creating manually arranged graph layouts is promising when we do so focussing on designing touch- or pen-based interactions. At least much more promising than focussing on delivering this UI for pointer-based interactions. Nonetheless, this graph aims to be (to some degree) controllable by keyboard interactions, too.

To be able to get there i would like to develop this GUI in a highly connective and collaborative way. I herewith seek for your help in making this possible. Please help to think through some of the details and please think about contributing anything from sketches, requirements or wishes up to code or styles.