Word Cloud

A word cloud is a visual representation for text data to visualize keywords or tags. Tags are usually single words, and the importance of each tag is shown with size or color. This format is useful for quickly perceiving the most prominent terms and for locating a term alphabetically to determine its relative prominence.

Quick Start

To create a word cloud, use import the WordCloud and give it some data.

import { WordCloud } from 'reaviz';


export default function App() {
  return (
    <WordCloud
      height={300}
      width={300}
      data={[
        { key: 'HTML', data: 70 },
        { key: 'CSS', data: 65 },
        { key: 'Docker', data: 40 },
        { key: 'Kubernetes', data: 35 },
        { key: 'AWS', data: 30 },
        { key: 'Git', data: 25 }
      ]}
    />
  );
}

import { WordCloud } from 'reaviz';

export default function App() {
  return (
    <WordCloud
      height={300}
      width={300}
      data={[
        { key: 'HTML', data: 70 },
        { key: 'CSS', data: 65 },
        { key: 'Docker', data: 40 },
        { key: 'Kubernetes', data: 35 },
        { key: 'AWS', data: 30 },
        { key: 'Git', data: 25 }
      ]}
    />
  );
}

API

WordCloud (opens in a new tab)

Prop	Description	Default
`data`	Data to render in the word cloud. The 'key' represents the word and 'data' represents its frequency/weight. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`	`[]`
`fontSizeRange`	Font size range [min, max]. `[number, number]`	`[12, 50]`
`fontFamily`	Font family to use. `string`	`Arial`
`padding`	Padding between words. `number`	`3`
`rotationAngles`	Rotation angles for words. `[number, number]`	`[-30, 30]`
`rotations`	Number of possible rotations. `number`	`2`
`colorScheme`	Custom color scheme for words. `string[]`	`schemes.cybertron`
`onLabelClick`	Event triggered when a word is clicked. `(event: MouseEvent<Element, MouseEvent>, data: ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>) => void`
`onLabelMouseEnter`	Mouse enter handler. `(event: PointerEvent<Element>, data: ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>) => void`
`onLabelMouseLeave`	Mouse leave handler. `(event: PointerEvent<Element>, data: ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>) => void`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

WordCloudLabel (opens in a new tab)

Prop	Description	Default
`text`	Text to display. `string`
`fontSize`	Font size in pixels. `number`
`fontFamily`	Font family to use. `string`
`fill`	Fill color for the text. `string`
`x`	X position of the text. `number`
`y`	Y position of the text. `number`
`rotate`	Rotation angle in degrees. `number`
`data`	Original data point. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>`
`className`	Additional className to apply. `string`
`tooltip`	Tooltip element. `ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>>`	`<ChartTooltip />`
`onClick`	Click handler. `(event: MouseEvent<Element, MouseEvent>, data: ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>) => void`
`onMouseEnter`	Mouse enter handler. `(event: PointerEvent<Element>, data: ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>) => void`
`onMouseLeave`	Mouse leave handler. `(event: PointerEvent<Element>, data: ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>) => void`

Venn Diagram Brush