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

Icon
Data table with data to display.

Output Ports

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

Views

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

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.