SVG 3D Tag Cloud jQuery Plugin V2

Nach diversen Anfragen gibt es nun ein Update für das SVG 3D Tag Cloud jQuery Plugin.
In der Version 2 gibt es nun die Möglichkeit anstelle von Texten Bilder zu laden. Und, was auch schon häufiger angefragt worden ist, ihr könnt euch zu jedem Bild/Text auch einen Tooltip anzeigen lassen.
Die alte und die neue Version sind soweit kompatibel, weshalb ihr mit der neuen JS-Datei einfach die alte überschreiben könnt. Und das ohne die Funktionalität zu zerstören.
Hier ein Beispiel mit Bildern und Tooltips:



So setzt man nach wie vor Tags mit Text:

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' }

];

Wollt ihr nun Bilder anstelle von Text anzeigen, dann sieht das wie folgt aus:

var entries = [ 

    { image: './img/Basket.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Briefcase.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Brush.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Calendar.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Camera.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Cassette.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Clock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Coffee.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Comments.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }

];

Ihr ersetzt einfach nur den Paramter label mit dem Parameter image. Bei image gebt ihr den Pfad und den Dateinamen zu der gewünschten Grafik ein. Neben dem neuen Parameter image gibt es noch die neuen Parameter width und height, mit denen ihr die anzuzeigende Größe von eurer Grafik mit angeben müsst.

Und wenn ihr jetzt noch Tooltips dazu haben wollt schaut euch das Beispiel hier an:

var entries = [ 

    { image: './img/Basket.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Lorem ipsum' },
    { image: './img/Briefcase.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Dolor sit amet' },
    { image: './img/Brush.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Consetetur sadipscing' },
    { image: './img/Calendar.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Sed diam' },
    { image: './img/Camera.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'At vero' },
    { image: './img/Cassette.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Nonumy eirmod' },
    { image: './img/Clock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Stet clita' },
    { image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Justo duo' },
    { image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Ut wisi enim' },
    { image: './img/Coffee.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Minim veniam' },
    { image: './img/Comments.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Quis nostrud' },
    { image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Exerci tation' },

 ];

Ihr könnt ganz einfach den Parameter tooltip hinzufügen mit einem String der dann als Tooltip angezeigt werden soll.

Natürlich könnt ihr auch Text-Tags mit Tooltips kombinieren:

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' }

 ];

Wie schon in der alten Version müsst ihr das erzeugte entries Objekt mit an das settings Objekt übergeben. Beim settings Objekt sind ein paar optionale Parameter hinzugekommen. Hier eine Auflistung aller möglichen Parameter inklusive dem entries Objekt:

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',
    fontStyle: 'normal',
    fontStretch: 'normal',
    fontToUpperCase: true,
    tooltipFontFamily: 'Oswald, Arial, sans-serif',
    tooltipFontSize: '11',
    tooltipFontColor: '#fff',
    tooltipFontWeight: 'normal',
    tooltipFontStyle: 'normal',
    tooltipFontStretch: 'normal',
    tooltipFontToUpperCase: false,
    tooltipTextAnchor: 'middle',//left, right
    tooltipDiffX: 0,
    tooltipDiffY: 20

};

Die frisch hinzugekommenen tooltipFont Parameter sind selbsterklärend. Mit tooltipTextAnchor gebt ihr an wie sich euer Tooltipp im Verhältnis zum Tag ausrichten soll. Bei Grafik-Tags empfiehlt sich 'left' und bei Text-Tags 'middle'. Mit tooltipDiffX und tooltipDiffY könnt ihr den Abstand zum Tag bestimmen.

Alles andere bleibt wie gehabt in der alten Version.
Schaut bei Fragen bitte erst in den alten Blogeintrag, da hier eine recht ausführliche Dokumentation mit enthalten ist. Ansonsten freue ich mich wie immer über Feedback und/oder Kommentare.
Zum Download gibt es wieder eine standard JS und auch eine minifizierte JS.

Bei Bedarf könnt ihr euch auch die Beispielseiten anschauen: Example 1, Example 2, Example 3 und Example 4.

Die hier in den Beispielen verwendeten Bilder/Icons sind von der Seite Smashing Magazine.

Update

GitHub
Das Projekt gibt es nun auch auf GitHub. Und hier geht´s zum GitHub Repository. Ihr findet hier immer die aktuelle Version und weitere Tutorials sowie Links.

JSFiddle
Hier ein weiteres Beispiel, das ihr direkt in JSFiddle betrachten und bearbeiten könnt.

SVG 3D Viewer

SVG befinden sich auf dem Vormarsch und damit verbunden viele neue und interessante Entwicklungen. 
Das auf XML basierende Format ist nicht nur für Gestalter und Kreative sehr interessant, sondern auch für Entwickler.
Da man über die XML-Struktur direkten Zugriff auf die Inhalte bekommt, kann man Elemente des SVG-DOM mit Hilfe eingebetteter Scriptsprachen wie JavaScript manipulieren. Auf diese Weise kann eine statische SVG dynamisiert werden und z.B. bestimmte Koordinaten animiert/verändert werden. So kann man unter anderem das Path-Element im SVG manipulieren, das für die Darstellung so gut wie aller Grafikelemente in einem SVG verantwortlich sein kann. Genauso ist es möglich Farbwerte auszulesen und abzuändern. Und ebenso ist es möglich auf diese Weise online einen Editor für SVG zur Verfügung zu stellen, der nur auf JavaScript basiert.
 
Und genau hier greift meine Idee die Koordinaten der Pfade einer SVG auszulesen, bzw. zu parsen, diese in pseudo 3D umzurechnen, die der User dann in Echtzeit manipulieren kann und dann im Anschluss wieder in 2D zurückumgewandelt als SVG ausgeben zu lassen.
Klingt etwas sperrig, aber im Prinzip ist es ganz einfach. Der User kann eine SVG laden und diese dann im dreidimensionalen Raum rotieren und skalieren. Zusätzlich hat der User noch Einfluss auf die im SVG verwendeten Farben. Als Gimmick kann das so vom User manipulierte SVG abgespeichert (Bei den Einstellungen unter „Open Controls“ zu finden) und dann problemlos für andere Zwecke weiterverwendet werden.

(Original SVG File)

Der SVG 3D Viewer ist noch im absoluten Experimentierstadium. So werden aktuell keine Farbverläufe unterstützt. Ebenso kommt es zu Problemen, wenn die Maße der SVG größer sind als die Fläche (480x480px) des Viewers selbst. Besonders detailreiche SVG bringen den Viewer noch an seine Grenzen und lassen die Performance einbrechen.

Im folgenden Screenshot der Browser-Konsole sieht man die neu berechneten Koordinaten im Path-Element einer dynamisch geladenen SVG: 

Das Parsen der SVG ist mit dem SVG Path Parser von Jake Rosoman realisiert.
Die hier gezeigten SVG-Logos sind bis auf 2 Ausnahmen Eigenproduktionen. Das Logo zu Beginn ist das Firmenlogo von anyMOTION GRAPHICS. Das zweite Logo das nicht von mir stammt ist das offizielle Logo von Fortuna Düsseldorf.

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.