3D Interactive SVG Tag Cloud Plugin With jQuery - SVG 3D Tag Cloud

A very small and CSS-less jQuery plugin for drawing a 3D, interactive, SVG based and fully customizable sphere tag cloud from an array of html links.

How to use it:

1. Add the latest version of jQuery JavaScript library and the jQuery SVG 3D Tag Cloud plugin to the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.svg3dtagcloud.min.js"></script>

2. Create a container to place the tag cloud.

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

3. Create an array of tags / links like this:

var entries = [ 

    { label: 'Back to top', url: 'https://www.jqueryscript.net/tags.php?/Back%20to%20top/', target: '_top' },
    { label: 'Bootstrap', url: 'https://www.jqueryscript.net/tags.php?/Bootstrap/', target: '_top' },
    { label: 'Carousel', url: 'https://www.jqueryscript.net/tags.php?/carousel/', target: '_top' },
    { label: 'Countdown', url: 'https://www.jqueryscript.net/tags.php?/countdown/', target: '_top' },
    { label: 'Dropdown Menu', url: 'https://www.jqueryscript.net/tags.php?/Drop%20Down%20Menu/', target: '_top' }

];

4. Use images instead of labels:

var entries = [ 

    { image: '1.png', width: '50', height: '50', url: 'https://www.jqueryscript.net/tags.php?/Back%20to%20top/', target: '_top' },
    { image: '2.png', width: '50', height: '50', url: 'https://www.jqueryscript.net/tags.php?/Bootstrap/', target: '_top' },
    { image: '3.png', width: '50', height: '50', url: 'https://www.jqueryscript.net/tags.php?/carousel/', target: '_top' },
    { image: '4.png', width: '50', height: '50', url: 'https://www.jqueryscript.net/tags.php?/countdown/', target: '_top' },
    { image: '5.png', width: '50', height: '50', url: 'https://www.jqueryscript.net/tags.php?/Drop%20Down%20Menu/', target: '_top' }
    ...

];

5. Add tooltips to tags.

var entries = [ 

    { image: '1.png', width: '50', height: '50', url: 'https://www.jqueryscript.net/tags.php?/Back%20to%20top/', target: '_top', tooltip: 'Lorem ipsum' },
    { image: '2.png', width: '50', height: '50', url: 'https://www.jqueryscript.net/tags.php?/Bootstrap/', target: '_top', tooltip: 'Lorem ipsum' },
    { image: '3.png', width: '50', height: '50', url: 'https://www.jqueryscript.net/tags.php?/carousel/', target: '_top', tooltip: 'Lorem ipsum' },
    { image: '4.png', width: '50', height: '50', url: 'https://www.jqueryscript.net/tags.php?/countdown/', target: '_top', tooltip: 'Lorem ipsum' },
    { image: '5.png', width: '50', height: '50', url: 'https://www.jqueryscript.net/tags.php?/Drop%20Down%20Menu/', target: '_top', tooltip: 'Lorem ipsum' }
    ...

];

6. Initialize the plugin to render a 3D tag cloud inside the container you just created.

$('#tag-cloud').svg3DTagCloud();

7. Default customization options.

//  an array of links
entries: [],

// width of tag cloud
width: 480,

// height of tag cloud
height: 480,

// radius of tag cloud
radius: "70%",

// min radius of tag cloud
radiusMin: 75,

// use background draw
bgDraw: true,

// background color
bgColor: "#000",

// the behavior of the individual links / Tags
opacityOver: 1,
opacityOut: .05,
opacitySpeed: 6,

// how the content is presented
fov: 800,

// animation speed
speed: 2,

// font options
fontFamily: "Arial, sans-serif",
fontSize: "15",
fontColor: "#fff",
fontWeight: "normal",
fontStyle: "normal",
fontStretch: "normal",
fontToUpperCase: false

// tooltip options
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

Change log:

2017-10-13

• added tooltip support

About Author:

Author: Niklas Knaack

Website: http://niklasknaack.blogspot.de/2016/02/svg-3d-tag-cloud-jquery-plugin.html

---

This awesome jQuery plugin is developed by NiklasKnaack. For more Advanced Usages, please check the demo page or visit the official website.