Word Cloud

A word cloud component built on top of d3-cloud.

Options

• data | array: either an array of texts from which to generate the word cloud or, if precalculated is set to true, and array of word count objects (with text and value keys). Default: [].
• font | (string|function): accessor function specifying the font face for each word. Also accepts a constant instead of a function. Default: 'serif'.
• fontSizeMapper | function: accessor function indicating the font size for each word. Defaults to ( count - min + 1 ) / ( max - min + 6 ) * 30.0 + 14.0, where min and max denote the minimum and maximum word counts, respectively. Default: none.
• height | number: height of the word cloud (in px). Default: 600.
• language | string: language identifier (determines the stopwords to be removed). Default: 'en'.
• minCount | number: if set, only include words that appear more than minCount times in the given data. Default: none.
• saveButton | boolean: controls whether to display a button for saving the word cloud as an image. Default: true.
• onClick | function: callback function invoked when a word on the word cloud is clicked. Default: onClick() {}.
• padding | (function|number): accessor function or constant indicating the numerical padding for each word. Default: 5.
• precalculated | boolean: controls whether the word cloud expects an array of precalculated word counts or will generate them for given texts. Default: false.
• rotate | (function|number): accessor function indicating the rotation angle (in degrees) for each word. Also accepts a constant instead of a function. Default: word => word.value % 360.
• updateThreshold | number: batch size of new documents in data before the word cloud is re-rendered. Default: 5.
• stopwords | array: additional stopwords to remove before rendering the word cloud. Default: [].
• triggerRender | boolean: rerender when the data set is exchanged. Default: true.
• style | object: CSS inline styles. Default: {}.
• width | number: width of the word cloud (in px). Default: 700.

Examples

• Minimal
• With Style
• With Stopwords

Live Editor

<WordCloud data={[ 'This is my holiday', 'Breakfast is great', 'My house is my castle', 'A castle for a kingdom', 'I am longing for breakfast', 'Having rolls for breakfast is a must', 'A horse for a kingdom', 'Mom like rolls', 'Orange juice is fine', 'Where is the butter', 'I am looking for a spoon', 'Coffee for coffee drinkers', 'Tea for the sleepy ones', 'The sleepy, sloppy, crazy King lives in a castle', 'A house for everybody' ]} />

<WordCloud data={[
  'This is my holiday', 
  'Breakfast is great', 
  'My house is my castle', 
  'A castle for a kingdom', 
  'I am longing for breakfast',
  'Having rolls for breakfast is a must',
  'A horse for a kingdom',
  'Mom like rolls',
  'Orange juice is fine',
  'Where is the butter',
  'I am looking for a spoon',
  'Coffee for coffee drinkers',
  'Tea for the sleepy ones',
  'The sleepy, sloppy, crazy King lives in a castle',
  'A house for everybody'
]} />

Result

ReferenceError: Provider is not defined