Beautiful Tag Cloud Generator With Vanilla JS – wordcloud2.js

Preview:

Description:

wordcloud2.js is a JavaScript library to create a tag/word cloud using the HTML canvas or span element. This type of cloud is known as a Wordle and it’s an effective way to visually search through a lot of information. When used effectively, it can provide clarity in understanding and insight of what elements are more important.

It takes a string of text and displays the most frequently used tags/words as bigger and colored in. The most common usage of this library is for making tag clouds for blog posts.

How to use it:

1. Download and load the wordcloud2.js library in the document.

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

2. Create an empty canvas or DIV element for the tag cloud.

<div id="canvas" class="canvas"></div>
<!-- OR -->
<canvas id="canvas"></canvas>

3. Define an array of tags/words with the corresponding weight factor as follows:

const tagList = [
      ['CSS', 12], 
      ['Script', 6],
      ['Com', 8],
      // ...
]

4. Initialize the wordcloud2.js to generate a basic image-based (target container is an HTML5 canvas element) or HTML-based tag cloud on the page.

WordCloud(document.getElementById('canvas'), {
  list: tagList,
});

5. Available options to customize the tag cloud.

WordCloud(document.getElementById('canvas'), {
  list: tagList,
  fontFamily: '',
  fontWeight: 'normal',
  color: 'random-dark',
  minSize: 0, // 0 to disable
  weightFactor: 1,
  clearCanvas: true,
  backgroundColor: '#fff', // opaque white = rgba(255, 255, 255, 1)
  gridSize: 8,
  drawOutOfBound: false,
  shrinkToFit: false,
  origin: null, // origin of the “cloud” in [x, y]
  drawMask: false, // visualize the grid
  maskColor: 'rgba(255,0,0,0.3)',
  maskGapWidth: 0.3,
  wait: 0,
  abortThreshold: 0, // disabled
  abort: function noop () {},
  minRotation: -Math.PI / 2,
  maxRotation: Math.PI / 2,
  rotationSteps: 0,
  shuffle: true,
  rotateRatio: 0.1,
  // circle, cardioid, diamond, square, triangle-forward, 
  // triangle, pentagon, and star
  shape: 'circle',
  ellipticity: 0.65,
  // allows the user to define the class of the span elements
  classes: null,
  // callback
  hover: null,
  click: null
  
});