JavaScript Tag Cloud

Our site remains ad-free thanks to our affiliates. This post's featured affiliate is Fiverr. Fiverr connects businesses with freelancers offering digital services in 300+ categories.

The post is not sponsored by the above affiliate and the content here is not representative of their company.

In a previous tutorial we made a PHP Tag Cloud generator function. But, some people don’t have access to PHP or need the tag cloud to update live using ajax or other means. Below is the JavaScript function and code. The code is fairly similar to the PHP Code, but just modified slightly for use with JavaScript. You call the function by identifying the DOM which all the words are listed in, and you also have to specify the Node Name, such as span or div.

Each Node Name that you specify requires a data variable of “count”, which is the occurrence of that word. Also in the main DOM, you need to specify the minfont and maxfont data variables for the font sizes. An example will be shown below.

function tagcloud(dom,tag) {
	var highVal = 0;
	var lowVal = Number.MAX_VALUE;
	var elements = dom.getElementsByTagName(tag);
	var minFont = parseInt(dom.getAttribute('data-minfont'),10);
	var maxFont = parseInt(dom.getAttribute('data-maxfont'),10);
	var fontDif = 0;
	var sizeDif = 0;
	var size = 0;
	var i = 0;
	var data = 0;

	for(i = 0; i < elements.length; ++i) {
		data = parseInt(elements[i].getAttribute('data-count'),10);
		if(data > highVal) {
			highVal = data;
		}
		if(data < lowVal) {
			lowVal = data;
		}
	}

	fontDif = maxFont - minFont;
	sizeDif = highVal - lowVal;

	for(i = 0; i < elements.length; ++i) {
		data = parseInt(elements[i].getAttribute('data-count'),10);
		size = (fontDif * (data - lowVal) / sizeDif) + minFont;
		size = Math.round(size);
		elements[i].style.fontSize = size + "px";
	}
}

Now, an example on how to use the function once you include it one way or another in your HTML document.

<!doctype html>
<html>
	<head>
		<script src="tagcloud.js"></script>
	</head>
	<body>
		<div id="tagcloud" data-maxfont="32" data-minfont="12">
			<span data-count="18">lorem</span>
			<span data-count="5">ipsum</span>
			<span data-count="9">dolor</span>
			<span data-count="11">sit</span>
			<span data-count="14">amet</span>
			<span data-count="2">consectetur</span>
			<span data-count="16">adipiscing</span>
		</div>

		<script>
			var tc = document.getElementById('tagcloud');
			tagcloud(tc,'span');
		</script>

	</body>
</html>

Related Posts

HTML5 Game Development Basics

Learn how to get started with creating games using HTML5 and JavaScript without any libraries.

How JSON P Works With Library

Learn how JSONp works along with sample JavaScript to perform a JSONP request.

HTML5 Uploading with Progress Bar

Learn how to show a progress bar when users are uploading files to your website using HTML5 and JavaScript.

Bypass Google Analytics Opt-Out Extension

Easily bypass Google Analytics Opt-Out browser extension with a few lines of JavaScript and start tracking all users again.