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.

View as of:
Earliest Today Latest

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

Links: Project; GitHub; Archimate.


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.

In this example, we are fixing the y-axis with a pre-defined order of capabilities and determining the optimal sequence of the x-axis. The process from raw data to the table above is as follows:

  1. Extract the unique values for the x and y axis;
  2. Determine the optimal sequences of values on the x-axis to position the same applications of the same status together in an order that is closest to the ideal desired order;
  3. Produce a table using the optimal x-axis and y-axis where cells containing multiple applications are split and applications of the same status in neighbouring cells merged.

These operations are performed in seperate calls to the library, therefore if you want a preset x and y axis, you can skip the first two steps alltogether, or substitute your own methods.

Browser support

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


Google Chrome, Mozilla Firefox and Opera all render well. Apple Safari and Microsoft Edge and IE all have rowspan table rendering issues where there are complex split cell scenarios.

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.