Back to packageRELEASE DETAILS

1.0.3

npm

3d-word-cloud

SVG 3D Tag Cloud jQuery plugin

Published10 Sept 2018

Direct dependencies1

Transitive dependenciesNot calculated

README

Current package documentation

(jquery-svg3dtagcloud-plugin)

Preview

Alt text

Description

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.

Examples

JSFiddle

https://jsfiddle.net/NiklasKnaack/wr9moazp/

More Examples

Installation

Coming soon.

Example Usage

HTML

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='js/jquery.svg3dtagcloud.min.js'></script>

<link href='https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Define entries (text tags):

var entries = [ 
    
    { label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top' },
    { label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top' },
    { label: 'jQueryScript.net', url: 'http://www.jqueryscript.net/', target: '_top' },
    { label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top' },
    { label: 'JSFiddle', url: 'https://jsfiddle.net/user/NiklasKnaack/fiddles/', target: '_top' },
    { label: 'CodePen', url: 'http://codepen.io/', target: '_top' },
    { label: 'three.js', url: 'http://threejs.org/', target: '_top' },
    { label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top' },
    { label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' },
    { label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' },
    { label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' },
    { label: 'URL shortener', url: 'https://goo.gl/', target: '_top' },
    { label: 'HTML Encoder', url: 'http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx', target: '_top' },
    { label: 'Twitter', url: 'https://twitter.com/niklaswebdev', target: '_top' },
    { label: 'deviantART', url: 'http://nkunited.deviantart.com/', target: '_top' },
    { label: 'Gulp', url: 'http://gulpjs.com/', target: '_top' },
    { label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top' },
    { label: 'GitHub', url: 'https://github.com/', target: '_top' },
    { label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top' },
    { label: 'Starling', url: 'http://gamua.com/starling/', target: '_top' },
    { label: 'jsPerf', url: 'http://jsperf.com/', target: '_top' },
    { label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top' },
    { label: 'CreateJS', url: 'http://createjs.com/', target: '_top' },
    { label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top' },
    { label: 'TweenLite', url: 'https://greensock.com/docs/#/HTML5/GSAP/TweenLite/', target: '_top' },
    { label: 'jQuery', url: 'https://jquery.com/', target: '_top' },
    { label: 'jQuery Rain', url: 'http://www.jqueryrain.com/', target: '_top' },
    { label: 'jQuery Plugins', url: 'http://jquery-plugins.net/', target: '_top' },

];

Define entries (text tags with tooltips):

var entries = [ 
    
    { label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top', tooltip: 'Lorem ipsum' },
    { label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top', tooltip: 'Dolor sit amet' },
    { label: 'jQueryScript.net', url: 'http://www.jqueryscript.net/', target: '_top', tooltip: 'Consetetur sadipscing' },
    { label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top', tooltip: 'Sed diam' },
    { label: 'JSFiddle', url: 'https://jsfiddle.net/user/NiklasKnaack/fiddles/', target: '_top' },
    { label: 'CodePen', url: 'http://codepen.io/', target: '_top', tooltip: 'At vero' },
    { label: 'three.js', url: 'http://threejs.org/', target: '_top', tooltip: 'Nonumy eirmod' },
    { label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top', tooltip: 'Stet clita' },
    { label: 'JS Compress', url: 'http://jscompress.com/', target: '_top', tooltip: 'Justo duo' },
    { label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top', tooltip: 'Ut wisi enim' },
    { label: 'Can I Use', url: 'http://caniuse.com/', target: '_top', tooltip: 'Minim veniam' },
    { label: 'URL shortener', url: 'https://goo.gl/', target: '_top', tooltip: 'Quis nostrud' },
    { label: 'HTML Encoder', url: 'http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx', target: '_top' },
    { label: 'Twitter', url: 'https://twitter.com/niklaswebdev', target: '_top', tooltip: 'Veniam isictus' },
    { label: 'deviantART', url: 'http://nkunited.deviantart.com/', target: '_top', tooltip: 'Autem insto' },
    { label: 'Gulp', url: 'http://gulpjs.com/', target: '_top', tooltip: 'Officia dolor' },
    { label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top', tooltip: 'Digi tal' },
    { label: 'GitHub', url: 'https://github.com/', target: '_top', tooltip: 'Amet et quam' },
    { label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top', tooltip: 'Meno equox' },
    { label: 'Starling', url: 'http://gamua.com/starling/', target: '_top', tooltip: 'Duis autem' },
    { label: 'jsPerf', url: 'http://jsperf.com/', target: '_top', tooltip: 'Soluta nobis' },
    { label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top', tooltip: 'Blandit praesent' },
    { label: 'CreateJS', url: 'http://createjs.com/', target: '_top', tooltip: 'Dignissim qui' },
    { label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top', tooltip: 'Et iusto odio' },
    { label: 'TweenLite', url: 'https://greensock.com/docs/#/HTML5/GSAP/TweenLite/', target: '_top', tooltip: 'Facilisis at vero' },
    { label: 'jQuery', url: 'https://jquery.com/', target: '_top', tooltip: 'Dolore eu' },
    { label: 'jQuery Rain', url: 'http://www.jqueryrain.com/', target: '_top', tooltip: 'In vulputate' },
    { label: 'jQuery Plugins', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'In vulputate' }

];

Define entries (image tags):

var entries = [ 

    { image: './img/Basket.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Briefcase.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Brush.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Calendar.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Camera.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Cassette.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Clock.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Coffee.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Comments.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Diary.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Document.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Envelope.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Eraser.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/File_Browser.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Games.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Headphones.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Heart.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Home.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/ID.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/iPod.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Key.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Location.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Location_Map.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Map.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Megaphone.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Message.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Microphone.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Mobile.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Money.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Padlock.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Pencil.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Photo.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Polaroid.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Printer.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Record.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Save.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Scissors.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Spanner.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Toolbox.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' },
    { image: './img/Umbrella.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }

];

Define entries (image tags with tooltips):

var entries = [ 
   
    { image: './img/Basket.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Lorem ipsum' },
    { image: './img/Briefcase.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Dolor sit amet' },
    { image: './img/Brush.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Consetetur sadipscing' },
    { image: './img/Calendar.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Sed diam' },
    { image: './img/Camera.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'At vero' },
    { image: './img/Cassette.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Nonumy eirmod' },
    { image: './img/Clock.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Stet clita' },
    { image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Justo duo' },
    { image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Ut wisi enim' },
    { image: './img/Coffee.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Minim veniam' },
    { image: './img/Comments.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Quis nostrud' },
    { image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Exerci tation' },
    { image: './img/Diary.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Duis autem' },
    { image: './img/Document.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Vel eum iriure' },
    { image: './img/Envelope.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Dolor in hendrerit' },
    { image: './img/Eraser.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'In vulputate' },
    { image: './img/File_Browser.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Velit esse' },
    { image: './img/Games.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Molestie consequat' },
    { image: './img/Headphones.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Vel illum' },
    { image: './img/Heart.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Dolore eu' },
    { image: './img/Home.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Feugiat nulla' },
    { image: './img/ID.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Facilisis at vero' },
    { image: './img/iPod.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Eros et accumsa' },
    { image: './img/Key.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Et iusto odio' },
    { image: './img/Location.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Dignissim qui' },
    { image: './img/Location_Map.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Blandit praesent' },
    { image: './img/Map.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Nam liber' },
    { image: './img/Megaphone.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Soluta nobis' },
    { image: './img/Message.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Magna aliquam' },
    { image: './img/Microphone.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Duis autem' },
    { image: './img/Mobile.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Lori novis' },
    { image: './img/Money.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Meno eqiam' },
    { image: './img/Padlock.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Meno equox' },
    { image: './img/Pencil.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Iri orem' },
    { image: './img/Photo.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Orel pas' },
    { image: './img/Polaroid.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Psi sit' },
    { image: './img/Printer.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Amet et quam' },
    { image: './img/Record.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Molare cons' },
    { image: './img/Save.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Digi tal' },
    { image: './img/Scissors.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Felenope liber' },
    { image: './img/Spanner.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Officia dolor' },
    { image: './img/Toolbox.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Autem insto' },
    { image: './img/Umbrella.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Veniam isictus' }

];

Define settings:

var settings = {

    entries: entries,
    width: 480,
    height: 480,
    radius: '65%',
    radiusMin: 75,
    bgDraw: true,
    bgColor: '#111',
    opacityOver: 1.00,
    opacityOut: 0.05,
    opacitySpeed: 6,
    fov: 800,
    speed: 2,
    fontFamily: 'Oswald, Arial, sans-serif',
    fontSize: '15',
    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: true,
    tooltipFontFamily: 'Oswald, Arial, sans-serif',
    tooltipFontSize: '11',
    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.01,
    animatingRadiusLimit: 1.3

};

jQuery:

$( '#holder' ).svg3DTagCloud( settings );

JS:

var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );

API

//Destroy the svg and remove events
svg3DTagCloud.destroy();

//Set the data and rebuild the svg
svg3DTagCloud.setEntries( [] );

//Animate In (controled by animatingSpeed and animatingRadiusLimit)
svg3DTagCloud.animOut( callback );

//Animate Out (controled by animatingSpeed and animatingRadiusLimit)
svg3DTagCloud.animIn( callback );

License

This plugin is available under the MIT license.

Author

– Niklas

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 1

Native requirements

1 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
jquery Environment { "local_name": "jquery", "alias": false, "peer_metadata": null }	`>=1.7.0 <4.0.0`	runtime

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "integrity": "sha512-/ihWkUsE/U2Roq0e+OZqHAn8hKX/bi5NbHHR4gARPWNwBKIOxuzquE7yfrMUxgMUKWww7ayOefRA8Fw1BxVUqg==",
  "shasum": "9b795b3ed5cdb38d6e0646781726e8835e4ce870",
  "tarball": "https://registry.npmjs.org/3d-word-cloud/-/3d-word-cloud-1.0.3.tgz",
  "fileCount": 11,
  "unpackedSize": 94584,
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJblkfICRA9TVsSAnZWagAAeJoP/1WoXXndsHyhO3iWUtEJ\nuWlly6Aeyc94x5vtwCrbmHwVugLlPNVIqdnEECSGGmzNa+UOc3OVDwaPiX/V\n3W54RnPxj8oZ6ajFvglWhOKeNP2rsihU/tyHwTJhkMK7r48g+vzl4FVlnvib\nW66idpbXABUcYohJWwRjse9ufYgVZIVuV26Tr+kBB0yRuH/AnLYy+G7Kq3pc\n41sS0yBEZ9OJH6bZvVcY7xXRbauhpoofgGECDF7U0Iy25Uk6mjD1LYKjl8hA\n2qdkgpL5uo5KNUAmTsIrUPKGMiSM/EcZLwaH8XqkWVZCfwsqxedTqul3OSVZ\nTI4cxKN2KyqVkOCuZ7YagWIWp7v5RKwbu1Rd1IOMLQRBLm+oZuTA3OhSMc65\nby216zHAhSWLh/OKwFovfYURco6CsZlTxFEzx4rR4TJjQb0XN3ggIVMyKRit\n0Gfk90EUOwL796iBVGk56YkCn3QNKur2Apfv9JUKSEgksRqoZCVfG3mPPb0R\ntDRkPYfo5vSUy1Hf29Ckeu87tcnWws2g+HVNbwo/fhmE7VTTvYDmQUYSNP/W\no/sNSLmy/V+HHmMXNVgBkUJEY7eWQSgAPjeq5mXenwna8qgMKzEhrVepQZZs\n/JJjLWQIdicycpcJ32d4NnuHNvvb9Hx/VuvkN5gQhHJhG4xtAOOfWhp9nmRM\nFvBp\r\n=GPX3\r\n-----END PGP SIGNATURE-----\r\n",
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEUCIQDkk69Rl3Q5jXfVVlkHDOIQZOc1uSESDQjDkoy4d0eG8AIgCuOOK+Ni6ux+jQbGozAurTSJlIY4ei52qqjWjRKbiFA="
    }
  ]
}

Repository

PENDING

maximoo/jquery-svg3dtagcloud-plugin

Shared repository data · GitHub

License detected in repository: Not collected

Metadata history

Meaningful changes

Current collected state Current

Observed since 20 Oct, 19:38 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:4e73a28f90dd5c4d3763005149dd6cc4c0962c03433326f23aaeba35b6a5b5b5

Other collected versions

1.1.28 Nov 1.1.123 Jul 1.0.921 Jan 1.0.815 Nov 1.0.711 Sept 1.0.610 Sept View all collected versions →