Giter VIP home page Giter VIP logo

jquery.awesomecloud.plugin's Introduction

awesomeCloud - jQuery Plugin

The awesomeCloud plugin creates a word or tag cloud using the HTML5 canvas element, using a wordlist that exists on your page.

Requirements

  • jQuery 1.7+
  • browser that supports the canvas element

Demo

http://indyarmy.com/awesomeCloud/

Usage

$( "#wordCloudContainer" ).awesomeCloud( settings );

awesomeCloud assumes that each child of the container is an HTML element with a data-weight attribute containing an integer or decimal value that reflects it's "weight", and the content of the element is the word. For example, <span data-weight="12">first</span> is a valid child, as is <span data-weight="12"><a href="http://indyarmy.com/">second</a></span>.

Settings

"size" : {
	"grid" : 8, // word spacing, smaller is more tightly packed
	"factor" : 0, // font resize factor, 0 means automatic
	"normalize" : true // reduces outliers for more attractive output
},
"color" : {
	"background" : "rgba(255,255,255,0)", // background color, transparent by default
	"start" : "#20f", // color of the smallest font, if options.color = "gradient""
	"end" : "rgb(200,0,0)" // color of the largest font, if options.color = "gradient"
},
"options" : {
	"color" : "gradient", // if "random-light" or "random-dark", color.start and color.end are ignored
	"rotationRatio" : 0.3, // 0 is all horizontal, 1 is all vertical
	"printMultiplier" : 1, // set to 3 for nice printer output; higher numbers take longer
	"sort" : "highest" // "highest" to show big words first, "lowest" to do small words first, "random" to not care
},
"font" : "Helvetica, Arial, sans-serif", // the CSS font-family string
"shape" : "circle" // the selected shape keyword, or a theta function describing a shape

Example

<div id="wordcloud" style="border:1px solid #f00;height:150px;width:150px;">
	<span data-weight="14">word</span>
	<span data-weight="5">another</span>
	<span data-weight="7">things</span>
	<span data-weight="23">super</span>
	<span data-weight="10">cloud</span>
</div>
<script>
	var settings = {
		"size" : {
			"grid" : 16
		},
		"options" : {
			"color" : "random-dark",
			"printMultiplier" : 3
		},
		"font" : "Futura, Helvetica, sans-serif",
		"shape" : "square"
	}
	$( "#wordcloud" ).awesomeCloud( settings );
</script>

Notes

AwesomeCloud uses the HTML5 canvas element to create word clouds similar to http://wordle.net/. It may or may not work for you.

If your words are all fairly evenly weighted and are large compared to the containing element, you may need to adjust the size.grid setting to make the output more attractive. Conversely, you can adjust the size.factor setting instead.

It should be noted that the more words you have, the smaller the size.grid, and the larger the options.printMultiplier, the longer it will take to generate and display the word cloud.

Extra Thanks

Without Timothy Chien's work (https://github.com/timdream/wordcloud), this plugin would have taken much longer and been much uglier. Fate smiled and I found his version while I was searching out the equations I needed to make a circle-shaped cloud. I've simplified and, in places, dumbified his code for this plugin, and even outright copied chunks of it since those parts just worked far better than what I had originally written. Many thanks, Timothy, for saving some of my wits, sanity and hair over the past week.

Thanks to http://www.websanova.com/tutorials/jquery/jquery-plugin-development-boilerplate for providing a great boilerplate I could use for my first jQuery plugin. My original layout worked, but this one was much better.

jquery.awesomecloud.plugin's People

Contributors

fernandoferreira-me avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

jquery.awesomecloud.plugin's Issues

About tag cloud

Is there some syntax for awesomeCloud.plugin
to click on each span item to go to another location?????????
(e.g. word, another I want to click on them)

word another things super cloud
<script> var settings = { "size" : { "grid" : 16 }, "options" : { "color" : "random-dark", "printMultiplier" : 3 }, "font" : "Futura, Helvetica, sans-serif", "shape" : "square" } $( "#wordcloud" ).awesomeCloud( settings ); </script>

When calling many times, it doesn't render the cloud.

Excellent plugin.

