Skip to content

Instantly share code, notes, and snippets.

@JCBN03
Created Jun 11, 2021
Embed
What would you like to do?
Tag cloud with graph
<div id="tag-cloud"></div>
<div id="tag-cloud2"></div>
<canvas id="container" width="640" height="480">
</canvas>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/3D-Interactive-SVG-Tag-Cloud-Plugin-With-jQuery-SVG-3D-Tag-Cloud/jquery.svg3dtagcloud.min.js"></script>
<script src="http://musclesoft.github.io/jquery-connections/jquery.connections.js"></script>
$(document).ready(function() {
var entries = [
{
label: "Back to top",
url: "http://www.jqueryscript.net/tags.php?/Back%20to%20top/",
target: "_top"
},
{
label: "Bootstrap",
url: "http://www.jqueryscript.net/tags.php?/Bootstrap/",
target: "_top"
},
{
label: "Carousel",
url: "http://www.jqueryscript.net/tags.php?/carousel/",
target: "_top"
},
{
label: "Countdown",
url: "http://www.jqueryscript.net/tags.php?/countdown/",
target: "_top"
},
{
label: "Dropdown Menu",
url: "http://www.jqueryscript.net/tags.php?/Drop%20Down%20Menu/",
target: "_top"
},
{ label: "CodePen", url: "http://codepen.io/", target: "_top" },
{ label: "three.js", url: "http://threejs.org/", target: "_top" },
{
label: "Form Validation",
url: "http://www.jqueryscript.net/tags.php?/form%20validation/",
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: "Grid Layout",
url: "http://www.jqueryscript.net/tags.php?/grid%20layout/",
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: "Tree View",
url: "http://www.jqueryscript.net/tags.php?/tree%20view/",
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: "Notification",
url: "http://www.jqueryscript.net/tags.php?/Notification/",
target: "_top"
},
{
label: "Parallax",
url: "http://www.jqueryscript.net/tags.php?/parallax/",
target: "_top"
}
];
var settings = {
entries: entries,
width: 400,
height: 300,
radius: "65%",
radiusMin: 35,
bgDraw: false,
bgColor: "#111",
opacityOver: 1.0,
opacityOut: 0.05,
opacitySpeed: 6,
fov: 150,
speed: 1,
fontFamily: "Oswald, Arial, sans-serif",
fontSize: "15",
fontColor: "#000",
fontWeight: "normal", //bold
fontStyle: "normal", //italic
fontStretch: "expanded", //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
fontToUpperCase: true
};
//var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder' ), settings );
$("#tag-cloud").svg3DTagCloud(settings);
// $("#tag-cloud2").svg3DTagCloud(settings);
});
#tag-cloud {
display: inline;
}
#tag-cloud2 {
float: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment