--- a/cms/app-client/app/components/discourses-component.js	Tue Jun 07 19:59:30 2016 +0200
+++ b/cms/app-client/app/components/discourses-component.js	Wed Jun 08 21:40:22 2016 +0200
@@ -17,44 +17,69 @@
         var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1';
 
         d3.json(baseURL + "/discourses", function(discourses) {
-            console.log(discourses);
 
             var width = self.$().parent().width();
             var height = self.$().parent().height();
 
             var bubble = d3.layout.pack()
-                .sort(null)
+                .sort(function comparator(a, b) { return a.value + b.value; })
                 .size([width, height])
-                .padding(33);
+                .padding(250);
+
+            var element = d3.select('#' + self.get('elementId'))
+                .style("position", "relative");
+
+            var bubbles = bubble.nodes(self.createNodes(discourses));
+
+            var caption = element.append("div")
+                .style("position", "absolute")
+                .style("transform-origin", "50% 50% 0px")
+                .style("width", width + "px")
+                .style("height", height + "px")
+                .attr("class", "caption");
+
+            var caption_nodes = caption.selectAll(".node")
+                .data(bubbles);
 
-            var element = d3.select('#' + self.get('elementId'));
+            caption_nodes.enter().append("div")
+                .attr("class", function(d) { return 'item' + (d.children ? ' category': ''); })
+                .style("width", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; })
+                .style("height", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; })
+                .style("position", function(d) { return 'absolute'; })
+                .style("left", function(d) { return d.x - Math.max(10 + d.r, d.r) + 'px'; })
+                .style("top", function(d) { return d.y - Math.max(10 + d.r, d.r) + 'px'; });
+
+            var text = caption.selectAll(".item")
+                .append("span")
+
+                .text(function(d) { return d.name; })
+                .style("text-align", "center")
+                .style("display", function(d) { return d.children ? 'none' : 'inline-block'; })
+                .style("width", function(d) { return $(this).parent().width() > $(this).width() ? $(this).parent().width() + 'px' : ''; })
+                .style("text-transform", "capitalize")
+                .style("font-size", "15px")
+                .style("margin-left", function(d) { return ( $(this).width() > $(this).parent().width() ? - ( $(this).width() / 2 ) + ( $(this).parent().width() / 2 ) : 0 ) + 'px'; })
+                .style("margin-top", function(d) { return $(this).parent().height() / 2 - $(this).height() / 2 + 'px'; });
 
             var svg = element.append("svg")
-                .attr("width", width)
-                .attr("height", height)
+                .style("width", width + "px")
+                .style("height", width + "px")
                 .attr("class", "bubble");
 
-            svg.selectAll(".node")
-                .data(bubble.nodes(self.createNodes(discourses)))
-                .enter().append("g")
-                .attr("width", function(d) { return 2.5 * d.r + 'px'; })
+            var svg_nodes = svg.selectAll(".node")
+                .data(bubbles);
+
+            svg_nodes.enter().append("g")
                 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); })
-                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
-                .style("font-size", function(d) { return Math.max(13, d.r / 2) + 'px'; });
-                
+                .attr("transform", function(d) { console.log(d); return "translate(" + d.x + "," + d.y + ")"; });
 
             var leaf = svg.selectAll(".leaf")
                 .on('click', function(d) { document.location = self.setQueryString('discours', d.name); });
             
             leaf.append("circle")
-                .attr("r", function(d) { return d.r; })
+                .attr("r", function(d) { return Math.max(7.5 + d.r * 2, d.r * 2); })
                 .attr("fill", function(d) { return d.fill; })
                 .attr("stroke", function() { return "#000"; });
-            
-            leaf.append("text")
-                .attr("dy", ".3em")
-                .style("text-anchor", "middle")
-                .text(function(d) { return d.name; });
 
             element.style("height", height + "px");
         });