SVG 3D Tag Cloud jQuery Plugin

Bisher habe ich SVG (Scalable Vector Graphics) immer nur als Format zum Austausch zwischen zwei verschiedenen Programmen genutzt. Z.B. um in der Flash IDE gezeichnete Vektor-Grafiken in Illustrator weiter zu verwenden. Fürs Web erschien mir der Einsatz lange Zeit noch ungeeignet, weil SVG von diversen Browsern nicht unterstützt worden sind. Zwar kommen die älteren Browser-Versionen, speziell vom Internet Explorer, nicht mit SVG klar, aber generell steigt die Anzahl an Browsern die SVG unterstützen stetig an. Da SVG auf XML basieren, kam mir nun die Idee ein wenig zu experimentieren in wie weit man z.B. per JavaScript Zugriff auf die einzelnen Elemente in SVG bekommt. Nach einer kurzen Suche im Netz wurde mir schnell klar, dass meine Idee wohl nicht ganz neu war. So gibt es bereits zahlreiche Tutorials und Frameworks die genau aufzeigen, wie man Zugriff auf SVG-Elemente erhält und wie man diese mehr oder weniger bequem animieren kann.
Und so kam mir die nächste Idee. Ich hatte vor Jahren mal versucht eine 3D Tag Cloud mit Flash zu realisieren. Das hatte soweit auch ganz gut funktioniert, nur leider ist Flash inzwischen im Web so gut wie tot und findet keine Verwendung mehr. Tag Clouds gibt es generell schon recht viele, aber soweit meine Recherche ergeben hat noch keine auf Basis von SVG. Und so entstand die Idee eine 3D Tag Cloud zu erstellen deren Inhalte alle komplett in einer SVG gezeichnet und animiert werden. Rausgekommen dabei ist nun die SVG 3D Tag Cloud als jQuery Plugin:

Wie bei meinen letzten jQuery Plugins auch, könnt ihr die SVG 3D Tag Cloud mit, oder ohne jQuery benutzen. Ich habe folgend ein paar Beispiele zusammengestellt mit deren Hilfe ihr das Plugin sehr schnell für eure eigenen Projekte/Webseiten nutzen könnt.
Und so geht´s.
Erst einmal braucht ihr ein Array mit Links/Tags. Dieses kann z.B. wie folgt aussehen:

var entries = [ 

    { label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top' },
    { label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top' },
    { label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', 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: '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: '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' }

];

Dieses Array müsst ihr nun per Parameter übergeben. Neben den Links, die unsere SVG 3D Tag Cloud anzeigen soll, könnt ihr optional noch weitere Parameter übergeben, um die Tag Cloud zu individualisieren und nach euren Wünschen zu gestalten. Folgend ein Beispiel bei dem das eben erstellte Array und alle möglichen Einstellungen in einem Object zusammengefasst werden:

var settings = {

    entries: entries,
    width: 480,
    height: 480,
    //width: '100%',
    //height: '100%',
    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: '15px',
    fontColor: '#fff',
    fontWeight: 'normal',
    fontStyle: 'normal',
    fontStretch: 'normal',
    fontToUpperCase: true

};

Gehen wir nun am besten einfach alles Schritt für Schritt durch. Falls ihr es besonders eilig habt könnt ihr das aber auch überpringen. Ihr müsst im Prinzip nur das entries Array übergeben.

Bei entries übergebt ihr, wie schon gesagt, euer Array mit Links/Tags (Pro Link/Tag muss immer ein Label, eine URL und ein Target definiert werden. Wie im Beispiel ganz oben zu sehen).

Mit width und height legt ihr die Maße fest. Gebt ihr an dieser Stelle einfach nur Zahlenwerte an, dann ergeben diese Werte die fixe Größe der Tag Cloud. So wie im Beispiel oben zu sehen.
Nach dem Update könnt ihr an dieser Stelle aber nun auch Prozentwerte mit angeben. Auf diese Weise lässt sich die Tag Cloud sehr gut in Frameworks wie Foundation oder Bootstrap integrieren. Somit ist die Tag Cloud nun auch perfekt für responsives Webdesign geeignet. Wenn ihr mit Prozentwerten arbeitet müsst ihr beachten, das width der Prozentwert für die Breite ist. Fügt ihr die Tag Cloud z.B. in ein Div ein und width steht auf 100%, dann nimmt die Tag Cloud 100% der Breite des Divs an. Bei height verhält es sich anders. Die height ist immer abhängig von der width. Wenn euer Div 400px breit ist und ihr eine width von 100% angegeben habt und dazu eine height von 100%, dann hat die Tag Cloud die Maße 400x400px. Bei einer height von 90% sind die Maße: 400x360px.
Kurz zusammengefasst: Wenn ihr mit festen Pixelgrößen, gar nicht bis wenig responsiv, arbeiten wollt, dann gebt die Werte z.B. wie im folgenden Beispiel mit an:

width: 480,
height: 480,

Wenn eure Tag Cloud responsiv sein soll und z.B. die Breite vom Div annehmen soll, in dem sie geadded worden ist, dann gebt die Werte wie folgt an:

width: '100%',
height: '100%',

Per radius definiert ihr den Radius auf dem die Links erstellt werden. Nach dem Update hier bitte wie im Beispiel oben zu sehen nur noch Prozentwerte angeben. Und mit radiusMin könnt ihr bestimmen, falls es einen Resize gab, inwieweit der Radius verkleinert werden darf.

Bei bgDraw könnt ihr per true/false bestimmen ob die SVG einen Hintergrund bekommen soll und mit bgColor betimmt ihr die Hintergrundfarbe.

Mit opacityOver, opacityOut und opacitySpeed bestimmt ihr das verhalten der einzelnen Links/Tags, wenn ihr mit der Maus drüber fahrt. opacityOver und opacityOut nehmen Werte von 0.00 - 1.00 entgegen. Mit opacitySpeed bestimmt ihr, wie schnell/sensibel die Links/Tags reagieren.

Die Einstellung fov (Field of View) bestimmt, wie die Inhalte dargestellt werden. Der Wert wird beim umrechnen der dreidimensionalen Koordinaten in zweidimensionale Koordinaten benutzt. 800 ist dabei schon ein sehr guter Wert, aber bei Bedarf könnt ihr ihn ebenfalls anpassen.

Die Eigenschaft speed bestimmt wie sensibel/schnell die Tag Cloud auf eure Maus reagiert.

Mit der Eigenschaft fontFamily legt ihr fest, welche Schrift verwendet werden soll. Ihr könnt/solltet dabei mehrere Schriften angeben. Falls euer Browser nicht mit der ersten Schrift klar kommt, oder diese nicht geladen werden kann, wird die nächste Schrift verwendet. Es ist auch problemlos möglich die kostenlosen Google Webfonts zu nutzen. Schaut dazu am besten auf der Google Fonts Seite vorbei. Dort wird sehr anschaulich erklärt, wie ihr die Schriften auf eurer Seite nutzen könnt.

Die Eigenschaften fontSize und fontColor sollten selbsterklärend sein. 

Bei fontWeight könnt ihr „normal“ oder „bold“ angeben.

Und bei fontStyle „normal“ oder „italic“.  

Mit fontStretch bestimmt ihr den Abstand der einzelnen Zeichen zueinander. Hier sind folgende Parameter möglich: „wider“, „narrower“, „ultra-condensed“, „extra-condensed“, „condensed“, „semi-condensed“, „semi-expanded“, „expanded“, „extra-expanded“ und „ultra-expanded“.

Und mit fontToUpperCase könnt ihr per true/false festlegen ob die Links/Tags wie übergeben, oder in Versalien dargestellt werden sollen. 


So, fast geschafft. Jetzt fehlt nur noch eine Zeile Code und ihr seid durch.
Wenn ihr mit jQuery unterwegs seid, dann fügt noch die folgende Zeile hinzu:

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

Und ohne jQuery schreibt ihr die Zeile einfach ein wenig anders:

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

Fertig! Das wars schon.
Ihr könnt euch das komplette Beispiel mit allen Eigenschaften HIER anschauen.

Zum Download gibt es eine standard JS und auch eine minifizierte JS. Mit 14KB, bzw. 5KB sind die Dateigrößen recht überschaubar geworden.

Jetzt bleibt mir nicht mehr viel zu sagen, außer: Viel Spaß mit der SVG 3D Tag Cloud!
Und wie immer freue ich mich über Feedback. Falls ihr die SVG 3D Tag Cloud wo im Einsatz habt würde ich mich über einen Link sehr freuen.

Achtung, es gab ein größeres Update!
Die Dokumentation und die Download Links habe ich bereits angepasst.
Wichtig, ihr müsst nun bei Radius einen Prozentwert angeben und keine Pixelwerte mehr.
Die Tag Cloud ist nun vollständig responsive und kann so nun sehr gut z.B. in das Foundation Framework eingebunden werden. Hier ein Beispiel-Video:



Update/Neue Version

Nach diversen Anfragen gibt es nun ein Update auf Version 2. Neu in Version 2 sind Grafik-Tags und Tooltips. Hier geht es lang zu SVG 3D Tag Cloud jQuery Plugin V2.