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.)

Weight mode

The buttons under the cloud allow you to try out the different weight modes available. The full description of each mode is in the section below.

Weighting options explained

The options available for weighted mode are listed in the table on the main TagCanvas options 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.

From version 2.5, weightFrom supports multiple weight sources for displaying weights using different modes. Separate the list of attribute names with spaces or commas: “data-count data-frequency”.

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 a font size based on their weight.
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.
bgcolour
Sets the tag's background colour using the colour gradient.
bgoutline
Sets the tag's outline colour using the colour gradient. You must enable tag outlines using the bgOutlineThickness option, or there will be nothing to set the colour of.
outline
Sets the highlight colour using the colour gradient. This works for all outline modes that use colour to highlight the active tag.

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

When using multiple weight sources in weightFrom you should list the modes to use for each source, separated by spaces or commas.

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.

weightSizeMin and weightSizeMax

Instead of directly using font sizes derived from the tag weights, you can use the weightSizeMin and weightSizeMax options to specify the minimum and maximum font sizes to use. To use these options, weightSizeMin must be greater than 0 and weightSizeMax must be greater than weightSizeMin. The font sizes used here will still be multiplied by the value in 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.

When using multiple weight sources in weightFrom, you can specify different gradients for each mode using an array of gradients:

var gradients = [{
 0:   'red',            // red
 0.5: 'orange',         // orange
 1:   'rgba(0,0,0,0.1)' // black, but 90% transparent
}, {
 0:   '#000',           // black
 1:   '#fff'            // white
}];
TagCanvas.weightGradient = gradients;

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.

Some example gradients

I realise the format of the gradients might be a bit confusing, so here are some examples you can use or modify for your own site. Remember – gradients start off with the ‘heaviest’ weight!

Default: { 0: "#f00", 0.33: "#ff0", 0.66: "#0f0", 1: "#00f" }

Black to white: { 0: "#000", 1: "#fff" }

Red to yellow: { 0: "#f00", 1: "#ff0" }

Red to white: { 0: "#f00", 1: "#fff" }

Red, yellow, white: { 0: "#f00", 0.6: "#ff0", 1: "#fff" }

Red to blue: { 0: "#f00", 1: "#00f" }

Red, white, blue: { 0: "#f00", 0.5: "#fff", 1: "#00f" }

White to blue: { 0: "#fff", 1: "#00f" }

White, cyan, blue: { 0: "#fff", 0.3: "#0ff", 1: "#00f" }

White, blue, black: { 0: "#fff", 0.3: "#00f", 1: "#000" }

White, cyan, blue, black: { 0: "#fff", 0.3: "#0ff", 0.7: "#00f", 1: "#000" }

« Back to top of page Multi-colour and multi-font »

This site uses cookies - details here.