How to create a tag cloud? (With formula and sample calculation)

I googled on how to create a tag cloud. I found some, but, I didn't like their way of doing it because I think they did it the improper way. That's why I wrote this blog so that it's my turn to post something educational.

But before anything else, what is a cloud tag? Let me define it in my own words. Visually, it is a group of terms displayed with varying font sizes that are packed together so that it resembles a cumulus cloud. It is usually arranged alphabetically and center-aligned. Some tag clouds also have varying colors. In HTML, each tag is usually a hyper link. Conceptually, each tag isn't just a mere term; a tag in a cloud tag is a representation of an idea, a concept, or something that can be weighted; so, a bigger tag means a greater value or interest. (For example, the flicker tag cloud: http://www.flickr.com/photos/tags/ )

Now the question is how. How are the sizes of tags made vary? Simple. In HTML, just use the CSS font-size attribute.

Example:
<_a href="http://www.blogger.com/mylink"> tag item <_/a>

Look at the example above. If that looks strange to you, then stop reading right now and go away because you're not my target reader.

If you're still reading, then you know that that's an HTML tag for a link.

To have a tag cloud, you need many tags but with varying font sizes among them. That's easy, isn't it? But the hard part is generating those tags dynamically and computing the right size for the right tag.

What you need is a database of tags. Then query your database so that you have with you the list of tags and their number of occurrences. See the following table for example.

tags           | occurrences       
----------------------------------------------------------
birthday       | 144
christmas      | 108
valentines     | 211
thanksgiving   | 168
liberation     | 88
halo ween      | 114
new year       | 140

The above table is our sample data. Each tag represents your customers favorite holiday. How can you present the tags as a cloud tag being the valentines day as the biggest (with 50px font-size) and the liberation day as the smallest (with 12px font-size)?

We will use the following variables, namely:
a = the smallest count (or occurrence).
b = the count of the tag being computed.
c = the largest count.
w = the smallest font-size.
x = the font-size for the tag. It is the unknown.
y = the largest font-size.


Now let's substitute the given values to their respective variables. Assuming that we are solving for the "thanksgiving" font-size.
a = 88
b = 168
c = 211
w = 12
x = ?
y = 50

And here's the formula:

x =   (b-a) (y-w)
    ----------- + w
      (c-a)

Or to put it in one liner (using c-like syntax):

x =  ( ((b-a) * (y-w)) / (c-a) ) + w

And that's it. That's the formula. You might be wondering where I get that formula. Well, it's hard to explain here in words but let me still try. Using the "ratio and proportion" in Mathematics, the ratio of the distance between a and b and the distance between a and c is equated with the distance between w and x and the distance between w and y.

Or to make it simple,

b-a     x-w
----- = -----
c-a     y-w

Let's now continue computing the font-size for the thanksgiving. By substituting the values to the equation above, we will have...

x = ( ((168-88) * (50-12)) / (211-88) ) + 12
x = 36.715446
x = 37

The thanksgiving tag should have 37px font-size in the tag cloud. Try computing for the rest of the tag. You will get:
birthday = 29px
christmas = 18px
valentines = 50px
thanksgiving = 37px
liberation = 12px
halo ween = 20px
new year = 28px

--End

tip: When using Java, operate on float data type, not integer.

OpenSolaris Not Yet Ready For My Laptop

Recently, I blogged about the disaster that I experienced regarding the ext3 file system and concluded that I would want to try the Zettabyte File System on Solaris.

I have an HP Pavilion dv5600 laptop.

I downloaded and installed the Solaris Express Developer Edition on my laptop. This Solaris version is based on breakthrough development of the OpenSolaris operating system. But after trying it on my laptop, I learned that it doesn't support my HP laptop hardware yet. The Indiana OpenSolaris Developer Preview did not give me a good luck either.

Another operating systems that make use of the ZFS are the FreeBSD Alpha and the Mac OS X Leopard. I don't want to use FreeBSD which has the ZFS because it isn't stable yet. Mac OS X Leopard is too expensive for me; I can't afford it.

So, what now? I'm back to Linux. Linux is the best open source OS as far as the firmware/drivers is concerned. My Ubuntu Linux runs almost perfect on my HP Pavilion dv6500 laptop. But as soon as OpenSolaris is able to run on my laptop, I will always be willing to switch to it, only because of ZFS that I've been wanting to experience.

The hunger for a bite of Zettabyte

I've been using ext3 as my filesystem of choice since I touched Linux sometime in 2004. And I've never been very disappointed until now. There was a time that I thought that reiserfs is better than ext3 so I switched, but this reiserfs betrayed me when it's journal got corrupted and I could no longer recover my data. Badly irritated, I switch back to ext3 and I'd been so happy using this ext3 until yesterday.

