A Super Simple Word Cloud Library for a Brandwatch Coding Task

Cloudia is a super simple JavaScript tag cloud library outputting pure HTML and CSS, developed for the Brandwatch front-end developer challenge

Demo

Cloudia Demo using topic data from Brandwatch front-end developer challenge

Usage

Add the Library into the head of your document:

<script src="Cloudio.min.js"></script>
<link rel="stylesheet" href="Cloudio.min.css"/> 

Use the javascript library to generate the word cloud from a URL, JSON String or JavaScript Object like so:

//From URL
var cloud = new Cloudia({
  target: document.querySelector(".empty-div"),
  data: "https://example.com/topic-data.json"
});

//From JSON String
var cloud = new Cloudia({
  target: document.querySelector(".empty-div"),
  data: "{\"topics\":[{\"id\":\"1751295897__Berlin\",\"label\":\"Berlin\",\"volume\":165,\"sentiment\":{\"negative\":3,\"neutral\":133,\"positive\":29},\"sentimentScore\":65}]}"
});

Full Class Documentation:

Development

it is not required that Cloudia Be built, you can run the JavaScript and Less directly in the browser, and locally install and link to the dependencies (Bellow). The build process uses The Less and Closure Compilers to generate a smaller build with runtime dependencies baked in.

Run Time Dependencies

These dependencies are built into Cloudia.min.js

1. NanoAjax

Build

To build you must have grunt CLI installed, you install with NPM with the following command:

npm -g i grunt-cli

Once grunt cli is installed you can run the build by running:

npm install
npm run build

Full Class Documentation

Cloudia

Cloudia a simple WordCloud library By Eliot Stocker

Kind: global class

• Cloudia
  • new Cloudia(options)
  • .setSizeCount(count)
  • .setGenerationSpeed(speed)
  • .setRotationStep(step)
  • .setTextSize(size)

new Cloudia(options)

Param	Type	Default	Description
options	Object		Options object
options.target	HTMLElement		Target HTML Element in which to create word cloud
options.data	String | Object		URL, JSON String on JavaScript Object containing the data for the cloud
[options.textSize]	number	12	Overall text size
[options.ignoreBadItems]	boolean	false	Ignore items in the cloud that don't conform to the schema
[options.generationSpeed]	number	10	number of pixels to move at a time when trying to place words, the larger the number the quicker the cloud will be generated, but you will be more likely to get larger gaps
[options.rotationStep]	number	20	number of degrees to rotate each time trying to place a word, the larger the number the quicker the cloud will be generated, but you will be more likely to get larger gaps, or odd shapes
[options.sizeCount]	number	6	number of sizes for the words in the cloud

cloudia.setSizeCount(count)

change number of different text sizes available at run time (Will regenerate the cloud)

Kind: instance method of Cloudia

Param	Type	Description
count	number	Maximum number of text sizes

cloudia.setGenerationSpeed(speed)

change the generation speed at run time (Will regenerate the cloud)

Kind: instance method of Cloudia

Param	Type	Description
speed	number	generation speed, the lower the number, the closer your words are likely to be, higher numbers will generate significantly faster

cloudia.setRotationStep(step)

change the rotation step side at run time (Will regenerate the cloud)

Kind: instance method of Cloudia

Param	Type	Description
step	number	rotation step size (in degrees), the lower the number, the closer your words are likely to be, higher numbers will generate significantly faster

cloudia.setTextSize(size)

change the overall text size at run time (Will regenerate the cloud)

Kind: instance method of Cloudia

Param	Type	Description
size	number	base font size in pixels, this number will represent the smallest word height in pixels.