0
<!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 !

2
Contributors
5
Replies
6
Views
6 Years
Discussion Span
Last Post by Airshow
0

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

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

:ooh:

0

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

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.