What happened yesterday? I booted Linux, entered gnome, opened nautilus, then my computer hanged. I couldn't use the keyboard and mouse so I forced a shutdown to my computer by pressing my computer's power off button. And surprised! My computer don't boot anymore. GRUB was giving error 17.

What did I do? I downloaded Ubuntu Live-cd and patiently waited for 8 hours for the download to finish. Then I borrowed my friend's laptop to burn the ubuntu iso image. I burned it and booted it and run it. And from the running live-cd, I googled for troubleshooting the GRUB error 17 and found out that the ext3 partition of my hard disk no longer contains a readable data. I googled again and again but found no appropriate solution. When I realized that I've already spent half of a day googling and reading solutions but finding no real answer, my last resort was to follow someone's suggestion and that is to use the fsck utility.

I run the dangerous fsck....

done...

I rebooted but now GRUB gives error 15. I booted from the live-cd again to see what's inside the "rescued ext3 partition". To my surprised, the ext3 was then able to be mounted. I thought my problem was already fixed. But when I looked inside the partition. I was shocked. It only contains a single "Lost+Found" folder that contain full of directories and files with names I can not understand. Where's my data!!!! I shouted.

After all the hassles and boring journey of trying to rescue the corrupted
ext3 filesystem, my reward is a "lost of data" award. I lost the files that I've been keeping since 2001. I lost the project files that I was currently working on. Can you imagine how miserable life ext3 gave me?

Dismayed, breathing deeply and with crossed eye brows, my only solution was to reinstall a new OS. The data that I lost from that corrupted ext3 is a big pain in the a$$.

"If I'm going to install a new OS, what would it be?" I asked myself. I remembered there is a filesystem that they call as the Zettabyte File System or ZFS. I think it is the best file system available today. It is the default filesystem of any opensolaris distribution. It's maybe the right time to try opensolaris and take advantage of its ZFS goodness. What I want about ZFS is its ability to self heal and its defensive and careful approach to managing data. I hope, with ZFS, I will never experience again the same trouble that ext3 gave me.

Firefox Extensions Useful for Web Developers

Firefox isn't only for web browsing, but can also be a useful tool for developers. If you are a web developer, you can install and take advantage of Firefox wide array of developer-friendly extensions. The following is a list of some Firefox extensions that I enjoy using:

• View Source Chart Creates a Colorful Chart of a Webpage's Rendered Source Code
• Dummy Lipsum Generate "Lorem Ipsum" dummy text
• Domain Details Find the whois information, IP Address and other information, including Search Engine stats and server information, on the site you are visiting.
• JSView View the source code of external stylesheets and javascripts.
• HTML Validator Adds HTML validation to the View Page Source of the browser. The validation is done by Tidy by W3C.
• Firebug Unified debugger for HTML, CSS and Javascript. The only one and the best.
  

There are still more Firefox extensions for web developers from here.

Java I/O API cheatsheet

Hey, Java students or Java newbies out there!!! This cheat sheet might help you. It is well categorized according to usage so that it is easy to remember. Enjoy :)

The above is a PNG image. I suggest you save that on your computer so that you can review it anytime.

Learn Actionscript 2.0 from Java

If you are a Java programmer, learning ActionScript 2.0 (AS2) is very easy because it is very much similar to Java 1.4. I present in this blog the syntactical differences/comparison between the languages Java 1.4 and AS2 so that by looking at the differences, you can immediately learn the AS2 syntax. But bear in mind that this post is intended to be a quick reference only if you want to learn AS2 from your existing knowledge in Java 1.4 language syntax. You still have to read more books or tutorials in order to learn AS2 fully.

	Java 1.4	ActionScript 2.0
