Scatter Plot (JavaScript)

A scatter plot using a JavaScript based charting library. The view can be accessed either via the "interactive view" action on the executed node or in KNIME Server web portal page.

The configuration of the node lets you choose the size of a sample to display and to enable certain controls, which are then available in the view. This includes the ability to choose different columns for x and y or the possibility to set a title. Enabling or disabling these controls via the configuration dialog might not seem useful at first glance but has benefits when used in a web portal/wizard execution where the end user has no access to the workflow itself.

Since missing values as well as NaN (not a number) or infinite values cannot be displayed in the view, they will be omitted with a corresponding warning message.

Additionally a static SVG image can be rendered, which is then made available at the first output port.

Note, this node is currently under development. Future versions of the node might have more or changed functionality.

Options

Scatter Plot Options

Create image at outport: If an image is supposed to be rendered during execute for the upper outport. Disable this option if image is not needed or creation is too time consuming.
Maximum number of rows: Use this numerical value to restrict the number of rows used for this visualization.
Selection column name: Name of the appended column containing boolean values to indicate, whether a point was selected in the view or not.
Choose column for x axis: Defines the column that contains the values for X coordinates.
Choose column for y axis: Defines the column that contains the values for Y coordinates.
Report on missing values: Check to get the warning messages about missing and unsupported values. If not checked, missing and unsupported values will be ignored without raising a warning.

Axis Configuration

Label for x axis (*)

The label for the x-axis. If left blank, the selected column name is displayed.

Label for y axis (*)

The label for the y-axis. If left blank, the selected column name is displayed.

Date and Time formatter

Date and Time values are converted into string using the selected or entered conversion pattern as defined by moment.js. Examples:

"dddd, MMMM Do YYYY, h:mm:ss a" formats dates like "Sunday, February 14th 2010, 3:25:50 pm"
"ddd, hA" formats dates like "Sun, 3PM"
"YYYY-MM-DDTHH:mm:ssZ" formats dates as defined by ISO 8601.

Some valid pattern elements are:

Y: year
Q: quarter
M: month of year
W: week of year
DDD: day of year
D: day of month
d: day of week
dd: day of week (Su Mo ... Fr Sa)
a: am/pm marker
H: hour in day (0-23)
k: hour in day (1-24)
h: hour in am/pm (1-12)
m: minute in hour
s: second in minute
S: millisecond
z: Time zone (EST CST ... MST PST)
Z: Time zone (offset)
X: unix timestamp

Localized formats:

LT: Time (e.g. 8:30 PM)
LTS: Time with seconds (e.g. 8:30:25 PM)
L: Month numeral (0 padded), day of month (0 padded), year (e.g. 09/04/1986)
l: Month numeral, day of month, year (e.g. 9/4/1986)
LL: Month name, day of month, year (e.g. September 4 1986)
ll: Month name (short), day of month, year (e.g. Sep 4 1986)
LLL: Month name, day of month, year, time (e.g. September 4 1986 8:30 PM)
lll: Month name (short), day of month, year, time (e.g. Sep 4 1986 8:30 PM)
LLLL: Month name, day of month, day of week, year, time (e.g. Thursday, September 4 1986 8:30 PM)
llll: Month name (short), day of month, day of week (short), year, time (e.g. Thu, Sep 4 1986 8:30 PM)

For printing an arbitrary string, wrap the string in square brackets, e.g. '[today] dddd'.

Locale

The locale which is used to render all date/time cells.

Local Date format

A global format, which is applied to all locale date cells. To format the string the framework Moment.js is used.

Local Date and Time format

A global format, which is applied to all local date/time cells. To format the string the framework Moment.js is used.

Local Time format

A global format, which is applied to all local time cells. To format the string the framework Moment.js is used.

Zoned Date and Time format

A global format, which is applied to all zoned date/time cells. To format the string the framework Moment.js is used.

Time zone (for zoned format)

Time zone to use when rendering Zoned Date and Time format. Zoned Date and Time format must contain a zone mask symbol ('z' or 'Z') to enable the time zone selector.

Date and Time (legacy) format

A global format, which is applied to all date/time (legacy) cells. To format the string the framework Moment.js is used.

