Word Tag Cloud Generator jQWCloud - Free Download Dynamic Word/Tag Cloud Generator With jQuery And CSS3 - jQWCloud

Free Download Dynamic Word/Tag Cloud Generator With jQuery And CSS3 – jQWCloud

By Posted on

This time I will share jQuery Plugin and tutorial about Dynamic Word/Tag Cloud Generator With jQuery And CSS3 – jQWCloud, hope it will help you in programming stack.

Word Tag Cloud Generator jQWCloud - Free Download Dynamic Word/Tag Cloud Generator With jQuery And CSS3 - jQWCloud
File Size: 6.8 KB
Views Total: 13213
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

jQWCloud is a jQuery plugin which makes use of plain HTML and CSS3 transforms to generate a neat word (tag) cloud from any text with custom weight and color.

How to use it:

1. Create a container element in which you want to generate the word cloud.

view source
1 <div id="wordCloud"></div>

2. Insert jQuery JavaScript library and the jQWCloud.js into your html page.

view source
1 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
2         integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
3         crossorigin="anonymous">
4 </script>
5 <script src="jQWCloud.js"></script>

3. Prepare your words & tags to be presented in the word cloud.

view source
01 const myData = [
02   {word: 'Prashant', weight: 40},
03   {word: 'Sandeep', weight: 39},
04   {word: 'Ajinkya', weight: 11, color: 'green'},
05   {word: 'Rishi', weight: 27},
06   {word: 'Kuldeep', weight: 36},
07   {word: 'Vivek', weight: 39},
08   {word: 'Saheer', weight: 12, color: 'green'},
09   {word: 'Lohit', weight: 27},
10   {word: 'Anirudh', weight: 36},
11   {word: 'Raj', weight: 22},
12   {word: 'Mohan', weight: 40},
13   {word: 'Yadav', weight: 39},
14   {word: 'India', weight: 11, color: 'green'},
15   {word: 'USA', weight: 27},
16   {word: 'Sreekar', weight: 36},
17   {word: 'Ram', weight: 39},
18   {word: 'Deepali', weight: 12, color: 'green'},
19   {word: 'Kunal', weight: 27},
20   {word: 'Rishi', weight: 80},
21   {word: 'Chintan', weight: 22}         
22 ]

4. The JavaScript to generate a basic word cloud in the page.

view source
1 $("#wordCloud").jQWCloud({
2   words: myData
3 });

5. Customize the word cloud with the following options.

view source
01 $("#wordCloud").jQWCloud({
02  
03   // title
04   title: 'JQ WOrd Cloud',
05  
06   // min/max font size
07   minFont: 10,
08   maxFont: 50,
09  
10   // font offset
11   fontOffset: 0,
12  
13   // shows the algorithm of creating the word cloud
14   showSpaceDIV: false,
15  
16   // Enables the vertical alignment of words
17   verticalEnabled: true,
18  
19   // color
20   cloud_color: null,
21  
22   // font family
23   cloud_font_family: null,
24  
25   // color of covering divs
26   spaceDIVColor: 'white',
27  
28   // left padding of words
29   padding_left: null,
30  
31   // classes with space to be applied on each word
32   word_common_classes: null
33    
34 });

6. Callback functions available.

view source
1 $("#wordCloud").jQWCloud({
2   word_click : function(){},
3   word_mouseOver : function(){},
4   word_mouseEnter : function(){},
5   word_mouseOut : function(){},
6   beforeCloudRender: function(){},
7   afterCloudRender: function(){}
8 });

Changelog:

2020-01-21

  • Refactor
  • Supports jQuery 3.4+

This awesome jQuery plugin is developed by prashant1rana. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: