Create Dynamic, Animated, 3D Tag Clouds with JavaScript & SVG

SVG-3D-TAG-CLOUD is a JavaScript library for generating animated 3D tag clouds using SVG. It supports both text and image tags, custom tooltips on hover (with dimming of other tags), and maintains quality regardless of scaling.

This library enhances data visualization by transforming flat lists into engaging 3D representations. Users can create interactive displays that capture attention and improve information retention.

For example, a website about web development could display technologies like JavaScript, HTML, and CSS in an animated cloud, each linking to relevant resources.

How to use it:

1. Download the SVG-3D-TAG-CLOUD zip file from our website or install it using NPM:

# NPM
$ npm install svg-3d-tag-cloud

2. Include the library in your project:

<script src="SVG3DTagCloud.global.js"></script>

// OR
import SVG3DTagCloud from 'svg-3d-tag-cloud';

3. Create an array of objects representing your tags. Each object should contain the tag’s label and, optionally, a URL and target. For image tags, include the image path, dimensions, and optional URL, target, and tooltip:

// text tags
const childrenForText = [
  {
    label: 'jQueryScript',
    url: 'https://www.jqueryscript.net',
    target: '_blank',
  },
  {
    label: 'CSSScript',
    url: 'https://www.cssscript.com',
    target: '_blank',
  },
  // more tags here
];

// images tags
const childrenForImage = [
  {
    image: '/path/to/javascript.svg',
    width: '50',
    height: '50',
    url: 'https://www.cssscript.com',
    target: '_top',
    tooltip: 'CSSScript',
  },
  // more tags here
];

4. Create an HTML element to hold the tag cloud:

<div id="tagcloud"></div>

5. Initialize the tag cloud by creating a new instance of SVG3dTagCloud, passing the container element and an optional settings object:

let settings = {
  // options here
};
new SVG3dTagCloud(document.getElementById('tagcloud'), settings).build();

6. Customize the tag cloud’s appearance and behavior using the settings object.

let settings = {
  children: [],
  width: 480,
  height: 480,
  radius: '70%',
  radiusMin: 75,
  isDrawSvgBg: true,
  svgBgColor: '#000',
  opacityOver: 1.0,
  opacityOut: 0.05,
  opacitySpeed: 6,
  fov: 800,
  speed: 0.5,
  fontFamily: 'Arial, sans-serif',
  fontSize: '12',
  fontColor: '#fff',
  fontWeight: 'normal', //bold
  fontStyle: 'normal', //italic
  fontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
  fontToUpperCase: false,
  tooltipFontFamily: 'Arial, sans-serif',
  tooltipFontSize: '15',
  tooltipFontColor: '#fff',
  tooltipFontWeight: 'normal', //bold
  tooltipFontStyle: 'normal', //italic
  tooltipFontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
  tooltipFontToUpperCase: false,
  tooltipTextAnchor: 'left',
  tooltipDiffX: 0,
  tooltipDiffY: 10,
  animatingSpeed: 0.1,
  animatingRadiusLimit: 1.3,
};