3D Interactive Tags Cloud In Vanilla JavaScript

Category: Javascript | November 11, 2019
Views Total:2,765 views
Official Page:Go to website
Last Update:November 11, 2019


3D Interactive Tags Cloud In Vanilla JavaScript


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">

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).

You Might Be Interested In:

Leave a Reply