After calling the plugin to render the tag cloud (because the spans are populated via ajax). There are some times that the canvas does not render the cloud, but the spans exists.

var settings = {
"shape": "square",
"options": {
"rotationRatio": "0.3",
"printMultiplier": 1
},
"color": {
"start": "#fff",
"end": "#fff"
},
"size": {
"grid": 8,
"factor": 18
}
};

$("#awesomeWordcloud").awesomeCloud(settings);

Color by data weight

I was trying to have the colors separated so that each data weight was it's own color. I know it wasn't an option originally so I thought that creating a class for the span tag and editing the css to specify the color would do it, but that isn't working. Does anyone have any suggestions?

Canvas complete

Is there a way to attach a listener, that executes, when all the words are ready on the canvas?

Possible to specifiy max/min sizes?

My data contains a large range of word counts. For instance, there is one word that occurs 1000 times and lots of words that occurs only 20-30 times.

This results in nothing being displayed. Tweaking the "factor" allows me to display some of them. I guess it's because the 1000-times word gets scaled to much and simply disappears and the small ones gets, well, too small to display.

So, I'm wondering if it's possible to either specify a max/min font size. Or (preferable) saying that the font sizes should not be calculated linearly, maybe using "log n" or sqrt(n) or something like that.

Something like this perhaps: http://www.jasondavies.com/wordcloud

Doesn't work in RTL

Hi!

This plugin doesn't work in RTL, at ALL, not even a little.

We can't even use a workaround like direction:ltr;, like we can in most LTR-only plugins, because it appends items directly to the body.

Instead of appending text directly to the body for text measurement purposes, can we append it to a
<div style="direction:ltr;"> INSIDE the body?

This would be a simple workaround for RTL websites.

Edit:

As a workaround, I modified the library as follows:
I added
$('<div style="direction:ltr;text-align:left;"><div id="awesomecloud-text-marker"></div></div>').prependTo($('body'));

Then replaced all instances of $('body') with $('#awesomecloud-text-marker'); inside the library itself, and it works, now.

Only one color for words?

Hi!

Great plugin. Is it possible to use just one color for fonts? Or do I need to set the gradient option and set the start and end color to the same color?

Thanks

settings.color.increment.* returns Infinity

Sometimes when use the gradient don´t colorize the words because settings.color.increment.* returns Infinity. This is caused because when you calculate this.settings.range doesn't control if all tags has weight 1 and range returns 0 then in:
"r": ( this.settings.color.end.r - this.settings.color.start.r ) / this.settings.range and G and B returns Infinity. To solve this I put an if statement to calculating if range==0 then range=1.
Here all tags are printed.

I hope I have helped
Greetings and thanks for this great script.

Make All Tags Black

I see I can set them to dark, but I want them all black. Even if I call in the CSS it seems to still overwrite with a grey color.

onclick event

Can you add an onclick event so that when a word is clicked on we can register an event handler to do the next action. For instance if the words were trending words then clicking on them would bring up a search page with that word

Cloud is smooth on-screen, but jagged on paper - and vice versa

If you don't touch the printMultiplier option, the cloud will look good on-screen, but will print very pixelated. If you set the printMultiplier to something like 3, the cloud looks jagged on-screen, but prints much more nicely.

I'll be experimenting with ways to fix this so the cloud looks smooth on-screen and prints smoothly. No solution yet.

Color Specification Not Working in Index.html

Changing font, shape, and options (including "color" : "gradient") all work perfectly, but adding "color" to specify color range does not work in index.html. It only updates if you change it in jquery.awesomeCloud-0.2.min.js.

Links on words

Make it work with tags as well! Make it a tag cloud, not just a word cloud!

Normalize ratio?

Hi,
It would be great if you changed the "normalized" parameter so that it is not a boolean but a float, so we can choose something like "normalized" = "80%".

when it's 100%, all tags are equal (equal size), when 0%, it respects to the weights fully.

Thanks for this great plugin by the way !

Incomplete render

Hi,

Excellent work! Thank you for your contribution!

I'm using it and found that for my list of 10 words, it only renders 7 or 8. I played with all the variables/options your have documented, but I can't make it show the 10 of them.

What is happening?

cheers
cesar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.