Create Word Cloud using HTML, CSS, and JavaScript

By Faraz - December 17, 2024

Learn how to create a word cloud using HTML, CSS, and JavaScript with this easy step-by-step guide. Perfect for beginners to visualize words creatively.

Join us on Telegram

Read Also Creating a Browser Detector with HTML, CSS, and JavaScript.jpg

Creating a Browser Detector with HTML, CSS, and JavaScript

Creating a word cloud is a fun and creative way to visualize words. A word cloud shows words in different sizes based on their importance or frequency. You can easily create one using HTML, CSS, and JavaScript without any advanced tools.

In this guide, you will learn:

The basic prerequisites for creating a word cloud.
Step-by-step instructions to make a word cloud using Wordcloud2.js library.

Whether you are a beginner or an experienced developer, this tutorial will help you build a beautiful word cloud in no time!

Prerequisites

Before you start, make sure you have the following:

Basic knowledge of HTML, CSS, and JavaScript.
A text editor like Visual Studio Code or Notepad++.
A web browser (Google Chrome, Firefox, etc.).
An internet connection to use the Wordcloud2.js library.

Source Code

Step 1 (HTML Code):

First, create a simple HTML structure to display the word cloud. Let's break down the HTML code step by step:

1. Document Type Declaration

<!DOCTYPE html>

Declares the document type as HTML5.
It ensures that the browser renders the page in standard mode.

2. Opening `<html>` Tag

<html lang="en">

Starts the HTML document.
The lang="en" attribute specifies that the language of the document is English. This is important for accessibility and SEO.

3. `<head>` Section

The <head> contains metadata and links to external resources.

Meta Tags

<meta charset="UTF-8">

Sets the character encoding to UTF-8, which supports special characters and symbols.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Ensures compatibility with older versions of Internet Explorer. It tells IE to use the latest rendering engine.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Makes the page responsive on different devices.
The page scales to fit the screen size of mobile, tablet, or desktop devices.

Title

<title>Word Cloud - JavaScript</title>

Sets the title of the webpage, which appears on the browser tab.

External CSS File

<link rel="stylesheet" href="styles.css">

Links an external CSS file (styles.css) to style the webpage.
This file contains custom styles for the page.

Script Tags

<script defer src="https://ajax.googleapis.."></script>

Imports the jQuery library (version 1) from Google's CDN.
The defer attribute ensures the script loads after the HTML content is parsed.

<script defer src="https://wordcloud2-js..."></script>

Imports the Wordcloud2.js library, which is used to create word clouds dynamically.
The defer ensures it loads in order, after the jQuery script.

<script defer src="script.js"></script>

Links an external JavaScript file (script.js).
This file contains the logic to generate the word cloud on the webpage.

4. `<body>` Section

The <body> contains all the visible content of the webpage.

Canvas Element

<canvas id="wordcloud" width="500" height="500"></canvas>

The <canvas> element creates a drawing area on the webpage.
id="wordcloud": A unique ID to identify the canvas in JavaScript.
width="500" height="500": Specifies the dimensions of the canvas (500px by 500px).

5. Closing Tags

</body>
</html>

Closes the <body> and <html> tags.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Word Cloud - JavaScript</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <canvas id="wordcloud" width="500" height="500"></canvas>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="https://wordcloud2-js.timdream.org/src/wordcloud2.js"></script>
  <script src="script.js"></script>
</body>
</html>

Read Also

Creating Skeleton Loading Using HTML and CSS (Source Code Included)

Step 2 (CSS Code):

To style the page and center the canvas, add simple CSS:

**1. Universal Selector (`*`)**

* {
  margin: 0;
  padding: 0;
}

The * selector targets all elements on the page.
margin: 0; and padding: 0; remove the default margin and padding applied by browsers.
This ensures a consistent layout across different browsers.

2. Body Styling

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #825CFF;
}

`display: flex;`

The display: flex; property turns the <body> into a flex container.
This allows you to use flexbox properties to align content inside the body.

`justify-content: center;`

Aligns content horizontally in the center of the page.

`align-items: center;`

Aligns content vertically in the center of the page.

Together, justify-content: center and align-items: center center the content both horizontally and vertically.

`height: 100vh;`

Sets the height of the body to 100% of the viewport height (100vh).
This ensures the body takes up the full height of the screen.

`background-color: #825CFF;`

Sets the background color of the body to #825CFF, which is a shade of purple.
This gives the page a clean and modern look.

*{
  margin: 0;
  padding: 0;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #825CFF;
}

Step 3 (JavaScript Code):

Now, use JavaScript to display words on the canvas using the Wordcloud2.js library.

1. Words Array

