Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tag cloud

Tag cloud

Inspired by (but far from beeing as hot) the Mandelbros use of fontcolor, I wanted to use fontsize and link.

/**
@param a the list of tags in JSON format. Key/value should be name of tag and number of occurence.
@param b placeholder for k/v iteration
@param c placeholder for output HTML
@param d placeholder for max value
*/
function(a, b, c, d){
c = //Will contain output HTML
d = '';//Will contain maximum number of occurences of a single tag
//Calculate max (shorter than my approach using Math.max.apply)
for(b in a) d = a[b] > d ? a[b] : d;
//Concat each <a><font></font></a>
for(b in a) c += b.fontsize(7*a[b]/d).link('#' + b);
return c;
}
function(a,b,c,d){c=d="";for(b in a)d=a[b]>d?a[b]:d;for(b in a)c+=b.fontsize(7*a[b]/d).link("#"+b);return c}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 Alexander Prinzhorn
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "tagCloud",
"description": "Create a tag cloud from simple JSON format.",
"keywords": [
"tag",
"cloud",
"fontsize",
"link",
"string"
]
}
<!DOCTYPE html>
<title>Tag cloud</title>
<style>
#ret {font-size:40px;}
a {
color:#00f;
padding:0 .5em;
display:inline-block;
vertical-align:middle;
}
a:hover {color:#f00;}
</style>
<div id="ret"></div>
<script>
// write a small example that shows off the API for your example
// and tests it in one fell swoop.
var myFunction = function(a,b,c,d){c=d="";for(b in a)d=a[b]>d?a[b]:d;for(b in a)c+=b.fontsize(7*a[b]/d).link("#"+b);return c}
document.getElementById( "ret" ).innerHTML = myFunction({
"JavaScript": 854,
"jQuery": 799,
"QUnit": 314,
"CSS": 200,
"Windows": 1,
"Beer": 733,
"Prinzhorn": 1337
});
</script>
@tsaniel

This comment has been minimized.

Copy link

tsaniel commented Oct 5, 2011

Save two bytes.
function(a,b,c,d){c=d="";for(b in a)d=a[b]>d?a[b]:d;for(b in a)c+=b.fontsize(7*a[b]/d).link("#"+b);return c}

By the way, if you don't mind changing the format of the tag list, the following will do as well.

<title>Tag cloud</title>

<style>
  #ret {font-size:40px;}

  a {
    color:#00f;
    padding:0 .5em;
    display:inline-block;
    vertical-align:middle;
  }

  a:hover {color:#f00;}
</style>

<div id="ret"></div>

<script>
  // write a small example that shows off the API for your example
  // and tests it in one fell swoop.

  var myFunction = function(a,b,c,d){c="";for(b in a);for(d in a)c+=a[d].fontsize(7*d/b).link("#"+a[d]);return c}

  document.getElementById( "ret" ).innerHTML = myFunction({
    854: "JavaScript",
    799: "jQuery",
    314: "QUnit",
    200: "CSS",
    1: "Windows",
    733: "Beer",
    1337: "Prinzhorn"
  });
</script>
@Prinzhorn

This comment has been minimized.

Copy link
Owner Author

Prinzhorn commented Oct 5, 2011

Tanks for the two bytes. I added it / removed them.

Your other suggestion is nice, but won't work, because two or more tags can occur the same number of times (same key).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.