Inspired by (but far from beeing as hot) the Mandelbros use of fontcolor, I wanted to use fontsize and link.
-
-
Save Prinzhorn/1262246 to your computer and use it in GitHub Desktop.
Tag cloud
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| @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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "tagCloud", | |
| "description": "Create a tag cloud from simple JSON format.", | |
| "keywords": [ | |
| "tag", | |
| "cloud", | |
| "fontsize", | |
| "link", | |
| "string" | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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).