14 didRender: function() { |
14 didRender: function() { |
15 var self = this; |
15 var self = this; |
16 var baseURL = env.rootURL.replace(/\/$/,"")+'/api/v1'; |
16 var baseURL = env.rootURL.replace(/\/$/,"")+'/api/v1'; |
17 |
17 |
18 d3.json(baseURL + "/discourses", function(discourses) { |
18 d3.json(baseURL + "/discourses", function(discourses) { |
|
19 var array = Object.keys(discourses).map(function (key) { return discourses[key].count; }); |
|
20 var oldMin = Math.min(...array), oldMax = Math.max(...array); |
|
21 var sum = array.reduce(function(a, b) { return a + b; }); |
|
22 var average = sum / array.length; |
|
23 var newMin = Math.floor((average - oldMin)), newMax = Math.floor((oldMax - average)); |
|
24 |
19 var width = self.$().parent().width(); |
25 var width = self.$().parent().width(); |
20 var height = self.$().parent().height() - self.$().siblings().height(); |
26 var height = self.$().parent().height() - self.$().siblings().height(); |
21 |
27 |
22 var bubble = d3.layout.pack() |
28 var bubble = d3.layout.pack() |
23 .sort(function comparator(a, b) { return a.value + b.value; }) |
29 .sort(function comparator(a, b) { return a.value + b.value; }) |
24 .size([width, height]) |
30 .size([width, height]) |
25 .padding(250); |
31 .value(function(d){ |
|
32 return Math.floor((((d.value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin); |
|
33 }) |
|
34 .padding(25); |
26 |
35 |
27 var element = d3.select('#' + self.get('elementId')); |
36 var element = d3.select('#' + self.get('elementId')); |
28 |
37 |
29 var bubbles = bubble.nodes(self.createNodes(discourses)); |
38 var bubbles = bubble.nodes(self.createNodes(discourses)); |
30 |
39 |
35 |
44 |
36 caption_nodes.enter().append("div") |
45 caption_nodes.enter().append("div") |
37 .attr("class", function(d) { return d.children ? " category": " item"; }); |
46 .attr("class", function(d) { return d.children ? " category": " item"; }); |
38 |
47 |
39 var item = caption.selectAll(".item") |
48 var item = caption.selectAll(".item") |
40 .style("width", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; }) |
49 .style("width", function(d) { return (d.r * 2) + 'px'; }) |
41 .style("height", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; }) |
50 .style("height", function(d) { return (d.r * 2) + 'px'; }) |
42 .style("left", function(d) { return d.x - Math.max(10 + d.r, d.r) + 'px'; }) |
51 .style("left", function(d) { return d.x - d.r + 'px'; }) |
43 .style("top", function(d) { return d.y - Math.max(10 + d.r, d.r) + 'px'; }) |
52 .style("top", function(d) { return d.y - d.r + 'px'; }) |
|
53 .style("font-size", function(d) { |
|
54 return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px'; |
|
55 }) |
44 .on('click', function(d) { |
56 .on('click', function(d) { |
45 self.get('filter').set('discourse', d.id); |
57 self.get('filter').set('discourse', d.id); |
46 }); |
58 }); |
47 item.append("span") |
59 item.append("span") |
48 .text(function(d) { return d.name; }) |
60 .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; }) |
49 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; }) |
61 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; }) |
50 .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; }) |
62 .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; }) |
51 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; }) |
63 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; }) |
52 .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; }); |
64 .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; }); |
53 |
65 |
54 var svg = element.append("svg") |
66 var svg = element.append("svg") |
55 .style("width", width + "px") |
67 .style("width", width + "px") |
56 .style("height", width + "px") |
68 .style("height", height + "px") |
57 .attr("class", "bubble"); |
69 .attr("class", "bubble"); |
58 |
70 |
59 var svg_nodes = svg.selectAll(".node") |
71 var svg_nodes = svg.selectAll(".node") |
60 .data(bubbles); |
72 .data(bubbles); |
61 svg_nodes.enter().append("g") |
73 svg_nodes.enter().append("g") |
66 .on('click', function(d) { |
78 .on('click', function(d) { |
67 self.get('filter').set('discourse', d.id); |
79 self.get('filter').set('discourse', d.id); |
68 }); |
80 }); |
69 |
81 |
70 leaf.append("circle") |
82 leaf.append("circle") |
71 .attr("r", function(d) { return Math.max(7.5 + d.r * 2, d.r * 2); }) |
83 .attr("r", function(d) { return d.r; }) |
72 .attr("fill", function(d) { return d.fill; }) |
84 .attr("fill", function(d) { return d.fill; }) |
73 .attr("stroke", function() { return "#859097"; }); |
85 .attr("stroke", function() { return "#859097"; }); |
74 element.style("height", height + "px"); |
86 element.style("height", height + "px"); |
75 }); |
87 }); |
76 |
88 |
88 var category_value = self.get('constants').DISCOURSE_CATEGORY_VALUES[category_key]; |
100 var category_value = self.get('constants').DISCOURSE_CATEGORY_VALUES[category_key]; |
89 |
101 |
90 children[category_key] = children[category_key] || {}; |
102 children[category_key] = children[category_key] || {}; |
91 children[category_key]['name'] = category_key; |
103 children[category_key]['name'] = category_key; |
92 children[category_key]['children'] = children[category_key]['children'] || []; |
104 children[category_key]['children'] = children[category_key]['children'] || []; |
93 children[category_key]['children'].push({ "id": key, "name": discourse.label, "value": discourse.count, "fill": category_value.fill }); |
105 children[category_key]['children'].push({ |
|
106 'id': key, |
|
107 'name': discourse.label, |
|
108 'value': discourse.count, |
|
109 'fill': category_value.fill |
|
110 }); |
94 }); |
111 }); |
95 |
112 |
96 nodes.children = []; |
113 nodes.children = []; |
97 Object.keys(children).forEach(function(key) { |
114 Object.keys(children).forEach(function(key) { |
98 nodes.children.push(children[key]); |
115 nodes.children.push(children[key]); |