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:

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.


Please also refer to the documentation for all plot objects.