Demo of jQuery Tag Cloud `jquery.tagcloud`

Tag cloud plugin for jQuery, showing bigger tags in the center.

Example 1: Use `li` HTML tags to define the tag cloud, and options for custom colors

Tag Cloud	HTML	JavaScript
HTML HTML5 CSS CSS3 JavaScript jQuery React.js Angular Express Sharepoint ASP.NET Vue.js Spring Django Flask	<ul id="demoCloud1"> <li data-weight="60"><a href="#">HTML</a></li> <li data-weight="20><a" href="#">HTML5</a></li> <li data-weight="65">CSS</li> <!-- no link --> <li data-weight="35"><a href="#">CSS3</a></li> <li data-weight="85"><a href="#">JavaScript</a></li> <li data-weight="100"><a href="#">jQuery</a></li> <li data-weight="78"><a href="#">React.js</a></li> <li data-weight="62"><a href="#">Angular</a></li> <li data-weight="82"><a href="#">Express</a></li> <li data-weight="10"><a href="#">Sharepoint</a></li> <li data-weight="15"><a href="#">ASP.NET</a></li> <!-- etc... --> </ul>	$(document).ready(function() { $('#demoCloud1').tagCloud({ tag: { color: '#444444', backgroundColor: '#f8f8cc' } }); });

Tag Cloud	HTML	JavaScript
	<div id="demoCloud2"> </div>	$(document).ready(function() { let options = { container: { width: 630, backgroundColor: '#fafaf8', //fontFamily: '"Times New Roman", Times, serif', }, tag: { format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}', maxFontSize: 41, // max font size in pixels minFontSize: 8, // min font size in pixels textShadow: true // enable text shadow }, data: [ { name: 'HTML', link: '#', weight: 60 }, { name: 'HTML5', link: '#', weight: 90, tooltip: 'Sample "tooltip" message' }, { name: 'CSS', link: '#', weight: 65 }, { name: 'CSS3', link: '#', weight: 35 }, { name: 'JavaScript', link: '#', weight: 85 }, { name: 'jQuery', link: '#', weight: 100 }, // etc... ] } $('#demoCloud2').tagCloud(options); });