![Word Cloud]()
Demo: https://codesandbox.io/p/github/santoshkaranam/word-cloud/main
Repo: https://github.com/santoshkaranam/word-cloud
What is word cloud?
An image composed of words used in a particular text or subject, in which the size of each word indicates its frequency or importance.
Word clouds, also known as Word Map, Word Bubble, are a popular data analysis and visualization technique. They display a group of words in different sizes and colors, with more frequent or important words appearing larger and more prominent. In a Word cloud, words are arranged randomly or in a particular shape and font. The resulting image can give a quick visual summary of the most common words or topics in a body of text.
Word clouds have many uses across different industries, including marketing, education, and social media. They can help identify trends, highlight key themes and messages, or summarize customer feedback. Word clouds can be created using a Word Cloud Generator or an AI Word clouds tool that automatically generates a visual representation based on a set of keywords or text.
One popular application of Word clouds is in marketing, where they can be used to analyze customer reviews and feedback on online marketplaces like Amazon. By creating Word clouds from customer reviews, marketers can identify the most commonly used words and phrases and use that insight to improve their products or services. For example, if Word clouds shows that customers frequently mention "easy to use," a company could use that information to emphasize the product's user-friendliness in their marketing materials.
How to Generate word cloud using React
Using the npm package react-d3-cloud we can easily create word clouds in our application on the fly,
Below is the sample code, which shows one such implementation.
import React, { useEffect, useState } from 'react';
import WordCloud from 'react-d3-cloud';
export interface WordData {
text: string;
value: number;
}
interface IWordCloudChartProps {
data: WordData[];
}
export function WordCloudChart(props: IWordCloudChartProps) {
const [data, setData] = useState(undefined as unknown as WordData[]);
const [max, setMax] = useState(100);
useEffect(() => {
const values = props.data.map((r) => {
return r.value;
});
console.log('props.data', props.data);
setMax(Math.max(...values));
setData(props.data);
}, [props.data]);
// @ts-ignore
const fontSize = (word) => (100 * word.value) / max;
// @ts-ignore
const rotate = () => 0;// word.value % 90;
if (data === undefined) {
return <div>Loading..</div>;
}
return (
<WordCloud
width={1000}
height={400}
data={data}
fontSize={fontSize}
rotate={rotate}
padding={3}
spiral="rectangular"
random={Math.random}
/>
);
}
Configurations
Name |
Description |
Type |
Required |
Default |
data |
The words array |
{ text: string, value: number }>[] |
✓ |
|
width |
Width of the layout (px) |
number |
|
700 |
height |
Height of the layout (px) |
number |
|
600 |
font |
The font accessor function indicates the font face for each word. A constant may be specified instead of a function. |
string | (d) => string |
|
'serif' |
fontStyle |
The fontStyle accessor function indicates the font style for each word. A constant may be specified instead of a function. |
string | (d) => string |
|
'normal' |
fontWeight |
The fontWeight accessor function indicates the font weight for each word. A constant may be specified instead of a function. |
string | number | (d) => string | number |
|
'normal' |
fontSize |
The fontSize accessor function indicates the numerical font size for each word. |
(d) => number |
|
(d) => Math.sqrt(d.value) |
rotate |
The rotate accessor function indicates the rotation angle (in degrees) for each word. |
(d) => number |
|
() => (~~(Math.random() * 6) - 3) * 30 |
spiral |
The current type of spiral is used for positioning words. This can either be one of the two built-in spirals, "archimedean" and "rectangular", or an arbitrary spiral generator can be used |
'archimedean' | 'rectangular' | ([width, height]) => t => [x, y] |
|
'archimedean' |
padding |
The padding accessor function indicates the numerical padding for each word. |
number | (d) => number |
|
1 |
random |
The internal random number generator is used for selecting the initial position of each word and the clockwise/counterclockwise direction of the spiral for each word. This should return a number in the range [0, 1). |
(d) => number |
|
Math.random |
fill |
The fill accessor function indicates the color for each word. |
(d, i) => string |
|
(d, i) => schemeCategory10ScaleOrdinal(i) |
onWordClick |
The function will be called when the click event is triggered on a word |
(event, d) => {} |
|
null |
onWordMouseOver |
The function will be called when a mouseover event is triggered on a word |
(event, d) => {} |
|
null |
onWordMouseOut |
The function will be called when mouseout event is triggered on a word |
(event, d) => {} |
|
null |
Conclusion
As a data analysis technique, word clouds are generated on the fly to analyse feedback/support calls/interest in number of applications. We can easily generate word cloud using react as mentioned above and gain meaning full insigts