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:0A 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.See also: Align tiles to pixels
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
0to hide border lines.