[deutsch]

Axis

An axis defines how data is graphically represented. There are spatial axes, such as abscissae and ordinates. Spatial axes are used to map data to a specific position in space. Additionally, there are color axes, opacity axes and thickness axes that can be used to visualize data with the respective graphical property.

Available axis types

Kontrast provides three (Cartesian) spatial axes:

And there are three axis types that can be used to map data to color, opacity or thickness:

How to create axes

Usually they are created inside the createGraph() like shown below (please refer also to the tutorial):

You can also create them separately.

These two code snippets are equivalent (see also object management).

Interface

The following functions and properties are common for all axis objects.

Functions

General properties

Range properties

These properties specify the minimum and maximum value (i.e. the lower and upper limit) of the axis.

Line appearance properties

These specify the properties of the line segment of the axis. lineLength is the length of the axis line. A value of 2 corresponds to the full length (since relative coordinates refer to a unit cube that ranges from -1 to 1).

Example: Appearance of Cartesian axes

Tick properties

These specify the appearance of ticks (short line segments on the axis) and labels (numbers) on the axis.

The rotation of the tick labels can be controlled using the following two properties:

Cartesian axes

The available Cartesian axes cover the types abscissa (x), ordinate (y) and applicate (z).

Please refer to the tutorial for an example of 2D graphs and to the Example: 3D coordinate system for 3D graphs.

In addition to the common functions and properties (and events) of axis objects, these objects have the following properties.

Arrow properties

These properties specify the style of the arrow head of the axis.

Grid properties

The following properties specify the style of the axis grid. You can set the grid opacity or the grid thickness to zero if you wish to hide/disable the grid. See also Example: Axis grid lines.

Positioning properties

Axes can be positioned using two types of properties: The origin and the anchor. The origin describes a coordinate within the relative coordinate system (from -1 to +1 in each dimension) of the graph. The anchor describes a position within the axis (in the relative coordinates of that object). For example, xAnchor = -1 refers to the left side of the axis and yAnchor = 1 refers to the top of the axis. The coordinates (xAnchor, yAnchor) = (0, 0) refer to the center and (xAnchor, yAnchor) = (1, 1) the top right position of the axis.

Kontrast will place the axis in such a way that the specified origin and the anchor coincide.

The following code means that the center of the ordinate is placed at the center of the graph.

The following code places the axes in a way that its lower position (yAnchor = -1, where the minimum number is shown) is placed in the middle of the graph (yOrigin = 0)

See also Example: Axis placement using origin and anchor.

The alignment of tick lines on a Cartesian axes can be determined using the following property:

Color, opacity and thickness axes

These objects are used to visualize data as color, opacity and thickness, respectively.

A simple example how to specify the values is as follows:

In this example the points (0, 1), (1, 2) and (2, 3) have the values of 4, 5 and 6 for the color axis, respectively.

Properties

Color axis

In addition to the common functions and properties (and events) of axes-objects, this object has the following properties.

Properties

These properties control the gradations of the axis. By default the gradation from color0 to color1 is used. If the data is less than min or greater than max, the colors colorBelow and colorAbove are used, respectively.

colorNaN is a color for NaN (not a number). To make more detailed gradation, stop1, stop2, stop3 and color0, ..., color4 are used.

stop1, stop2 and stop3 specify relative positions of the color axis (each from 0 to 1, in ascending order). The colors color0, ..., color4 correspond to 0 (min), stop1, stop2, stop3 and 1 (max) respectively.

If the value in a relative position of [0, stop1] of the axis, a gradient from color0 to color1 is used. Similarly if the value in a relative position between [stop1, stop2] of the axis, a gradient from color1 to color2 is used.

Examples

Opacity axis

In addition to the common functions and properties (and events) of axes-objects, this object has the following properties.

Properties

All opacity properties accept values between (and including) 0 and 1. The value 0 means that the object is invisible and a value of 1 means that the object is fully visible (opaque).

The opacity of opacityBelow / opacityAbove is used, if the value for the opacityAxis is smaller / grater than min / max. opacityMin and opacityMax are the opacity for the value of min and max respectively.

Examples

Thickness axis

In addition to the common functions and properties (and events) of axes-objects, this object has the following properties.

Properties

The thickness of thicknessBelow / thicknessAbove is used, if the value for the thicknessAxis is smaller / grater than min / max. thicknessMin and thicknessMax are the thickness for the value of min and max respectively.

Examples

Custom ticks

The tick callback function accepts a single parameter object with the properties axis, tickMap and tickSet. The callback function is not expected to return a value; any return value of the callback function is ignored.

The axis is the axis object that initiates the callback. The axis property is provided for convenience, as it might be useful to request some state of the axis (e.g. the minimum and maximum value).

The tickMap is a JavaScript Map (a key-value data structure) that contains the default ticks. The keys are the position of the tick. The values are objects with a mandatory label string property and an optional importance number property (which defaults to 0). You can remove, change or add your own ticks by adding, modifying or removing items from and to the tick map. The label string determines the displayed label of the tick. In case of tick label overlaps, the tick with the larger importance is shown.

The position of grid lines is determined by the gridSet property, which is a JavaScript Set. The values in the set are simply the positions of the grid lines. In order to add or remove grid lines, you can add or remove items to and from the set using the add(value) and delete(value) methods (or the clear() method to delete all grid lines).

Examples