Auto range axes

Select if axes ranges are supposed to be automatically calculated. This also applies if the columns are changed in the view.

Use domain information

Using this option, the axis ranges are determined by bounds from the domain on initial layout.

Always show origin

Using this option, the origin will always be displayed inside the view.

General Plot Options

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 color legend: If checked a color legend will be displayed in the view. This options requires a color model for nominal values to be provided. This can be done e.g. by applying Color Manager node ahead.
Show grid: If an additional grid is being rendered at the axes tick positions.
Width of image (in px): The width of the generated SVG image.
Height of image (in px): The height of the generated SVG image.
Resize view to fill 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.
Background color: The color of the background of the image.
Data area color: The background color of the data area, within the axes.
Grid color: The color of the grid.
Show warnings in view: If checked, warning messages will be displayed in the view when they occur.

View Controls

Enable view edit controls: If checked all edit controls selected below will be rendered in the view. Unchecking this option disables all edit controls.
Enable title edit controls: Renders a text box to change the chart title in the view.
Enable subtitle edit controls: Renders a text box to change the chart subtitle in the view.
Enable column chooser for x-axis: Renders a selection box to change column used for X coordinates in the view.
Enable column chooser for y-axis: Renders a selection box to change column used for X coordinates in the view.
Enable label edit for x-axis: Renders a text box to change x-axis label in the view.
Enable label edit for y-axis: Renders a text box to change y-axis label in the view.
Enable legend display control: If checked, a checkbox to switch on and off the legend is rendered in the view. This options requires a color model for nominal values to be provided. This can be done e.g. by applying Color Manager node ahead.
Enable mouse crosshair: Enables the display of additional crosshairs with labels of the current mouse position.
Snap to data points: If enabled the crosshairs will snap to the closest data point according to mouse position.
Enable selection: Enables or disables the selection feature. When enabled data points can be selected in the scatter plot by activating the corresponding button and clicking on points. Extending the selection is possible by holding down the Shift-Key and clicking. The selection is propagated in an appended column of the data table.
Enable rectangular selection: Enables a selection mode where a rectangle can be drawn to select points. To start drawing a selection rectangle activate the corresponding button in the view and drag the mouse. To extend the selection hold down the Shift-Key and click or drag the mouse.
Enable lasso selection: Enables a selection mode where a freeform shape can be drawn to select points. To start drawing a selection lasso activate the corresponding button in the view and hold down the Ctrl-Key (Cmd-Key on Mac) and drag the mouse. To extend the selection hold down the Ctrl, and Shift-Key (Cmd, and Shift on Mac) and drag the mouse.
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 checked, a checkbox to switch on and off the mode of displaying only selected rows is rendered in the view.
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 have been changed.
Enable panning: Enable panning on the plot. To start panning activate the corresponding button in the view then click and drag the mouse.
Enable mouse wheel zooming: Enable zooming on the plot using the mouse wheel.
Enable drag zooming: Enable zooming on the plot by dragging the mouse and drawing a zoom rectangle. Dragging from the top-left down will create a zoom rectangle, dragging from the bottom right up will reset the zoom to fit the extends of the plot.
Show zoom reset button: Renders a button to resize the plot to it's extends.

Input Ports

: Data table with data to display.

Output Ports

: SVG image rendered by the JavaScript implementation of the scatter plot.
: Data table containing the input data appended with a column, that represents the selection made in the scatter plot view.

Popular Predecessors

Popular Successors

Views

Interactive View: Scatter Plot: Displays a scatter plot visualization of the input data.

Workflows

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.

Installation

To use this node in KNIME, install the extension KNIME JavaScript Views from the below update site following our NodePit Product and Node Installation Guide:

v5.1

A zipped version of the software site can be downloaded here.

Plugin provider: KNIME AG, Zurich, Switzerland

Plugin version: 5.1.0.v202303061417

On NodePit since: 2023-07-15

Last update: 2023-09-26

KNIME versions: Since v3.6

Deploy, schedule, execute, and monitor your KNIME workflows locally, in the cloud or on-premises – with our brand new NodePit Runner.

Try NodePit Runner!