Word Cloud
This article describes the Word Cloud component and its properties.
Last updated
This article describes the Word Cloud component and its properties.
Last updated
Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article
The Word Cloud is a data visualization component that shows the popularity of words or phrases by making the most frequently used words appear larger or bolder than the other words around them.
Select Word Cloud from the Data Visualization category of the component library. Move the mouse over the canvas and click to add a word cloud to your project:
The Word Cloud properties consist of GENERAL, TEXT STYLING, CLOUD SETTINGS, INTERACTIVITY, and DYNAMIC VISIBILITY drawers. This guide will not describe the dynamic visibility properties as these are generic to each visible component; a separate guide and tutorial on dynamic visibility can be found here.
Structured Source - with Structured Array selected a bind-only input field displays. An array example can be seen below:
Source - an input field that contains the text string to display on the component. This can be bound to a string of text in the spreadsheet.
Max words to display - defines the maximum number of words that can be displayed on the component.
Words to Exclude - defines the words to exclude from the word cloud.
Min word length - defines the minimum size a word has to be to display.
Include words with count greater than - defines words that display based on how many times they repeat in the text string.
Fill - a property to change the color of the component background
Colour can be set in 3 ways
Clicking the colored rectangle and using the color picker
Typing in a color value (as HEX code)
Binding to a color value in a spreadsheet cell (formats included below)
A color name - e.g. red, green, blue-violet, steel blue
a HEX code - e.g. #ff2233
an RGB specifier - e.g. rgb(255,40,75)
A HSL specifier - e.g. hsl(120, 100%, 50%)
Opacity can be set in 3 different ways:
Using the spinner buttons
Typing in a value
Binding to value in a spreadsheet cell
Border - a property to change the color of the component border. This is checked by default. Uncheck to disable the border.
Opacity - a property to change the opacity of the component border. This is checked by default. Uncheck to disable the border.
Padding – This property defines the space between the component and the component border.
Individual Padding - selected this property to apply different amounts of padding to each of the component's edges. Each of these individual inputs can be manually edited or bound to the spreadsheet.
Font – Choose a font style from the dropdown list.
Default Text Color – The button label will be shown in the color that matches the value entered in the property field.
Opacity – This determines the transparency of the button label.
Randomness - adjust the slider, or enter into the input field, to adjust the random generation of the word cloud display.
Allow words to be vertical - a check option to allow for words to display vertically, as well as horizontally
Heat Rules - select an option from the dropdown to apply heat rules to the values on the word cloud. This is set to None by default.
Color Range - applies color heat mapping to the values on the word cloud display.
Min color - sets the color for the text with smaller values tied to them.
Max color - sets the color for the text with larger values tied to them.
Opacity Range - applies opacity heat mapping to the values on the word cloud display.
Min opacity - sets the opacity for the text with smaller values tied to them.
Max opacity - sets the opacity for the text with larger values tied to them.
Show value - check this option to display the value beside the corresponding text value.
All these properties apply to the word cloud interactivity.
Font – Choose a font style from the dropdown list.
Size – Change the font size of the Text Label in 3 ways:
Using the spinner buttons
Typing in a value
Binding to a value in a spreadsheet cell
Line height – Use this property to adjust the line spacing of the Text Label. Choose one of the options from the dropdown list.
Default Text Color – The button label will be shown in the color that matches the value entered in the property field.
Opacity – This determines the transparency of the button label.
Padding – This property defines the space between the component and the component border.
Individual Padding - selected this property to apply different amounts of padding to each of the component's edges. Each of these individual inputs can be manually edited or bound to the spreadsheet.
Number Format - Select an option from the dropdown to adjust the number formatting
Tooltip style -
Square corner - applies a square cornering to the tooltip
Rounded corner - applies a rounded cornering to the tooltip
Background Fill - a property to change the color of the tooltip background
Colour can be set in 3 ways
Clicking the colored rectangle and using the color picker
Typing in a color value (as HEX code)
Binding to a color value in a spreadsheet cell (formats included below)
A color name - e.g. red, green, blue-violet, steel blue
a HEX code - e.g. #ff2233
an RGB specifier - e.g. rgb(255,40,75)
A HSL specifier - e.g. hsl(120, 100%, 50%)
Opacity can be set in 3 different ways:
Using the spinner buttons
Typing in a value
Binding to value in a spreadsheet cell
Border - a property to change the color of the tooltip border.
Opacity - a property to change the opacity of the tooltip border.
Effects – Select an option from the dropdown box. The options are none and Drop Shadow. With Drop Shadow selected the following properties appear:
Color – this determines the color of the shadow
Opacity – this determines the opacity of the shadow
X-Offset – determines the horizontal position of the shadow (positive values move to the right, negative values move to the left)
Y-Offset – determines the vertical position of the shadow (positive values move down, negative values move up)
Blur – determines the blur of the shadow
Ignore Blank Cells - check this option to ignore blank cells within a selected data range.
