View as of:
Earliest Today Latest

Links: Project; GitHub; Archimate.

Notes

The application landscape map viewpoint above is auto-generated from a JSON 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.

Rendering

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

Split cells with multiple application horizontally in addition to vertically if preferable.

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

Style of date slider in IE.

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