Cabinet trees for visualising a PSL


Download September 2015 version PDF; March 2015 version PDF


Possibly the best method for visualising a Project Sustainability Logbook is to use the recently developed cabinet tree approach, especially if it is rendered elastic by having separate visualisations for the main part of the logbook and for the indicator-related information. Unfortunately, unlike some other PSL visualisations, sufficiently powerful Javascript visualisation libraries are not yet available to allow implementation as a web-based application.


A Project (or Programme) Sustainability Logbook (PSL) is a structured support tool that allows a user to define the issues and objectives of sustainable development for a programme or for a building or a facility, or a group of buildings or facilities.

The logbook comprises a series of tables comprising an overall monitoring table followed by a table for each of the phases of a project or programme (typically planning, design, construction, operation , and end-of life).

Overall performance targets for selected sustainability themes are prioritised in the overall monitoring table using targets, assessment methods and benchmarks taken from reference frameworks. These targets are presented as indicators. Assessment methods, targets and indicators will evolve as a project or programme moves through its various phases.

A PSL logbook therefore has a deep hierarchical structure comprising four sustainability dimensions, 13 themes, three to four issues or objectives per theme, one or more targets per theme, one or more reference frameworks per target, and finally an assessment method, benchmarks and an indicator for one or more indicators per target.

So there are eight levels in the hierarchy and normally one would expect to have at lease two issues or objectives for each dimension of sustainability, yielding approximately at least 16 indicator values which are tracked through five project phases using a overall monitoring table as the starting point and overview.

A PSL can be set up online using the PSL website and offline using an Excel workbook that is supplied on purchasing printed versions of the PSL documentation from the FIDIC website.

Visualising the entire structure while supporting deep exploration at different levels of granularity is needed for effectively managing a logbook and identifying key parameters.

Several online tools for visualising an entire PSL and for monitoring indicators are being explored.

1. Treemapping

Enclosure or space-filling visualisation such as treemapping visualises large tree structures through enclosure partitioning for space utilisation. Treemapping works by dividing the display area into a nested sequence of rectangles (or polygons for the difficult-to-understand Voronoi treemaps) whose areas correspond to an attribute of the dataset, effectively combining aspects of a Venn diagram and a pie chart.

Treemapping contrasts with traditional static methods for displaying hierarchically structured information, which generally make either poor use of display space or hide much useful information. The various common tree representations of hierarchical structures are illustrated in Fig. 1.

Added September 2015: It should be noted that this article focuses on two-dimensional tree representations. Three-dimensional representations may offer some interesting possibilities. These will be discussed separately, noting that Nitaku (2015) has developed an isometric treemap using the d3.js Javascript visualisation library referred to below.

Common tree maps

Fig.1 - Common tree representations, each showing a tree in a different way (from Zhao et al, PDF).

Originally designed to visualise files on a computer's hard drive, treemaps have been applied to a wide variety of areas ranging from financial analysis, sport reporting, image browsing and software analysis.

The original treemap was rectangular and used a "slice and dice" approach. More recent variations include squarified, ordered and quantum types.

2. Other mapping approaches

Although space-filling is useful for visualising large hierarchies, most treemapping techniques do not show the relational structure explicitly. It requires extra effort for viewers to perceive and understand the relational structures that are implicit in the enclosure.

Partition Icicle

Fig. 2 - Partition table (left) and icicle chart (right).

Sunburst, space optimised tree, elastic tree

Fig. 3 - Examples of a sunburst (top left), a space optimised tree (top right) and an elastic treemap combining node links and treemaps (from Yang et al).

There are however visualisation approaches apart from rectangular partition tables and the closely related icicle charts (Fig. 2) that combine both enclosure and the links between nodes into a visualisation, notably (see Fig. 3):

  • circular sunbursts that convey both area and structure using a circular or radial space-filling layout methodology (but where the poor use of space utilisation remains a major issue);
  • space-optimised trees that use an explicit node-link style while each non-leaf node subdivides its area for its child nodes (it is noted however, that the polygons of various shapes and their relationships are hard to perceive);
  • elastic hierarchies that combine node links and treemapping in a straightforward manner (but where the poor use of space remains a major issue).

3. Zooming

Whatever visualisation approach is adopted, for online use a user must be able to zoom in on a specific node in the hierarchy without becoming disoriented.

With the emergence of powerful Javascript libraries such as d3.js, it has been possible to create web-based zoomable partition tables and sunbursts that can be viewed on- and offline using a standard web browser.

4. Cabinet trees

Cabinet tree basis

Fig. 4 - Interleaved horizontal-vertical partitioning, the basis of cabinet trees (from Yang et al, PDF)

