How to Generate Word Cloud using React

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