3D Interactive Tags Cloud In Vanilla JavaScript

Preview:

Description:

A dynamic interactive spherical tag cloud that scrolls tags with mouse movement over a 3D sphere.

How to use it:

1. Insert the main JavaScript cloud.js into the HTML file.

<script src="./cloud.js"></script>

2. Create a container in which you’d like to render the tag cloud.

<div id="cloud">
</div>

3. Create a tag cloud instance, passing necessary parameters as a fields of an anonymous object as follows.

new Clouder({
    container: document.getElementById("cloud"),
    tags: [{text: "Az", id: "1", weight: 0.1}],
    callback: function(id) {alert(id);}
});

4. Only two parameters are required (“container” and “tags”), all others are optional and have some default value.

• callback: a function which is called when tag clicked, its only parameter is an “id” of a clicked tag.
• fontSize: average font size for tags
• fontShift: maximal deviation of font size,
• colorMax: color for most significant elements,
• colorMin: color for least significant elements,
• colorBgr: background color for container element,
• interval: timer interval for redraw (milliseconds),
• stepAngle: sphere rotation angle performed on each timed redraw, if mouse pointer is close to the border of a container (multiply by 1.414 if close to the corner)
• idleMotion: rotation speed ration when the mouse pointer leaves the container
• opaque: opacity ratio for elements on the far backside of the globe, opacity increases when element turns on the front side (up to 1.0)
• xScale: sphere size scaling horizontal coefficient, allows to make sphere wider (if greater than 1.0) or narrower (if less than 1.0) than container element
• yScale: sphere size scaling vertical coefficient – same as xScale but increases or decreases the screen “height” of the sphere.
• scale: sphere size scaling coefficient (shortcut for setting both xScale and yScale equal and simultaneously).
• nonSense: insensitivity zone width (at the center of container) – rotation stops when the mouse is here (for easier clicking). varies from 0 (no zone at all) to 1 (whole container width and height).