TagCanvas with weighted tags

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

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:

TagCanvas uses the font size at the <a> element,
and does not take into account any nested elements that change the font
size inside it.

Image tags are not affected by weighting and will retain their
natural size.

Weighting does not currently work with Internet Explorer versions up
to 8 using the tag font size, though IE9 is supported. To use weighting with
IE<9, you must use the weightFrom option - colour mode will
not work, but size mode should.

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 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: