Tag Cloud (JavaScript)

A tag cloud view using JavaScript libraries. The view can be accessed either in KNIME Analytics Platform by right-clicking on an executed node and selecting "Interactive View: JavaScript Tag Cloud View" or on the WebPortal.

The implementation is based on the popular JavaScript library D3 and the layout extension by Jason Davies, which is inspired by the popular Java based Wordle. See the links for details.

The configuration of the node lets you choose the size of the sample to display and enable certain controls, which are then available in the view. This includes the ability to choose different font sizes or a title. Enabling or disabling these controls via the configuration dialog is useful in a web portal/wizard execution, where the end user has no access to the workflow itself.

Since missing values cannot be displayed in the view, a warning message is displayed instead.

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

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

This tab contains all general options for controlling the generation and output of the view.

Number of words to display: Use this numerical value to restrict the number of tags used for this visualization. This number takes into account aggregation settings. The largest tags are retained. A warning message can be displayed if the number of tags in the input table exceeds this value.
Display warnings in view: Enables the display of warning messages about missing values, exceeding word count, limited layout space, etc.
Report on missing values: Missing values in the selected word or size column lead to the omission of the corresponding row. If this option is checked and missing values are encountered, a warning is issued; otherwise the rows are simply ignored.
Create image at outport: Leave this option checked if an image is to be rendered during execution for the image outport; uncheck it if an image is not needed or if creation of an image is too time consuming. Unchecking the option disables the outport.
Title (*): The title of the visualization shown above the generated tag cloud. If left blank, no title will be shown.
Subtitle (*): The subtitle of the visualization shown above the generated tag cloud. If left blank, no subtitle will be shown.
Tag column: Defines the column containing the string values for the tags to display. Both string and term cells are supported.
Aggregate tags: Setting this option aggregates the tags from the input table whose values are the same. The size of the resulting tag is determined as the sum of all values in the selected size column or property. Use this option in conjunction with 'Ignore term tags' when selecting a tag column of type 'term'.
Ignore term tags: If selected, the term tags are ignored. Thus, two terms are equal when their words are equal. The new value of the term will be the sum over all terms containing the same word.
Size column (*): Defines the column that contains the numerical size values for the tags to display. This can also be set to '<none>', in which case the size property for the individual row is used.
Use row size property: In case no size column is used, the size property for each row is extracted as a size measure for the tags.
Width of view/image: Static width of view and generated image. If 'resize view to fill window' is used, this value has no effect.
Height of view/image: Static height of view and generated image. If 'resize view to fill window' is used, this value has no effect.
Resize view to fill window: Setting this option resizes view and image 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 that enables full screen mode.

Display

This tab contains specific display settings controlling font and layout of the tags in the view.

Font family

A font family string used to render the tags. Values can be comma-separated for fallback declaration, e.g. 'Helvetica, Arial, sans-serif'.

Font scale

The font sizes are calculated as an interpolation between specified minimum and maximum font sizes. There are four interpolation methods to choose from:

linear
logarithmic
square root
exponential

Depending on the size distribution in the data and the desired layout one or another interpolation method might be more fitting.

Minimum and maximum font size

Specification of the minimum and maximum font sizes of the rendered tags. Please note that if the values are too large for all words to fit in the designated view area, tags may be omitted from the layout or overlap. In this case a warning is displayed in the view.

Use bold font face

Check to use a bold variant of the selected font family for display.

Use row color property

If checked, the color property of each tag is extracted from the input table. Use a 'Color Manager' to assign colors to the data in advance. If not checked, colors are randomly drawn from a default color scale.

Spiral type

Defines the type of spiral used to position the tags. There are two types to choose from:

archimedean
rectangular

Number of orientations

The number of orientations randomly assigned to tags. The rotation angles are calculated according to the specified start and end angles with number of orientations taken into account. For example, to create a strict perpendicular layout, set the number to 2, with start angle at -90° and end angle at 0°. By default, there are 5 orientations between -60° and +60°, which results in the following set of orientations: [-60°, -30°, 0°, +30° +60°].

Start and end angle

Numerical values for start and end angles of orientations. The values need to be in the range from -90° to +90°. See 'number of orientations' for more details.

Display refresh button

Displays a button to refresh the tag cloud layout with the current settings. As orientation and placement of tags have a random component, the layout will look different each time. To achieve a desired look or placement of certain key tags, etc., this button can be pressed multiple times. When the view's value is applied, the last layout is remembered for image creation and subsequent opening of the view.

Disable animations

If checked, all view animations will be disabled.

Interactivity

This tab contains all settings controlling the interactive menu displayable in the view, as well as all selection and filter settings.

Enable view edit controls: Enables or disables all view menu controls.
Enable title edit control: Renders a text input field to change the visualization's title in the view.
Enable subtitle edit control: Renders a text input field to change the visualization's subtitle in the view.
Enable font scale control: Renders a selection box to change the interpolation method for font sizes in the view.
Enable font size controls: Renders numerical inputs to change minimum and maximum font sizes in the view.
Enable spiral type control: Renders a selection box to change the spiral type in the view.
Enable orientation count control: Renders a numerical input field to change the number of orientations used in tag rotation in the view.
Enable angle controls: Renders numerical inputs to change the start and end angles used for word rotation in the view.
Enable selection: If checked, tags can be selected by clicking on them in the view. Multiple tags can be selected by holding down the Ctrl-Key (Cmd-Key on Mac). Any selection will be represented as a new boolean column in the output table.
Selection outline color: Selected words are indicated by an added outline in the view. Select a color that does not interfere with the colors applied to the tags themselves.
Publish selection events: If checked, other interactive views are notified when the user changes the selection in the current view. See also "Subscribe to selection events".
Subscribe to selection events: If checked, the view reacts to notifications from other interactive views that the selection has been changed. See also "Publish selection events".
Show selected tags only: If checked, only selected tags are displayed.
Enable 'Show selected tags only' option: If checked, a checkbox for displaying only selected tags is rendered in the view.
Display 'Clear selection' button: If checked, a button to clear the selection is displayed.
Selection column name: The name of the boolean column containing the selection.
Subscribe to filter events: If checked, the view reacts when applied filters are changed.

Input Ports

: Input table containing tags to display.

Output Ports

: Generated SVG image of tag cloud visualization.
: Data table containing the input data with an appended column representing the selection made in the tag cloud view. Selected tags are denoted by 'true', unselected tags by 'false'. Rows with tags not shown in the view (because of missing values or an exceeded tag limit, for example) are denoted by a missing value.

Popular Predecessors

Popular Successors

Views

Interactive View: JavaScript Tag Cloud View: Displays the selected strings in a tag cloud.

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.3

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

Plugin provider: KNIME AG, Zurich, Switzerland

Plugin version: 5.3.0.v202402011404

On NodePit since: 2024-07-09

Last update: 2024-11-15

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!