https://henning-gross.de/js/techcloud.js

1"use strict";
2(function () {
3    $(document).ready(function () {
4        var cloud = $('#techcloud');
5        var labels = $('#techlabels');
6        var cloud_height = 500;
7        var TECHS = ["C", "C++", "C#", "Java", "PHP", "JavaScript", "Python", "Xtend", "Xtext", "XML", "HTML", "LaTeX", "PlantUML", "CSS", "SCSS", "Prolog", "SQL", "XSLT", "XAML", "EJB", "JSF", "JSP", "JPA", "JAX-RS", "WPF", "OpenGL", "Swing", "Qt", "JUnit", "NASA WorldWind", "jQuery", "jQuery Mobile", "Ext JS", "Sencha Touch", "DHTMLX", "Backbone.js", "Underscore.js", "Cordova/PhoneGap", "Django", "Propel", "LibSVM", "SAP NetWeaver Development Studio", "PhpStorm", "Android Studio", "PyCharm", "Visual Studio", "Eclipse", "NetBeans", "XCode", "Git", "Mercurial", "Subversion", "Trac", "Visual Paradigm", "Memcached", "Balsamiq", "Vagrant", "VirtualBox", "Proxmox", "Maven", "Gradle", "Jenkins", "Jira", "Apache Tomcat", "Apache httpd", "GlassFish AS", "SAP NetWeaver", "iOS", "Android", "Mac OS", "Windows", "Linux"];
8        TECHS.sort(stringCmp);
9        var layout;
10        var w;
11
12
13        /**
14         * Well ... a random int
15         * @param min minimum inclusive
16         * @param max maximum inclusive
17         * @returns int in [min,max]
18         */
19        function getRandomInt(min, max) {
20            return Math.floor(Math.random() * (max - min + 1)) + min;
21        }
22
23        /**
24         * Compare function for strings ignoring case
25         * @param a string a
26         * @param b string b
27         * @returns {number}
28         */
29        function stringCmp(a, b){
30            var aName = a.toLowerCase();
31            var bName = b.toLowerCase();
32            return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
33        }
34
35        /**
36         * Create a label element for each tech
37         */
38        function createTagLabels() {
39            var TMPL = '<span class="label label-theme-color">{{txt}}</span> ';
40            labels.empty();
41            jQuery.each(TECHS, function (i, e) {
42               labels.append(TMPL.replace("{{txt}}", e));
43            });
44        }
45
46        /**
47         * Create a tag cloud consisting of SOME of the techs
48         */
49        function createCloud() {
50            var dimensions = [cloud.width(), cloud_height];
51            var fill = d3.scale.category20c();
52            layout = d3.layout.cloud()
53                .size(dimensions)
54                .words(TECHS.map(function (d) {
55                    return {text: d, size: getRandomInt(16, 60)};
56                }))
57                .padding(5)
58                //.rotate(function() { return ~~(Math.random() * 2) * 90; })
59                .font("Impact")
60                .fontSize(function (d) {
61                    return d.size;
62                })
63                .on("end", draw);
64
65
66            /**
67             * d3.js draw function
68             * @param words
69             */
70            function draw(words) {
71                d3.select("#techcloud").append("svg")
72                    .attr("width", layout.size()[0])
73                    .attr("height", layout.size()[1])
74                    .append("g")
75                    .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
76                    .selectAll("text")
77                    .data(words)
78                    .enter().append("text")
79                    .style("font-size", function (d) {
80                        return d.size + "px";
81                    })
82                    .style("font-family", "Impact")
83                    .style("fill", function (d, i) {
84                        return fill(i);
85                    })
86                    .attr("text-anchor", "middle")
87                    .attr("transform", function (d) {
88                        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
89                    })
90                    .text(function (d) {
91                        return d.text;
92                    });
93            }
94
95            layout.start();
96        }
97
98        createCloud();
99        createTagLabels();
100
101        /**
102         * recreates the tag cloud (removing the old). Yes, it is expensive.
103         * @param fast if true, does not animate (using fadein fadeout)
104         */
105        function refreshCloud(fast) {
106            layout.stop();
107            var time = fast === true ? 0 : 500;
108            cloud.fadeOut(time, function () {
109                cloud.empty().css("visibility", "hidden").show();
110                createCloud();
111                cloud.hide().css("visibility", "visible");
112                cloud.fadeIn(time);
113            });
114
115        }
116        w = $("body").width();
117        $(window).resize(function () {
118            var bodyWidth = $("body").width();
119            if(w == bodyWidth) {
120                return;
121            }
122            w = bodyWidth;
123            refreshCloud(true);
124        });
125
126        cloud.click(refreshCloud);
127    });

128})();