Skip to main content

Heatmap

The data that describes the heatmap value-to-color mapping is set in z. Data in z can either be multiple grid columns of values (ragged or not) (2D list) or a single grid column of values. In the case where z is a 2D list, say that z has N rows and M columns. Then, by default, the resulting heatmap will have N partitions along the y axis and M partitions along the x axis. In other words, the i-th row/ j-th column cell in z is mapped to the i-th partition of the y axis (starting from the bottom of the plot) and the j-th partition of the x-axis (starting from the left of the plot). Moreover, x (y) can be provided with M or M+1 (N or N+1) elements. If M (N), then the coordinates correspond to the center of the heatmap cells and the cells have equal width. If M+1 (N+1), then the coordinates correspond to the edges of the heatmap cells. In the case where z is a 1D list, the x and y coordinates must be provided in x and y respectively to form data triplets.

Name#

Sets the trace name. The trace name appears as the legend item and on hover.

In the Name text box, the name can be entered and formatted. This is automatically reflected in the Structure > Traces[link] section and in the legend[link] of the plot. The trace name can be also edited directly by double-clicking the trace name in the plot legend.

HTML tags and CSS formatting can be used to enrich text styling.

Trace Opacity#

Sets the opacity (transparency) of the trace.

Text#

Text#

The grid column[link], holding the text to be shown for each item on hover, can be chosen here. Only data-containing columns can be selected.

Colorscale#

The data points can be visualized using a number of different color sets, picked from the Colorscales pulldown menu[link].

Colorscale#

Explained under Style > General.

Color Bar#

  • Show enables the color bar (shown next to the plot), which relates colors in the plot to the numeric data values.
  • Hide disables the color bar.

Orientation#

Sets the relation between the numeric data values and the chosen color scale.

  • Normal applies the colors of the Colorscale colors in their original order.
  • Reversed applies the Colorscale colors in reversed order.

Range#

  • Auto distributes colors and values linearly within range.
  • Custom allows the range to be distributed across manually-set limits.

Min#

Only available when Colorscale > Range is set to Custom.

Sets the lower end of the scale. All data values lower than this number will be mapped onto this value.

Max#

Only available when Colorscale > Range is set to Custom.

Sets the upper end of the scale. All data values higher than this number will be mapped onto this value.

Smoothing#

  • On When smoothing is turned on, extra menu items Gaps Between Cells and Heatmap are hidden and the chart colors are interpolated, creating a contiuosly changing color field.
  • Off When smoothing is turned off, extra menu items Gaps Between Cells and Heatmap are shown. The chart colors change stepswise.

Gaps In Data#

Only available when Colorscale > Smoothing is set to On.

Interpolate Gaps#

  • On interpolates missing data points by using available adjacent data. Has the side effect of overruling the Hover On Gaps below.
  • Off shows gaps in data.

Gaps Between Cells#

Only available when Colorscale > Smoothing is set to Off.

Horizontal Gap#

This setting is linked to Horizontal Gap below. Either setting can be used to change the gap between trace tiles in the horizontal direction.

Vertical Gap#

This setting is linked to Vertical Gap below. Either setting can be used to change the gap between trace tiles in the vertical direction.

Heatmap#

Only available when Colorscale > Smoothing is set to Off.

Horizontal Gaps#

This setting is linked to Horizontal Gap above. Either setting can be used to change the gap between trace tiles in the horizontal direction.

Vertical Gaps#

This setting is linked to Vertical Gap above. Either setting can be used to change the gap between trace tiles in the vertical direction.

Hover/Tooltip#

Hover On Gaps#

  • Yes Gaps in the data will display the categories, the z value is displayed as NaN (Not a Number)

  • No When no data is available, no hover info is shown.

Mode#

  • Values will display the values taken from Text above as plain text.

    • Template shows an edit panel for the template string used for rendering the information text. Variables are inserted using %{variable}, for example "y: %{y}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". Dates and times are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}".

Show#

When under Text >Text[link] a grid area is chosen, Text appears as an extra option in the Show menu. When hovering over the trace, each of the values from the grid are shown for X, Y, Z, a text column and the Name of the trace[link].

Text Alignment#

Sets the horizontal alignment of the text content within the hover label box. Has an effect only if the hover label text spans two or more lines. Alignment of Hover/Tooltip can be set to Auto, Left or Right.

Show#

When under Text >Text[link] a grid area is chosen, Text appears as an extra option in the Show menu. When hovering over the trace, each of the values from the grid are shown for X, Y, Z, a text column and the Name of the trace[link].

Trace Name#

only when Trace name is ticked in Show above

  • Clip To The trace name is partially shown in a side pane attached to the hover pane. Opens extra numerical data field.
  • No Clip An extra side-panel is added to the hover pane, showing the entire trace name.
  • Hide No trace name is shown in the hover info pane.
  • px Numerical field to enter the number of pixels the trace name will be clipped to, only appears when Clip To is selected.

Text Alignment#

Sets the horizontal alignment of the text content within the hover label box. Has an effect only if the hover label text spans two or more lines. Alignment of Hover/Tooltip can be set to Auto, Left or Right.

Horizontal Gaps#

This setting is linked to Horizontal Gap above. Either setting can be used to change the gap between trace tiles in the horizontal direction.

Vertical Gaps#

This setting is linked to Vertical Gap above. Either setting can be used to change the gap between trace tiles in the vertical direction.