const words = [
  ['JavaScript', 8],
  ['HTML', 7],
  ['CSS', 6],
  ['WordCloud', 6],
  ['Library', 5],
  ['Visualization', 6],
  ['Interactive', 6],
  ['React', 5],
  ['TypeScript', 6],
  ['Laravel', 7],
  ['Tailwind', 5],
  ['Bootstrap', 5],
  ['Material', 5],
  ['Android', 5],
  ['PHP', 5],
];

words is a 2D array where each element contains:
- A word (e.g., 'JavaScript')
- A weight/size (e.g., 8)
The weights determine the size of the word in the word cloud.
Words with higher weights appear larger in the word cloud.

2. WordCloud Function

WordCloud(document.getElementById('wordcloud'), {
  list: words,
  gridSize: Math.round(16 * $('#wordcloud').width() / 1024),
  weightFactor: function (size) {
    return Math.pow(size, 2.6) * $('#wordcloud').width() / 1024;
  },
  fontFamily: 'Times, serif',
  color: function (word, weight) {
    return (weight === 8) ? '#f02222' : '#c09292';
  },
  rotateRatio: 0.5,
  rotationSteps: 2,
  backgroundColor: '#ffe0e0'
});

This block generates the word cloud and customizes its appearance. Let’s break down each property:

3. Key Properties

`list: words`

Specifies the list of words and their weights to display in the word cloud.
The words array is passed as input.

`gridSize`

gridSize: Math.round(16 * $('#wordcloud').width() / 1024),

Determines the gap between words in the word cloud.
The grid size adjusts dynamically based on the width of the #wordcloud canvas.
Larger values reduce word overlap but make the layout more spread out.

`weightFactor`

weightFactor: function (size) {
  return Math.pow(size, 2.6) * $('#wordcloud').width() / 1024;
},

Determines the size of each word based on its weight.
Math.pow(size, 2.6) exponentially increases the size, making higher-weight words stand out more.
The size is scaled relative to the width of the canvas ($('#wordcloud').width()).

`fontFamily`

fontFamily: 'Times, serif',

Sets the font family for the words.
Here, the font is Times, serif.

`color`

color: function (word, weight) {
  return (weight === 8) ? '#f02222' : '#c09292';
},

Sets the color of each word based on its weight:
- If the weight is 8, the color is red (#f02222).
- Otherwise, the color is a lighter red (#c09292).
This highlights important words (like 'JavaScript').

`rotateRatio`

rotateRatio: 0.5,

Controls the rotation of words.
0.5 means 50% of the words will be rotated (e.g., 90 degrees).

`rotationSteps`

rotationSteps: 2,

Defines the number of angles words can be rotated to.
With 2, words can only rotate between two angles (e.g., 0° and 90°).

`backgroundColor`

backgroundColor: '#ffe0e0'

Sets the background color of the word cloud to a light pink shade (#ffe0e0).

const words = [
  ['JavaScript', 8],
  ['HTML', 7],
  ['CSS', 6],
  ['WordCloud', 6],
  ['Library', 5],
  ['Visualization', 6],
  ['Interactive', 6],
  ['React', 5],
  ['TypeScript', 6],
  ['Laravel', 7],
  ['Tailwind', 5],
  ['Bootstrap', 5],
  ['Material', 5],
  ['Android', 5],
  ['PHP', 5],
];

WordCloud(document.getElementById('wordcloud'), {
  list: words,
  gridSize: Math.round(16 * $('#wordcloud').width() / 1024),
  weightFactor: function (size) {
    return Math.pow(size, 2.6) * $('#wordcloud').width() / 1024;
  },
  fontFamily: 'Times, serif',
  color: function (word, weight) {
    return (weight === 8) ? '#f02222' : '#c09292';
  },
  rotateRatio: 0.5,
  rotationSteps: 2,
  backgroundColor: '#ffe0e0'
});

Final Output:

Read Also Create Your Own Dictionary with HTML, CSS, and JavaScript.jpg

Create Your Own Dictionary with HTML, CSS, and JavaScript

Conclusion:

Congratulations! You have successfully created a word cloud using HTML, CSS, and JavaScript. This simple project is a great way to visualize data creatively and improve your web development skills.

By using the Wordcloud2.js library, you can customize the word cloud's appearance, such as word colors, sizes, and spacing. Try adding more words or experimenting with different styles to make your word cloud unique.

Start building and enjoy creating more interactive projects!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: word cloud, word cloud javascript, html word cloud, visualize words, word cloud ui, how to create a word cloud with javascript, step-by-step guide for word cloud using html and css, javascript word cloud tutorial for beginners

End of the article

Latest Post

Create Word Cloud using HTML, CSS, and JavaScript

by Faraz - December 17, 2024

Learn how to create a word cloud using HTML, CSS, and JavaScript with this easy step-by-step guide. Perfect for beginners to visualize words creatively.