<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3D Tag Cloud</title>
<style type="text/css">
body{
    background:#DDD;
    color:#000;
}
a{
    color:#009;
}
a:hover{color:#00F;}
address
{
    font-family:Georgia;
    font-style:normal;
    text-align:right;
}
#tagcloud{
	background:#FFF;
	border:1px solid #000;
	font:14px Verdana,sans-serif;
	height:400px;
	overflow:hidden;
	position:relative;
	width:400px;
}
#tagcloud ul,#tagcloud li{
	list-style:none;
	margin:0;
	padding:0;
}
#tagcloud a{
	/* background:#FFF;
	border:1px solid #FFF; */
	color:#000;
	left:50%;
	line-height:1.2em;
	margin:-0.6em 0 0 0;
	padding:0 0.2em;
	position:absolute;
	text-align:center;
	text-decoration:none;
	top:50%;
}
#tagcloud a:hover{
	background:#FFF;
	border:1px solid #00F;
	z-index:1000 !important;
}
</style>
</head>
<body>

<h1>3D Tag Cloud</h1>

<div id="tagcloud" onmousemove="stepping = (event.clientY - container.offsetTop) / container.offsetHeight * 0.2 - 0.1;">
<ul>
<li><a href="http://www.google.co.in">Animesh</a></li>
<li><a href="#">Yatharth</a></li>
<li><a href="#">Anushree</a></li>
<li><a href="#">Udit</a></li>
<li><a href="#">Shalvi</a></li>
<li><a href="#">Shrey</a></li>
<li><a href="#">Mayank</a></li>
<li><a href="#">Rohit</a></li>
<li><a href="#">Sonal</a></li>
<li><a href="#">Rashi</a></li>
<li><a href="#">Himanshu</a></li>
<li><a href="#">Nikita</a></li>
<li><a href="#">Ankita</a></li>
<li><a href="#">Shobit</a></li>
<li><a href="#">Sonam</a></li>
<li><a href="#">Manish</a></li>
<li><a href="#">Bhavya</a></li>
<li><a href="#">Kapish</a></li>
<li><a href="#">Pallavi</a></li>
<li><a href="#">Parul</a></li>
</ul>
</div>

<script type="text/javascript">

var a = 0, b = 0, e;
var offA = 0, stepping = 0.01;
var container = document.getElementById("tagcloud");

window.onload = function()
{
	e = container.getElementsByTagName("A");
	for (var i = e.length - 1; i >= 0; i--)
	{
		e[i].tcAngle = i * Math.PI * 2 / e.length;
	}

	setInterval(function()
	{
		for (var i = e.length - 1; i >= 0; i--)
		{
			var angle = e[i].tcAngle + offA;
			x = 50 + Math.sin(angle) * 20;
			y = 50 + Math.cos(angle) * 40;
			tcSize = Math.round(20 - Math.sin(angle) * 10);

			e[i].style.fontSize = tcSize + "px";
			e[i].style.zIndex = tcSize;
			e[i].style.left = (container.offsetWidth * x / 100 - e[i].offsetWidth / 2) + "px";
			e[i].style.top  = y + "%";
		}
		offA += stepping;
	}, 10);
}

</script>
</body>
</html>

This basically forms a wheel/ring kind of a tag cloud !
What should I do if I wish to convert it into a spherical one ??
Generally the spherical tag cloud is made using Flash ... which I do not know !
So, I want to do it with JavaScript !

Please help !

1. Study hard for a maths degree.
2. Code it up.

1. Study hard for a maths degree.
2. Code it up.

OMG !
I knew it !
I have to study Spherical Polar coordinate geometry !

:ooh:

Yup, unless someone has already coded it or you can find a decent tutorial.

It's not just Spherical Polar coordinate geometry but also the projection thereof onto a 2D plane (the computer screen) with a non-infinite viewpoint.

I'm not too bad at maths but would seriously struggle in this specialist area.

Airshow

Yup, unless someone has already coded it or you can find a decent tutorial.

It's not just Spherical Polar coordinate geometry but also the projection thereof onto a 2D plane (the computer screen) with a non-infinite viewpoint.

I'm not too bad at maths but would seriously struggle in this specialist area.

But people have used flash instead of javascript ....
so, I guess trying this thing might be interesting !
:D

I guess the maths is the same in both technologies but flash would be better suited. It generally gives much smoother animations than js due to optimised compiled low level code.

I'm sure that if you search the web, you will find at least a discussion about a js implementation if not an actual example.

A