Layout

This article describes how to layout figures and graphs. We will discuss how to include multiple graphs into a figure and how to best display 3D coordinate systems.

As Kontrast visualizations are interactive, there are some aspects to keep in mind so that your visualizations looks well on a multitude of devices: For example, if a viewer of your visualization zooms into an axis, the length of the axis tick labels usually changes. This needs to be considered in the layout.

Additionally, your visualizations can be viewed on screens with different sizes, orientations and resolutions. Viewers of your visualizations can switch the figure to full screen, full window and full graph modes.

This means that there is not one fixed, static layout but rather a set of rules that tries to achieve a dynamic layout in all these different situations.

Figure layout

A figure is placed within a corresponding HTML element (specified by the element property). When the figure is embedded in the page, the HTML element determines the size of the figure when it is displayed within the page. You can use CSS to determine how the figure elements fits within the rest of the page.

In typical cases you would set either width: 100% and/or height: 100% to place the figure within the full width or height of its parent element. You could also use CSS properties like width: 300px to choose an absolute width or you could use height: 100vh so that the height of the figure is as large as the height of your browser window. You can read more about relative and absolute element placement using CSS in the MDN article on the CSS box model

Fixed figure aspect ratio

Relative units for the width and height CSS properties always refer to the parent element. They do not refer to the aspect ratio of the figure (the ratio of the figure width relative to its height). However, you can fix the aspect ratio of the figure using the following CSS:

If you specified the width of the figure (for example using width: 100%), you can specify a height relative to the width using a percentage value in either the padding-top or padding-bottom CSS property.

Alternatively, if you specified the height of the figure (for example using height: 100%), you can specify a width relative to the height using a percentage value in either the padding-left or padding-right CSS property.

Zones

Each graph consists of 9 zones: There is the 'inside' zone in the middle and additionally the 'top-left', 'top', 'top-right', 'left', 'right', 'bottom-left', 'bottom' and 'bottom-right' zones.

`'top-left'`	`'top'`	`'top-right'`
`'left'`	`'inside'`	`'right'`
`'bottom-left'`	`'bottom'`	`'bottom-right'`

All Cartesian axes are automatically placed in the 'inside' zone. Color, opacity and thickness axes as well as annotations (i.e., text labels, titles, …) can be placed within any zone using their 'zone' property.

The following examples use the zone property for color axes and/or annotations:

Placing graphs within the figure

Kontrast tries to satisfy the following criteria when determining the graph layout within the figure:

The size of the graphs within the figure should be as large as possible.
If a fixed aspect ratio has been defined for a graph, that aspect ratio must be maintained.
The width of all graphs within a single row should be equal and the height of all graphs within a single column should be equal, if possible.
The space required by any axis labels and annotations must be reserved.

Rotating graphs

A common problem with 2D and 3D graphs that can be freely rotated is that — depending on the rotation angles — their space requirements can differ. For this reason, you can preemptively scale the graph size using the cubeScale factor. If you intend to rotate the graph in the screen plane only, a factor of $1 / \sqrt{2}$ (the inverse length of the diagonal) is a good choice. For the 3D case, a value of $1 / \sqrt{3}$ (the inverse length of the cube diagonal) works well.

2D rotation: Use the keyboard shortcuts Q / E to rotate the gamma angle to rotate the graph around the screen normal.