[deutsch]

# Tiles

Tiles are a plot object that visualizes two-dimensional data sets as color and/or opacity on a grid.

Because JavaScript does not have (fast) two-dimensional arrays, data can only be stored in one-dimensional arrays. This means that you need to keep track of the correct index access into the one-dimensional array yourself.

We recommend to use the following method: Let's assume you have a two-dimensional data set with 2 by 3 entries. The quantity associated with the count 2 is called x and the other quantity (where you have three data points for each of the two x-values) is called y. You can also think of the x-data as columns and of the y-data as rows.

When you loop over this data set (for example, if you need to evaluate some function that requires x and y as input), you can use this code snippet:

If the function is f(x, y) = x + 100 \cdot y then the resulting array from the above code is [0, 1, 100, 101, 200, 201] (see table).

 y=2 200 201 y=1 100 101 y=0 0 1 x=0 x=1

Notice that we indexed the array with x + xCount * y. In the following, we will assign the so-called contiguous type to x, because data with increasing x values are stored directly next to each other in the array. We assign the discontiguous type to the second quantity y.

## Data input

A tile represents a rectangular area. A tiles plot consists of multiple, contiguously arranged tiles arranged in a grid.

You can specify the minimum (start) and maximum (end) of the complete tiles plot on each axis. The count property allows Kontrast to split the axis range into equal parts.

In addition, you need to specify the above mentioned data layout (contiguous or discontiguous) for each dimension using the type property.

For example, a two-dimensional data set with size 2 by 3 would be specified by the following code. Note that start and end refer to the outer edges of the tiles. In the x-dimension, for example, the first tile is in the interval [0, 0.5] and the second tile in the interval [0.5, 1].

## Align tiles to pixels

You can use the alignToPixels function of a tile plot to align exactly to your screen pixels at a 1:1 scale.

The function takes one object as a parameter with the following properties:

• type: 'contiguous' | 'discontiguous'
The type determines whether the contiguous or the discontiguous axis of the tile plot is aligned.
• relativeAnchor: number (default value: 0)
A number between -1 and 1 that determines the anchor point within the tile plot that stays fixed when adjusting the corresponding axis' minimum and maximum.

## Magnification and minification

When you zoom into a tile, the whole tile will be uniformly filled by a single color/opacity (there is no smoothing/interpolation of the data). This allows to clearly identify the boundaries of the available data.

When you zoom out of a tiles plot – depending on the axis limits and the axis mapping – some (or all) tiles can be so small that they do not occupy a full pixel. In this case, a linear minification interpolation is performed. This means that the color and opacity value of a pixel is determined from a weighted average of neighboring data points.

## Interface

Please also refer to the documentation for all plot objects.

### Functions

• alignToPixels(options: object)
This function changes the minimum and maximum value of the axis corresponding to either the contiguous or the discontiguous data such that each tile occupies exactly one pixel.

### Properties

• abscissa: KontrastNumber (default value: 0)

The abscissa value used whenever no data is assigned to an abscissa.

• ordinate: KontrastNumber (default value: 0)

The ordinate value used whenever no data is assigned to an ordinate.

• applicate: KontrastNumber (default value: 0)

The applicate value used whenever no data is assigned to an applicate.

• color: KontrastColor (default value: 'black')

The color used whenever no data is assigned to a color axis.

• opacity: KontrastNumber (default value: 1)

The opacity used whenever no data is assigned to an opacity axis.

• borderColor: KontrastColor (default value: 'black')

The color of border lines. Border lines are drawn between individual tiles. The purpose of the border line is to clearly show the boundary between two neighboring tiles, even if they are drawn with the same color and opacity. For example, this facilitates to visually inspect the resolution of the data. To ensure that the border line does not interfere with the color and opacity coding of the data, the border line is only shown if the screen projection of the tile is sufficiently large.

• borderOpacity: KontrastNumber (default value: 1)

The opacity of border lines. Use a value of 0 to hide border lines.