source file	•file name is MyClass.java •multiple class per file (one class must be public)	•filename is MyClass.as •one class per source file
declaring a class and interface	class MyClass { /* constructor and member variables/methods are declared inside the class in any order. */ } ================ interface MyInterface extends Interface1, Interface 2 { }	all the same as Java. implicitly public. note: comments in ActionScript and Java are the same; the // and /* */ are all valid in AS2. The class in AS2 can also be defined as dynamic*.
declaring a constructor	•MyClass() { } •MyClass(Type param1, Type param2) { } package-private by default.	•function MyClass() { } •function MyClass(param1:Type, param2:Type) { } valid access modifiers are public (the default) and private. A class can contain only one constructor function; overloaded constructor functions are not allowed in ActionScript 2.0.
declaring a method	•void myMethod(); •void myMethod() { } •void myMethod(ParamType param1, ParamType param2) { } •ReturnType myMethod() { return returnObj; }	•function myMethod(); •function myMethod() { } •private static function myMethod() { } •function myMethod( param1:ParamType, param2:ParamType) { } •function myMethod() : ReturnType { return returnObj; } no synchronized, abstract and final modifiers. no method overloading. valid modifiers are only public (the default), private, static.
declaring a member variable	•Type myVariable; •Type myVariable = new Type();	•var myVariable:Type; •var myVariable:Type = new Type; •private static var myVariable:Type; valid modifiers are public (the default), private, static. no final modifier.
packaging and importing	package pakedge; class MyClass { } ============== import pakedge.MyClass; or import pakedge.*;	class pakedge.MyClass { } AS2 and Java has no difference with regards to importing a class or package. note: the packaging in AS2 is very much like the packaging in Java--they're just folders. Specifying the fully-qualified-name of a class in AS2 is the same as in Java example: var myVar:pakedge.MyClass = new pakedge.MyClass() ).
error handling	try { } catch (Exeption ex) { } finally { }	try { } catch (error:Error) { } finally { } (all the same with Java)
inheritance	•class SubClass extends SuperClass { } •class SubClass implements SuperInterface { } •class SubClass extends SuperClass implements SuperInterface1, SuperInterface2 { }	all the same with Java.
encapsulation	•private, package-private, public •default for members is package-private	•private and public •default for members is public

*ActionScript 2.0 lets you define a class as "dynamic." When a class is dynamic, new properties or methods can be added at runtime into any instance of such class. (If you're familiar with C# 3.0, you know what I mean.) Some of Flash' built-in classes--for example, MovieClip, LoadVars, and SharedObject--are dynamic classes, which is why you can dynamically add properties and methods to instances of these classes.

One more notable thing is the presence of "anonymous function" and "function pointer" in AS2 but is lacking in Java. (But still one more notable thing is that Java can live without anonymous function and function pointer that's why I thank Sun for making Java simple and elegant and a kind of do-everything-with-OOP-in-mind-for-the-sake-of-consistency language :-)

What about classpath? In ActionScript, classpath is only necessary at compile time. The folder wherein your FLA file is located is the classpath. For example, if you're working on a flash document "calculator.fla" located in C:\myprojects , the C:\myprojects folder is your classpath and you must put your ActionScript source codes in there so that the ActionScript compiler can see it. The Flash IDE allows you to specify another folder to be included in your classpath. But I'm not gonna explain those here.

The this and super keywords in Java is also used similarly in AS2.

The OOP in AS2 is very much similar to Java but always remember that AS2 is also an ECMA language, so, you can still see ActionScript code that has a similar syntax like JavaScript.

Another thing, if the entry point of the program in Java application is the public static void main(String[] args) and for the applet is the public void init() method, the entry point to run a AS2 program is any action or event fired by a user (user-based actions such as "on click") or by a time event (time-based event such as "on load").

AS2 has no constants/read-only/final variables, it doesn't even have non-overridable/final methods.

There's a lot more to learn about AS2 that I leave you to discover such as its data structures, the compiler directive such as #include (I'm not kidding), the syntactic sugar for getters and setters, the delete operator, the with statement, undefine data type, the special syntax for event handling, the for...in loop, etc.

Hope this quick reference is benificial to you. :)

Welcome Message

Actually, I have many blogs but each of them has its own purpose and target audience. Now this blog is about my relationship with my present occupation and career.

I'm a... wait, what am I going to call myself? A computer programmer because I write computer prorams? An encoder because I write program source codes? A software developer because I develop software applications? A web developer because I develop web apps? A system analyst because I analyze systems? A software designer because as a system analyst, I also design software? A computer scientist because my course in college was BS in Computer Science? A computer engineer because I build software solutions? An software architect because my boss call me such? Or maybe a consultant because our HR treat me as such?

I don't know what to call myself but one thing is clear and I admit: I can't consider myself a computer scientist nor an engineer, and that is a sad truth. I know by myself that I have to eat more bread and rice before I can be such; and, my upbringing and educational attainment isn't worthy to give me such title. But one thing is clear: I write source codes day and night. But what am I going to call myself? I'm not a master of any computer related subject. I only know a little bit of this and a little bit of that. I can't even accept to be called a computer programmer although writing source code is my bread and butter. Because what I can only do is to get that library and get that other library and also that other library, put them together, and jaraaan.... I've created a program! Creating programs that involves mathematics, algorithms and high logical puzzles is I think not in the scope of my ability so, maybe I am indeed a programmer.... a dumb programmer (not a real one, am I?).

So maybe I can call myself a.... "computer literate". Yes, a very general term it is but it's the most safe title to give myself, I think.

I'm a computer literate and this blog is all about.... my computer literacy. Sometimes, you will read in this blog an expression of my opinion and even dumb ones and ones without bearing. You should expect that.