Mercurial Mercurial > corpus_parole / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | zip | gz | bz2 | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Discourse bubbles radius range + font size
authorChloe Laisne <chloe.laisne@gmail.com>
Wed, 24 Aug 2016 17:22:02 +0200
changeset 265 5995d360e6ac
parent 264 e0fc9f698b9b
child 266 0e1880fa7bd3
Discourse bubbles radius range + font size
cms/app-client/app/components/discourses-component.js file | annotate | diff | comparison | revisions
cms/app-client/app/styles/app.scss file | annotate | diff | comparison | revisions
cms/app-client/app/styles/components/discourses-component.scss file | annotate | diff | comparison | revisions 
--- a/cms/app-client/app/components/discourses-component.js	Wed Aug 24 15:01:54 2016 +0200
+++ b/cms/app-client/app/components/discourses-component.js	Wed Aug 24 17:22:02 2016 +0200
@@ -16,13 +16,22 @@
         var baseURL = env.rootURL.replace(/\/$/,"")+'/api/v1';
 
         d3.json(baseURL + "/discourses", function(discourses) {
+            var array = Object.keys(discourses).map(function (key) { return discourses[key].count; });
+            var oldMin = Math.min(...array), oldMax = Math.max(...array);
+            var sum = array.reduce(function(a, b) { return a + b; });
+            var average = sum / array.length;
+            var newMin = Math.floor((average - oldMin)), newMax = Math.floor((oldMax - average));
+
             var width = self.$().parent().width();
             var height = self.$().parent().height() - self.$().siblings().height();
 
             var bubble = d3.layout.pack()
                 .sort(function comparator(a, b) { return a.value + b.value; })
                 .size([width, height])
-                .padding(250);
+                .value(function(d){
+                    return Math.floor((((d.value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin);
+                })
+                .padding(25);
 
             var element = d3.select('#' + self.get('elementId'));
 
@@ -37,15 +46,18 @@
                 .attr("class", function(d) { return d.children ? " category": " item"; });
 
             var item = caption.selectAll(".item")
-                .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("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'; })
+                .style("width", function(d) { return (d.r * 2) + 'px'; })
+                .style("height", function(d) { return (d.r * 2) + 'px'; })
+                .style("left", function(d) { return d.x - d.r + 'px'; })
+                .style("top", function(d) { return d.y - d.r + 'px'; })
+                .style("font-size", function(d) {
+                    return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px';
+                })
                 .on('click', function(d) {
                     self.get('filter').set('discourse', d.id);
                 });
             item.append("span")
-                .text(function(d) { return d.name; })
+                .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; })
                 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; })
                 .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; })
                 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
@@ -53,7 +65,7 @@
 
             var svg = element.append("svg")
                 .style("width", width + "px")
-                .style("height", width + "px")
+                .style("height", height + "px")
                 .attr("class", "bubble");
 
             var svg_nodes = svg.selectAll(".node")
@@ -68,7 +80,7 @@
                 });
 
             leaf.append("circle")
-                .attr("r", function(d) { return Math.max(7.5 + d.r * 2, d.r * 2); })
+                .attr("r", function(d) { return d.r; })
                 .attr("fill", function(d) { return d.fill; })
                 .attr("stroke", function() { return "#859097"; });
             element.style("height", height + "px");
@@ -90,7 +102,12 @@
             children[category_key] = children[category_key] || {};
             children[category_key]['name'] = category_key;
             children[category_key]['children'] = children[category_key]['children'] || [];
-            children[category_key]['children'].push({ "id": key, "name": discourse.label, "value": discourse.count, "fill": category_value.fill });
+            children[category_key]['children'].push({
+                'id': key,
+                'name': discourse.label,
+                'value': discourse.count,
+                'fill': category_value.fill
+            });
         });
 
         nodes.children = [];
--- a/cms/app-client/app/styles/app.scss	Wed Aug 24 15:01:54 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Wed Aug 24 17:22:02 2016 +0200
@@ -100,7 +100,6 @@
     position: relative;
 }
 
-#tabs-discours,
 #tabs-chrono,
 #tabs-thematiques {
     padding: 0px 20px;
--- a/cms/app-client/app/styles/components/discourses-component.scss	Wed Aug 24 15:01:54 2016 +0200
+++ b/cms/app-client/app/styles/components/discourses-component.scss	Wed Aug 24 17:22:02 2016 +0200
@@ -11,6 +11,10 @@
 	color: $dark-blue;
 	text-align: center;
 	font-size: 12px;
-	text-transform: capitalize;
 	position: absolute;
+}
+
+.discourses-component .caption .item .count {
+	font-weight: bold;
+	display: block;
 }
\ No newline at end of file
corpus_parole