almete.wordcloud

almete.WordCloud

almete.WordCloud(words, cloudWidth, cloudHeight, {
  createCanvas = function() {
    return document.createElement('canvas');
  },
  fontFamily = 'serif',
  fontSizeRatio = 0,
  fontStyle = 'normal',
  fontVariant = 'normal',
  fontWeight = 'normal',
  gap = 0,
  rotation = 0,
  rotationUnit = 'turn',
  text = '',
  weight = 1,
})

Generates a cloud out of the words.

argument	description
words	An array of the words to place into the cloud. A word is an object which is resolved to {text, weight, rotation, rotationUnit, fontFamily, fontStyle, fontVariant, fontWeight}.
cloudWidth	The width of the cloud, in pixels.
cloudHeight	The height of the cloud, in pixels.
createCanvas	Creates a new Canvas instance.
fontFamily	The default font family for each word.
fontSizeRatio	The font size ratio between the words. For example, if the value is 5, then the largest word will be 5 times larger than the smallest one. The value 5 has the same effect as the value 1/5.
fontStyle	The default font style for each word.
fontVariant	The default font variant for each word.
fontWeight	The default font weight for each word.
gap	The gap between the words. The value is relative to the font size.
rotation	The default rotation for each word.
rotationUnit	The default rotation unit for each word. Possible values are 'turn', 'deg' and 'rad'.
text	The default text for each word.
weight	The default weight for each word.

Returns bounded words as an array of objects.

[{
  centerLeft,
  centerTop,
  font,
  fontFamily,
  fontSize,
  fontStyle,
  fontVariant,
  fontWeight,
  height,
  left,
  rotationDeg,
  rotationRad,
  rotationTurn,
  text,
  textWidth,
  top,
  weight,
  width,
}]

demo

Try it out!

setup

npm

npm install almete.wordcloud

ES module

import WordCloud from 'almete.wordcloud';

Node

let WordCloud = require('almete.wordcloud');

browser

<script src="https://unpkg.com/almete.wordcloud"></script>

The function WordCloud will be available under the namespace almete.

usage

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
let words = [
  {text: 'romance', weight: 19, rotation: 45},
  {text: 'horror', weight: 3, rotation: -45},
  {text: 'fantasy', weight: 7, rotation: 45},
  {text: 'adventure', weight: 3, rotation: -45},
];
let boundedWords = almete.WordCloud(words, canvas.width, canvas.height, {
  fontFamily: 'Roboto',
  fontWeight: 'bold',
  rotationUnit: 'deg',
});
boundedWords.forEach(({
  centerLeft,
  centerTop,
  font,
  rotationRad,
  text,
}) => {
  ctx.save();
  ctx.translate(centerLeft, centerTop);
  ctx.rotate(rotationRad);
  ctx.font = font;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = 'LightCoral';
  ctx.fillText(text, 0, 0);
  ctx.restore();
});

see also

• VueWordCloud