Parallel Coordinates Plot (JavaScript)

A parallel coordinates plot displays multidimensional data as polylines over multiple parallel and evenly spaced axes. More information is available on Wikipedia.

Rows that contain missing values, if present, are treated in accordance with the chosen in the dialog or in interactive view option.

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

Included columns
Select the columns to be plotted. The columns could be of string or number types.
Use colors from spec
Check to use colors from the data table spec in the visualization.
Color column (*)
Select the column which contains categorical values that will be used for coloring. If the option is not set, the visualization takes the color from the data table spec.

General Plot Options

Title (*)
The title of the graph shown above the generated image. If left blank, no title will be shown.
Subtitle (*)
The subtitle of the graph shown above the generated image. If left blank, no subtitle will be shown.
Image
Settings for image generation.
Background color
The background color of the plot, including the axes labels, the title and the subtitle.
Data area color
The background color of the data area, within the axes.
Missing values handling
The way missing values are handled.
Line type
Set a type of interpolation between polyline's points.
Line thickness
Set thickness property of the rendered polylines.
Show legend
Render a legend to the plot.

Control Options

Enable view controls
Enables controls in the chart.
Display full screen button
Displays a button enabling full screen mode.
Enable title editing
Enables the editing of the title in the interactive view.
Enable subtitle editing
Enables the editing of the subtitle in the interactive view.
Enable missing values handling
Enables handling of missing values in the interactive view.
Enable line type change
Enables changing of the line type in the interactive view.
Enable column selection
Enables changing the columns to be rendered in the interactive view. Only the columns included in the dialog will be available in the view.
Enable axes swapping
Enables swapping of the axes in the interactive view.

Selection and Filter

Enable selection
Enables row selection within the view by clicking the rendered lines. Use Shift key to select multiple rows. To deselect previously selected row use Shift + mouse click of the selected row. Please note that this will deactivate the selection previously selected by the range selection, if applicable.
Enable range selection
Enables a range of rows selection within the view. Clicking and dragging along an axis specifies a range of the rows for that dimension to be displayed. Please note that this will deactivate the selection previously selected by the row selection, if applicable.
Display clear selection button
Displays a button to clear current selection.
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".
Subscribe to filter events
If checked, the view reacts when applied filters have been changed.

Input Ports

Icon
Data table with data to display.

Output Ports

Icon
SVG image of the Parallel Coordinates plot.
Icon
Data table containing the input data appended with a column, that represents the selection made in the parallel coordinates plot view.

Views

Interactive View: Parallel Coordinates Plot
A D3.js implementation of a Parallel Coordinates Plot.

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.