Word Cloud

Eine Wortwolken-Komponente, die auf [d3-cloud] (https://github.com/jasondavies/d3-cloud) aufbaut.

Optionen

• data | array: entweder ein Array mit Texten, aus denen die Wortwolke erzeugt werden soll, oder, wenn precalculated auf true gesetzt ist, ein Array mit Wortzählungsobjekten (mit den Schlüsseln text und value). Default: [].
• font | (string|function): Accessorfunktion, die die Schriftart für jedes Wort angibt. Akzeptiert auch eine Konstante anstelle einer Funktion. Default: 'serif'.
• fontSizeMapper | function: Accessor-Funktion, die die Schriftgröße für jedes Wort angibt. Die Standardeinstellung ist ( count - min + 1 ) / ( max - min + 6 ) * 30.0 + 14.0, wobei min und max die minimale bzw. maximale Wortanzahl bezeichnen. Default: none.
• height | number: Höhe der Wortwolke (in px). Default: 600.
• language | string: Sprachidentifikator (bestimmt die zu entfernenden Stoppwörter). Default: 'en'.
• minCount | number: wenn gesetzt, nur Wörter einbeziehen, die mehr als minCount Mal in den angegebenen Daten vorkommen. Default: none.
• saveButton | boolean: steuert, ob eine Schaltfläche zum Speichern der Wortwolke als Bild angezeigt werden soll. Default: true.
• onClick | function: Callback-Funktion, die aufgerufen wird, wenn ein Wort in der Wortwolke angeklickt wird. Default: onClick() {}.
• padding | (function|number): Accessorfunktion oder Konstante, die das numerische Padding für jedes Wort angibt. Default: 5.
• precalculated | boolean: steuert, ob die Wortwolke ein Array mit vorberechneten Wortzahlen erwartet oder diese für gegebene Texte generiert. Default: false.
• rotate | (function|number): Accessorfunktion, die den Drehwinkel (in Grad) für jedes Wort angibt. Akzeptiert auch eine Konstante anstelle einer Funktion. Default: word => word.value % 360.
• updateThreshold | number: Stapelgröße der neuen Dokumente in Daten, bevor die Wortwolke neu gerendert wird. Default: 5.
• stopwords | array: zusätzliche Stoppwörter, die vor dem Rendern der Wortwolke entfernt werden sollen. Default: [].
• triggerRender | boolean: erneut wiedergeben, wenn der Datensatz ausgetauscht wird. Default: true.
• style | object: CSS-Inline-Stile. Default: {}.
• width | number: Breite der Wortwolke (in px). Default: 700.

Beispiele

• 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'
]} />

Ergebnis

ReferenceError: Provider is not defined