Landscape map viewpoint

The landscape map viewpoint as a visualisation good for articulating a portfolio using three dimensions on the x-axis, y-axis and colour-coding. They can show the health of the portfolio clearly: if there is a high concentration of elements within a particular cell, then it’s typically a sign that there is redundancy; conversely if an element covers too much of the table it could be over-extended. The colour-coding speaks for itself. Knowing your domain, you will know shapes and patterns are acceptable or not.

Move the slider above left/right to change the view in time, or change the dimensions used on each axis.

Links: Project; GitHub; Archimate.

Notes

The application landscape map viewpoint above is auto-generated from a CSV file containing information about applications and the context in which they are used. The landscape maps viewpoint conveys a great deal of information in a compact form, showing the health of a domain clearly and consisely. For more information see the Archimate architecture viewpoints documentation. They resemble a pivot table, but with content from the underlying data displayed rather than aggregates.

Two libraries are used: @steelbreeze/pivot and @steelbreeze/landscape.

The first is used to pivot the source data into a cube based on the selected x and y axes. The axes and cube is the landscape library, but they could equally be used for numerical reporting.

The second is used to render the results. As a cell in a cube may contain multiple values, we first create duplicate rows or columns to provide only single values in any table cell, we then merge adjacent cells with the same value to provide the resultant table.

Browser support

The layout engine is writtin in TypeScript and transpiled into JavaScript ES6; it should therefore work in any modern browser. The json data in this example is loaded with window.fetch therefore a polyfil is required for older browsers.

Outstanding work

Create a seperate standalone tool to create optimal axes where this is too time consuming to do in real time.

Further optimisations to the axes optimisation algorithm.

Split cells with multiple application horizontally and vertically for optimal layout.

Smarter ordering of split cells to expliot affinity with neighbouring cells.

Base the date slider max and min values based on the underlying data.