TagCanvas with weighted tags

« Return to TagCanvas page

From version 1.6 TagCanvas supports displaying weighted tags. In general tag clouds use the font size of the tag links to highlight their frequency or popularity, so TagCanvas uses the size of the tag text to determine the weight of each tag.

Example

The example below uses the fake tag cloud on the left made up of some of the most popular search terms people have used to find this website (the links don't go anywhere). The TagCanvas cloud uses the font size of the link for the tag height instead of the textHeight option. (You can see the original tag cloud because I have set the hideTags option to false.)

Weighting:

Weighting options explained

The options available for weighted mode are listed in the table on the main TagCanvas page, but I'll describe them here in a bit more detail.

weight

This is the main option that enables weighted mode when it is set to true. When weighted mode is enabled, the font size of each of the links is detected and stored with the tags. It doesn't matter how the font sizes are specified in the original cloud, TagCanvas will use the browser's calculated size in pixels. This has been tested to work with inline styles (e.g. <a style="font-size: 10pt" href="...), CSS classes (e.g. <a class="quite-big" href="...) and even the old font tags (e.g. <font size="15"><a href="...).

Some things to note:

weightFrom

As an alternative to using the font size of the tag links, the name of an attribute of the link may be specified using the weightFrom option. The attribute should contain a numeric value that would correspond to a font size in pixels.

Of course, links don't normally have a weight attribute and none of the standard link attributes are really suitable for use as the weight, so I suggest using an HTML5 custom data attribute. If you view the source of this page you will see that I am using an attribute called data-weight on each of the links in the tag cloud, and the TagCanvas weightFrom is set to "data-weight".

Using this method, the weight of the tags can be completely independent from the size of the font used for each tag. Any links where the attribute is not found will be given the weight from the textHeight option.

weightMode

This option specifies how the weighting is applied to the tags, and must be one of these values:

size
The default - canvas tags are shown using the font size of the original tag link.
colour
The relative weights of the tags are mapped onto a colour gradient, and the tag is shown in the corresponding colour.
both
Uses "size" and "colour" on the tags at the same time.

To see the different modes in action, try the buttons under the example cloud above.

weightSize

This option can be used to adjust the size of the text in the tag cloud when using the "size" or "both" weight modes. The font size is multiplied by this number, which has a default value of 1.0.

To increase the font sizes, increase the value of weightSize, and to decrease the font size, reduce the value of weightSize.

weightGradient

A gradient.

In colour-weighted mode, TagCanvas maps the range of weights (or font sizes) onto a colour gradient, with the lowest weight at one end and the greatest weight at the other end.

The default gradient is shown on the right, with the colour of the greatest weight at the top and the lowest weight at the bottom.

The gradient is set using an object as an associative array:

var gradient = {
 0:    '#f00', // red
 0.33: '#ff0', // yellow
 0.66: '#0f0', // green
 1:    '#00f'  // blue
};
TagCanvas.weightGradient = gradient;

The gradient should start with the colour for the "heaviest" tag at 0, and ending at 1 with the least weighty tag colour. All the usual colour types supported by CSS are allowed, so you could even set the alpha value and fade the text out:

var gradient = {
 0:   'red',            // red
 0.5: 'orange',         // orange
 1:   'rgba(0,0,0,0.1)' // black, but 90% transparent
};

To try out the gradient above, click here.

Other stuff

If all tags are found to have the same weight, weighted mode will automatically be turned off.

The chrome coloured shadow bug that I previously covered here does not affect TagCanvas from version 1.7, as tags are no longer drawn directly using a gradient.