Create a Word Cloud Data Visualization Chart With d3js, Reactjs, and TypeScript.

A Word Cloud chart is visually representing text, placing importance or frequency of individual words. The importance can be represented using font size, rotation, and fill color.

This format lets the users spot the most important or frequently used words in a DataSet.

In this tutorial I will show you how to create a simple word cloud with d3, using React and TypeScript as type checkers.

Setting up your project

I will be using CRA (SPA) using the MHL template to get TS, SCSS, formatting, templates, linting, etc.

$ yarn create react-app word-cloud --template must-have-libraries

Add d3, d3-cloud and types;

$ yarn add d3 @types/d3 d3-cloud @types/d3-cloud

Creating components using my templates;

$ npx generate-react-cli component WordCloud --type=d3WidgetComponent
$ npx generate-react-cli component WordCloudWidget --type=d3Widget

These templates will create for you the following files;