Heatmap (JavaScript)

This node displays the given input table as an interactive heatmap.

The node supports custom CSS styling. You can simply put CSS rules into a single string and set it as a flow variable 'customCSS' in the node configuration dialog. You will find the list of available classes and their description on our documentation page .

Options

Label column
A column whose values will be used as the labels for the heatmap's rows. By default, the row IDs are used as labels.
Image column
A column of SVG images, which will appear when hovering over a row label. This field can only be modified if one or more SVG image columns are available. If not, a column cannot be selected and no image will be displayed when hovering over a row label.
Columns to display
Select the columns to display in the heatmap.
Minimum value
The minimum value for the color gradient to map to. If Custom is selected, a custom value may be entered. Columns without defined minimum values will not be used when computing the minimum.
Maximum value
The maximum value for the color gradient to map to. If Custom is selected, a custom value may be entered. Columns without defined maximum values will not be used when computing the maximum.

View Configuration

Image width in pixels
The width, in pixels, of the output SVG image. If "Resize view to fill window" is not selected, this is also the static width of the view.
Image height in pixels
The height, in pixels, of the output SVG image. If "Resize view to fill window" is not selected, this is also the static height of the view.
Create image at outport
If checked, an SVG image will be produced as output.
Show warnings in view
If checked, warning messages will be displayed in the view when they occur.
Resize to window
Setting this option resizes the view to the available area of the window. If disabled the view size is static according to the set width and height.
Display full screen button
Displays a button enabling full screen mode.
Chart title (*)
The title of the graph shown above the generated image. If left blank, no title will be shown.
Chart subtitle (*)
The subtitle of the graph shown above the generated image. If left blank, no subtitle will be shown.
Show tool tips
If selected, tool tips containing additional information will be displayed when hovering over a cell within the heatmap view.
Use discrete gradient
If checked, a discrete gradient will be used to color the heatmap. If not, a continuous gradient is used.
Number of colors
If using a discrete gradient, this is the number of discrete points to used. A minimum of three colors is required, and the number must be odd.
Select gradient colors
The three base colors used to define the gradient.
Select color for missing values
Sets the color used to represent missing values in the heatmap.
Select a color for values greater than the range maximum
Sets the color used to represent values above the specified maximum.
Select a color for values less than the range minimum
Sets the color used to represent values below the specified minimum.

Interactivity

Enable view edit
If checked all edit controls selected below will be rendered in the view. Unchecking this option disables all edit controls.
Enable title/subtitle edit controls
Renders a text box to change the chart title and subtitle in the view.
Enable color mode edit
If checked, the color gradient can be toggled between continuous and discrete from within the view.
Enable 'show tool tips' option
If enabled, tool tips for the heatmap data cells and row labels can be toggled on/off from within the view.
Enable selection
When this option is checked, data points can be selected in the heatmap by activating the corresponding button and clicking on data cells. Extend the selection by holding down the Shift-key while clicking on points. The selection appears in an appended column of the data table.
Show reset selection button
If checked, a reset selection button will be displayed in the view.
Selection column name
Name of the appended column containing boolean values to indicate, whether a data cell was selected in the view or not.
Publish selection events
If checked, notifies other interactive views when user changes the selection in the current view. See also "Subscribe to selection events".
Subscribe to selection events
If checked, the view reacts on notifications from other interactive views that the selection has been changed. See also "Publish selection events".
Enable 'show selected rows only' option
If selected, a "show selected rows only" checkbox will be displayed in the view's menu.
Show selected rows only
If enabled, only the selected rows will be displayed.
Subscribe to filter events
If checked, the view reacts when applied filters are changed.
Enable pagination
Enable or disable the pagination feature globally. When disabled the table is rendered whole on one page. When enabled use the options below to further refine the pagination settings.
Initial page size
Set the page size to be used on initial layout. A page size is defined as the number of rows the table displays on one page. If the page size change control is enabled the page length can be changed in the view.
Enable page size change control
Enable or disable the control to change the page size interactively in the view.
Selectable page sizes
Define a comma-separated list of allowed page sizes for the page size control.
Add "All" option to page sizes
When checked, an additional 'All' option will be available in the page size control.
Enable panning
Enable panning on the plot. To start panning click and drag the mouse. Note if panning and drag zooming is enabled, panning can be achieved by holding the Ctrl key and dragging the mouse.
Enable zooming
Enable zooming on the plot using the mouse wheel.
Show zoom reset button
Renders a button to resize the plot to it's extends.

Input Ports

Icon
Input data table to display as a heatmap.

Output Ports

Icon
An SVG image representation of the view.
Icon
The input data table, with an appended selection column if selection is enabled.

Views

Interactive View: Heatmap
A heatmap representation of the input data table.

Workflows

Links

Developers

You want to see the source code for this node? Click the following button and we’ll use our super-powers to find it for you.