Search code examples
user-interfacedata-structuresconceptual

Hierarchical structure representation on a WebPage

I am working on some reseaech which subject is to find a proper way to represent a hierarchical structure on a simple web page. Precision : It's a huge amount of data.

Let have some contextualisation first : Let say you have a company which is composed departements which contains several employees...

What is commonly used :

Tree architecture :

Tree architecture (example)

But I don't like it because if you have a huge amount of data, expanding and collapsing if you are looking for several objects it might be tricky...

2 others approaches that might bring some flexibility :

Circles Mode :

Circle Mode (example)

and Nodes Mode :

Nodes example

One functionality that I think can help the final user is an Elastic Search bar, but the goal here is to bring some flexibility for the user to navigate through the structure.

I wants to use JSF but the technology doesn't really matter here, it'sa conceptual phase.

Please share your opinons, ideas, trails... ?

Solution

  • It sounds like you are looking for Tree drawing algorithms. Let me give a short overview:

    In graph drawing, you can basically describe a drawing by three groups of properties:

    • Your drawing conventions, i.e. how the nodes and edges are represented in your visualization. Possible choices are:

      • Represent your nodes as points, your edges as non-intersecting curves between them.
        This might be specialized by e.g. requiring the points to be placed on a regular grid, on concentric circles around the root or something similar. Also, you could require the edges to be straight lines, circle args, ...
        This is probably what you first think of when you talk about tree visualizations. straight-line drawing, from "Trees with convex faces and optimal angles." J. Carlson and D. Eppstein. arXiv:cs.CG/0607113. 14th Int. Symp. Graph Drawing, Karlsruhe, Germany, 2006. Lecture Notes in Comp. Sci. 4372, 2007, pp. 77-88.
      • Represent your nodes as rectangles, your edges implicitly by nesting the rectangles. This is commonly known as a tree map tree map, from Wikipedia

    • Some aesthetics you want to optimize, i.e.

      • Maximize angles between edges
      • Minimize the area the tree takes
      • Minimize the potential energy if you build a physical model based on the tree (see Wikipedia: Force-directed graph drawing)
        ...

    • You might also place some constraints on your nodes or edges, e.g. fix certain nodes to a position, enforce certain edge lengths or similar ideas.

    Now that I've explained the basics, let me list some approaches:

    • As you already showed, draw your tree in a circle-based fashion, either by placing the root at the center and the children in concentric circles around the root or aligning all subtrees of a node in circular fashion around it. These are implemented in the GraphViz tool as circo and twopi
    • Use an HV layout similar to your tree view to mostly stick with horizontal and vertical edges, but allow for a bit more freedom in the subtree placement HV layout, from the goblin2 documentation
    • Use any of the many straight-line drawing techniques that operate level-wise, i.e. the root is placed at the top, its children one level below, ... level-wise graph drawing
    • Represent your tree as a tree map similar to the example above.

    Most if not all of these techniques are described and visualized in the Tree-drawing chapter of the Handbook of Graph Drawing and Visualization by Tassima et. al.