I have a tag cloud and I need to know how can I change the font-size for the most used tags.
I need to set a min-font-size and a max-font-size.
You could use a linear or logarithmic assessment of the number of items associated with a certain tag relative to the largest tag, multiply it by the difference between minimum and maximum font sizes, then add it to the minimum font size. For example, the math in pseudocode might be:
let min = 12, max = 24
for each tag
font = (items / items in biggest tag) * (max - min) + min
To make @Delan's answer more clear I created some examples in languages I am familiar with.
var tags =
[
{ Name: "c#", Uses: 100 },
{ Name: ".net", Uses: 75 },
{ Name: "typescript", Uses: 50 },
{ Name: "lua", Uses: 50 },
{ Name: "javascript", Uses: 25 },
{ Name: "jquery", Uses: 1 },
{ Name: "c++", Uses: 0 },
];
var max = 100; // Should be computed
var min = 0; // Should be computed
var fontMin = 10;
var fontMax = 20;
for (var i in tags)
{
var tag = tags[i];
var size = tag.Uses == min ? fontMin
: (tag.Uses / max) * (fontMax - fontMin) + fontMin;
}
var tags = new List<Tag>
{
new Tag { Name = "c#", Uses = 100 },
new Tag { Name = ".net", Uses = 75 },
new Tag { Name = "typescript", Uses = 50 },
new Tag { Name = "lua", Uses = 50 },
new Tag { Name = "javascript", Uses = 25 },
new Tag { Name = "jquery", Uses = 5 },
new Tag { Name = "c++", Uses = 5 },
};
int max = tags.Max(o => o.Uses);
int min = tags.Min(o => o.Uses);
double fontMax = 20;
double fontMin = 10;
foreach (var tag in tags)
{
double size = tag.Uses == min ? fontMin
: (tag.Uses / (double)max) * (fontMax - fontMin) + fontMin;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With