Overview
WordCloud displays word frequencies as a cloud where size represents importance. Perfect for visualizing themes in open-ended survey responses, feedback analysis, and keyword extraction. Built on d3-cloud for efficient layout calculation.
Features
- Size scales proportionally to word value
- Automatic layout with no overlapping words
- Configurable font size range
- Customizable color palette
- Click handler for drilling into specific terms
- Responsive container sizing
- Limit maximum words displayed
Examples
Basic WordCloud
Positive feedback themes from survey responses
Feature Request Analysis
Most requested features from user feedback
Bug Report Keywords
Common keywords from bug reports
With ChartCard
Wrapped in ChartCard
Survey Response Themes
Keywords extracted from 1,247 open-ended responses
Compact Size
Smaller container with reduced font range
Standard
Compact (10-30px)
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
words | WordData[] | required | Array of word objects with text and value |
maxWords | number | 100 | Maximum number of words to display |
minFontSize | number | 12 | Minimum font size in pixels |
maxFontSize | number | 60 | Maximum font size in pixels |
width | number | 600 | Cloud width (auto-adjusts to container) |
height | number | 400 | Cloud height |
colors | string[] | - | Color palette for words (uses chart colors by default) |
onWordClick | (word: string, value: number) => void | - | Click handler for word interactions |
className | string | - | Additional CSS classes |
WordData Interface
interface WordData {
text: string; // The word to display
value: number; // Frequency/importance (higher = larger)
color?: string; // Optional custom color override
}Usage
import { WordCloud, ChartCard } from '@/ui/components/charts';
// Basic word cloud
<WordCloud
words={[
{ text: 'performance', value: 100 },
{ text: 'usability', value: 85 },
{ text: 'design', value: 70 },
{ text: 'features', value: 60 },
]}
/>
// With click handler and custom settings
<ChartCard title="Feedback Themes">
<WordCloud
words={words}
maxWords={50}
minFontSize={14}
maxFontSize={48}
onWordClick={(word, value) => console.log(`${word}: ${value}`)}
/>
</ChartCard>