A cabinet tree is new type of space-filled treemap for visualising hierarchical data. Fig. 4 from Yang et al, PDF illustrates how a node tree is converted into a cabinet tree by means of interleaved horizontal and vertical partitioning.

Yang et al report that compared to other types of treemaps, cabinet trees generally perform better (they are more compact and scale better as the amount of data increases).

PSL cabinet tree

Fig. 5 - A cabinet tree visualisation of a representative PSL.

Fig. 5 illustrates how a fully exploded cabinet tree for a representative PSL could look like. In this case the parameters are: 4 dimensions, 2 themes per dimension, 2 issues or objectives per theme each with 1 reference framework and 2 targets, each with the response and indicators for overall target performance (designated "O") and the response and indicators for each of the phases (designated "P" for "Planning", etc.).

Added September 2015: Recently, Yang et at (2015) (PDF download) have reported further details on the scalability of cabinet trees. A cabinet tree has also be programmed in Javascript at cabinet-tree.yalongyang.com.

5. Zoomable cabinet trees

As an online working tool the cabinet tree should be zoomable. Unfortunately, Javascript libraries have not been developed to the point that a zoomable cabinet tree is feasible. However, progress is in the right direction. For instance the d3plus.js library allows the nesting of cells. Apparently it will soon also be possible to specify the order in which cells appear, at which point it may be feasible to develop a zoomable cabinet tree.

6. Visualisation

Compared with partition tables and sunbursts that have the indicators along one edge (partition table) or around the circumference (sunburst), cabinet trees centralise the indicators (at the centres of four areas in the case of a PSL with the normal four PSL sustainability dimensions). This makes for a visually pleasing, holistic and focussed view of the indicators and their evolution over the project phases.

Aside from the consideration of the location of indicators, discussed below, sunbursts are good at conveying an overall view of a logbook but suffer from showing a large empty central area. Cabinet trees on the other hand give the same overall perspective without the empty space.

7. Elastic cabinet trees

Unlike other hierarchical visualisations, with cabinet trees it should be possible to zoom in on the indicator-related cells without expanding the other cells. This would make for a much improved tool for reporting performance.

This mixing of zoom behaviours is in effect equivalent to an elastic cabinet tree which resembles the elastic treemaps developed by Zhao et al.

The use of elastic tree and cabinet maps to visualise a PSL will be discussed in detail elsewhere as an alternative visualisation approach.

Given that Javascript libraries have not yet reached the point that elastic mapping can be implemented it is envisaged that an elastic cabinet map for PSL visualisation must be relatively simple if there is to be any chance of implementation within a reasonable timeframe.

One such simple approach, illustrated in Fig. 6, is to have the indicator-related cells appear in a separate cabinet tree, maybe superimposed upon the main cabinet tree. Of course, any of the various methods for visualising hierarchies could be used for the indicator-related cells.

PSL elastic cabinet tree

Fig. 6 - A simple elastic cabinet tree for PSL visualisation (indicator related cells are displayed in a separate cabinet tree at the top).

Added September 2015: Recently (2015), Nitaku has developed an improved (Version 2) "Treemap Navigator" (Version 1; Version 2) using the d3.js Javascript library that allows a treemap node to be exploded into a separate treemap that can be closed down by clicking the mother node. This was then improved (see also) to allow the exploded treemap to be collapsed.

Visual Funding Navigator

Fig. 7 - The Visual Funding Navigator

Added March 2018:: An alternative would be to use a Visual Funding Navigator (see PDF), a labelled 2.5D treemap, that is built using the d3.js Treemap Navigator, possible combined with the cascaded treemap.

Added September 2015: A website (Tree Visualization Techniques) also now gives a good overview of the different types of treemaps, some of which include elastic-type approaches (e.g., Elastic Hierarchies). These include connected semicircles for sunbursts and elastic sunbursts (Site; PDF; PDF; Site) that are usually called sunbursts with focus + context display. Three standard approaches (angular detail; detail inside; detail outside) are proposed for elastic sunbursts, with each having different advantages and disadvantages. None of the elastic sunburst approaches has reportedly been developed as a browser-based version using d3.js.

8. Demonstrations

A website illustrates the use of partition tables and sunbursts for visualising a PSL. It is hoped that a cabinet tree visualisation built using Javascript libraries will shortly be possible.

Added September 2015: This possibility has come nearer with the development of a Javascript cabinet tree and elastic treemaps using d3.js.

Added September 2015: It may also be useful to re-examine elastic sunbursts.

Further information

The PSL is developed, maintained and published jointly by the European Federation of Engineering Consultancy Associations (EFCA) and the International Federation of Consulting Engineers (FIDIC).

For further information about PSL visualisation, please consult the PSL projects website or contact Peter Boswell.

Version: 18 March 2015
Updated: 8 September 2015