Word Cloud Widget

Word Frequency Cloud

Visualization type	Description
Word Cloud	This visualization uses the most frequent words and their frequencies are used to determine the size of each word in the word cloud.

Components

Widget component

/src/components/widgets/WordCloud/index.tsx

WordCloudChart component to render the world cloud data

/src/components/widgets/WordCloud/WordCloudChart.tsx

How it works

The WordCloud widget receives data from its parent Widget component (/src/components/widgets/index.tsx) through props. The parent component fetches the data and passes it down.

The widget initializes several state variables and refs needed for functionality. The chartWrapper ref is particularly important as it provides DOM access for the export features and responsive sizing.

const [wordsData, setWordsData] = useState([]);
const [wCloud, setwordCloudData] = useState([]);
const chartWrapper = useRef();

The raw data object needs to be converted into an array format that the word cloud visualization library can understand. Each word-frequency pair becomes an object with text and value properties.

useEffect(() => {
  // Convert the data object into an array, sort it, and take the top 100
  const newWordCloudData = Object.keys(data).map(entry => ({
    text: entry,
    value: data[entry]
  }));
  setwordCloudData(newWordCloudData);
}, [data]);

The transformed word cloud data is synchronized with the global dashboard state using the useDashboardState hook. This allows other dashboard components to access the word cloud data for filtering or analysis purposes.

useEffect(() => {
  onChangeWidgetState({
    widgetType: widgetType,
    data: wCloud
  })
}, [widgetType, wCloud])

The actual word cloud visualization is handled by the WordCloudChart component. The main widget creates a container with fixed height and passes the transformed data to this component.

<Box sx={{ height: '400px', position: 'relative' }} ref={chartWrapper}>
  <WordCloudChart data={wCloud}></WordCloudChart>
</Box>

The WordCloudChart component receives the array data and processes it further. It calculates the maximum frequency value to properly scale word sizes and manages the visualization parameters.

useEffect(() => {
    const values = props.data.map((r) => {
      return r.value;
    });
    setMax(Math.max(...values));
    setData(props.data);
  }, [props.data]);

The actual rendering uses react-d3-cloud library with calculated parameters. Font sizes are scaled based on word frequency relative to the maximum value, and each word is rotated based on its frequency value.

const fontSize = useCallback((word) => {
    return (600 * word.value) / max;
  }, [max])
  const rotate = useCallback((word) => {
    return word.value % 360;
  }, [])

<WordCloud  
    width={1800}
    height={3000}
    data={data}
    fontSize={fontSize}
    rotate={rotate}
    padding={6} 
    random={Math.random}      
/>

Full source code

Here