|
| @@ -0,0 +1,378 @@ |
| @@ -0,0 +1,378 @@ |
|
| |
1
| +/* |
|
| |
2
| + HOME CHARTS |
|
| |
3
| +*/ |
|
| |
4
| + |
|
| |
5
| +//Adding this code by @jshanley to create a filter to look for the last child |
|
| |
6
| + |
|
| |
7
| +d3.selection.prototype.first = function() { |
|
| |
8
| + return d3.select(this[0]); |
|
| |
9
| +}; |
|
| |
10
| +d3.selection.prototype.last = function() { |
|
| |
11
| + var last = this.size() - 1; |
|
| |
12
| + return d3.select(this[last]); |
|
| |
13
| +}; |
|
| |
14
| + |
|
| |
15
| +var charts = { |
|
| |
16
| + build_resource: function(url){ |
|
| |
17
| + $.get(url, function(dataset){ |
|
| |
18
| + |
|
| |
19
| + |
|
| |
20
| + var width = 600; |
|
| |
21
| + var height = 300; |
|
| |
22
| + var padding = 30; |
|
| |
23
| + var radius = Math.min(width, height) / 2 - padding; |
|
| |
24
| + |
|
| |
25
| + var color = d3.scaleOrdinal(d3.schemeCategory20); |
|
| |
26
| + var new_div = d3.select(".carousel-inner").append("div").attr("class","item"); |
|
| |
27
| + var svg = new_div.append("svg").attr("width", width).attr("height", height) |
|
| |
28
| + .style("margin","auto") |
|
| |
29
| + .style("display","block") |
|
| |
30
| + .append('g') |
|
| |
31
| + .attr('transform', 'translate(' + (width / 2) + |
|
| |
32
| + ',' + (height / 2 + padding ) + ')'); |
|
| |
33
| + |
|
| |
34
| + |
|
| |
35
| + |
|
| |
36
| + var donutInner = 20; |
|
| |
37
| + var arc = d3.arc() |
|
| |
38
| + .innerRadius(radius - donutInner) |
|
| |
39
| + .outerRadius(radius); |
|
| |
40
| + |
|
| |
41
| + svg.append("text") |
|
| |
42
| + .attr("text-anchor", "middle") |
|
| |
43
| + .attr("x",0 ) |
|
| |
44
| + .attr("y", -height/2 ) |
|
| |
45
| + .style("font-size", "30px") |
|
| |
46
| + .text("Recursos mais utilizados") |
|
| |
47
| + .attr("fill", "#003333") |
|
| |
48
| + .style("font-weight", "bold") |
|
| |
49
| + .style("font-style", "italic"); |
|
| |
50
| + |
|
| |
51
| + |
|
| |
52
| + var pie = d3.pie() |
|
| |
53
| + .value(function(d) { return d[1]; }) |
|
| |
54
| + .sort(null); |
|
| |
55
| + |
|
| |
56
| + |
|
| |
57
| + |
|
| |
58
| + var path = svg.selectAll('path') |
|
| |
59
| + .data(pie(dataset)) |
|
| |
60
| + .enter() |
|
| |
61
| + .append('path') |
|
| |
62
| + .attr('d', arc) |
|
| |
63
| + .attr('fill', function(d, i) { |
|
| |
64
| + return color(i); |
|
| |
65
| + }); |
|
| |
66
| + var labelArc = d3.arc() |
|
| |
67
| + .outerRadius(radius - donutInner + 30) |
|
| |
68
| + .innerRadius(radius + 20 ); |
|
| |
69
| + |
|
| |
70
| + //Adding tooltips to each part of the pie chart. |
|
| |
71
| + svg.selectAll("text.pie-tooltip") |
|
| |
72
| + .data(pie(dataset)) |
|
| |
73
| + .enter() |
|
| |
74
| + .append("text") |
|
| |
75
| + .attr("id", function(d){ |
|
| |
76
| + return d.data[0]; |
|
| |
77
| + }) |
|
| |
78
| + .attr("class","pie-tooltip") |
|
| |
79
| + .attr('fill',"#172121") |
|
| |
80
| + .attr("transform", function(d) { |
|
| |
81
| + c = labelArc.centroid(d); |
|
| |
82
| + return "translate(" + (c[0]*1.0 - 20) +"," + c[1]*0.8 + ")"; |
|
| |
83
| + }) |
|
| |
84
| + .attr("dy", ".25em") |
|
| |
85
| + .text(function(d) { return d.data[0] +'('+ d.data[1] +')'; }); |
|
| |
86
| + |
|
| |
87
| + |
|
| |
88
| + |
|
| |
89
| + }) // end of the get method |
|
| |
90
| + }, |
|
| |
91
| + |
|
| |
92
| + build_bubble_user: function(url){ |
|
| |
93
| + $.get(url, function(dataset){ |
|
| |
94
| + var width = 600; |
|
| |
95
| + var height = 300; |
|
| |
96
| + |
|
| |
97
| + |
|
| |
98
| + function min(){ |
|
| |
99
| + min = 100000000000; |
|
| |
100
| + for(var i = 0; i < dataset.length; i++){ |
|
| |
101
| + if (dataset[i]['count'] < min){ |
|
| |
102
| + min = dataset[i]['count']; |
|
| |
103
| + } |
|
| |
104
| + } |
|
| |
105
| + |
|
| |
106
| + return min |
|
| |
107
| + } |
|
| |
108
| + |
|
| |
109
| + function max(){ |
|
| |
110
| + max = 0; |
|
| |
111
| + for(var i = 0; i < dataset.length; i++){ |
|
| |
112
| + if (dataset[i]['count'] > max){ |
|
| |
113
| + max = dataset[i]['count']; |
|
| |
114
| + } |
|
| |
115
| + } |
|
| |
116
| + |
|
| |
117
| + return max |
|
| |
118
| + } |
|
| |
119
| + |
|
| |
120
| + |
|
| |
121
| + |
|
| |
122
| + var color = d3.scaleOrdinal(d3.schemeCategory20); |
|
| |
123
| + //adding new div to carousel-inner div |
|
| |
124
| + var new_div = d3.select(".carousel-inner").append("div").attr("class","item"); |
|
| |
125
| + var radiusScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]); |
|
| |
126
| + var svg = new_div.append("svg").attr("width", width).attr("height", height) |
|
| |
127
| + .style("margin","auto") |
|
| |
128
| + .style("display","block") |
|
| |
129
| + .append('g') |
|
| |
130
| + .attr("transform", "translate(0,0)") |
|
| |
131
| + .attr("width", width) |
|
| |
132
| + .attr("height", height); |
|
| |
133
| + |
|
| |
134
| + //adding svg title |
|
| |
135
| + |
|
| |
136
| + svg.append("text") |
|
| |
137
| + .attr("text-anchor", "middle") |
|
| |
138
| + .attr("x", width/2 ) |
|
| |
139
| + .attr("y", 30) |
|
| |
140
| + .style("font-size", "30px") |
|
| |
141
| + .text("Usuários mais ativos no Amadeus") |
|
| |
142
| + .attr("fill", "#003333") |
|
| |
143
| + .style("font-weight", "bold") |
|
| |
144
| + .style("font-style", "italic"); |
|
| |
145
| + |
|
| |
146
| + var simulation = d3.forceSimulation() |
|
| |
147
| + .force("x", d3.forceX(width/2).strength(0.05)) |
|
| |
148
| + .force("y", d3.forceY(height/2).strength(0.05)) |
|
| |
149
| + .force("collide", d3.forceCollide(function(d){ |
|
| |
150
| + return radiusScale(d['count']); |
|
| |
151
| + })); |
|
| |
152
| + |
|
| |
153
| + //First I create as many groups as datapoints so |
|
| |
154
| + //it can hold all other objects (circle, texts, images) |
|
| |
155
| + var groups = svg.selectAll('.users-item') |
|
| |
156
| + .data(dataset) |
|
| |
157
| + .enter() |
|
| |
158
| + .append("g") |
|
| |
159
| + .attr("class",".user-dot"); |
|
| |
160
| + |
|
| |
161
| + //Create circles to be drawn |
|
| |
162
| + var circles = groups |
|
| |
163
| + .append('circle') |
|
| |
164
| + .attr("r", function(d){ |
|
| |
165
| + return radiusScale(d['count']); |
|
| |
166
| + }) |
|
| |
167
| + |
|
| |
168
| + .attr("fill", function(d){ |
|
| |
169
| + return 'url('+'#'+'user_'+d['user_id']+')'; |
|
| |
170
| + }); |
|
| |
171
| + |
|
| |
172
| + |
|
| |
173
| + |
|
| |
174
| + //Add texts to show user names |
|
| |
175
| + groups.append("text") |
|
| |
176
| + .text(function(d){ |
|
| |
177
| + return d['user'] +'('+ d['count'] + ')'; |
|
| |
178
| + }).attr("fill", "#FFFFFF") |
|
| |
179
| + .attr("id", function(d){ |
|
| |
180
| + return "user_tooltip_"+d['user_id']; |
|
| |
181
| + }).style("display", "none"); |
|
| |
182
| + |
|
| |
183
| + |
|
| |
184
| + groups.on("mouseover", function(d){ |
|
| |
185
| + $("#"+"user_tooltip_"+d['user_id']).show(); |
|
| |
186
| + }); |
|
| |
187
| + |
|
| |
188
| + |
|
| |
189
| + groups.on("mouseout", function(d){ |
|
| |
190
| + $("#"+"user_tooltip_"+d['user_id']).hide(); |
|
| |
191
| + }); |
|
| |
192
| + |
|
| |
193
| + var defs = groups.append('svg:defs'); |
|
| |
194
| + |
|
| |
195
| + //Attching images to bubbles |
|
| |
196
| + defs.append("svg:pattern") |
|
| |
197
| + .attr("id", function(d){ |
|
| |
198
| + return "user_"+d['user_id']; |
|
| |
199
| + }) |
|
| |
200
| + .attr("width", function(d){ |
|
| |
201
| + return radiusScale(d['count']); |
|
| |
202
| + }) |
|
| |
203
| + .attr("height", function(d){ |
|
| |
204
| + return radiusScale(d['count']); |
|
| |
205
| + }) |
|
| |
206
| + .append("svg:image") |
|
| |
207
| + .attr("xlink:href", function(d){ |
|
| |
208
| + return d['image']; |
|
| |
209
| + }) |
|
| |
210
| + .attr("width",function(d){ |
|
| |
211
| + return radiusScale(d['count'])*2; |
|
| |
212
| + }) |
|
| |
213
| + .attr("height", function(d){ |
|
| |
214
| + return radiusScale(d['count'])*2; |
|
| |
215
| + }) |
|
| |
216
| + .attr("x", 0) |
|
| |
217
| + .attr("y", 0); |
|
| |
218
| + |
|
| |
219
| + |
|
| |
220
| + |
|
| |
221
| + //simulation |
|
| |
222
| + simulation.nodes(dataset) |
|
| |
223
| + .on('tick', ticked); //so all data points are attached to it |
|
| |
224
| + |
|
| |
225
| + function ticked(){ |
|
| |
226
| + groups.attr("transform", function(d){ |
|
| |
227
| + return "translate(" + d.x + "," + d.y + ")"; |
|
| |
228
| + }) |
|
| |
229
| + } |
|
| |
230
| + }); |
|
| |
231
| + |
|
| |
232
| + |
|
| |
233
| + }, |
|
| |
234
| + |
|
| |
235
| + most_accessed_subjects: function(url){ |
|
| |
236
| + $.get(url, function(dataset){ |
|
| |
237
| + var width = 800; |
|
| |
238
| + var height = 300; |
|
| |
239
| + |
|
| |
240
| + var new_div = d3.select(".carousel-inner").append("div").attr("class","item"); |
|
| |
241
| + |
|
| |
242
| + var svg = new_div.append("svg").attr("width", "100%").attr("height", height) |
|
| |
243
| + .style("margin","auto") |
|
| |
244
| + .style("display","block"); |
|
| |
245
| + |
|
| |
246
| + var barPadding = 2 |
|
| |
247
| + var bottomPadding = 15; |
|
| |
248
| + var marginLeft = 170; //Margin Left for all bars inside the graph |
|
| |
249
| + |
|
| |
250
| + var yScale = d3.scaleLinear() |
|
| |
251
| + .domain([0, d3.max(dataset, function(d) { return d.count; })]) |
|
| |
252
| + .range([bottomPadding, 260]); |
|
| |
253
| + |
|
| |
254
| + var rects = svg.selectAll("rect") |
|
| |
255
| + .data(dataset) |
|
| |
256
| + .enter() |
|
| |
257
| + .append("g"); |
|
| |
258
| + |
|
| |
259
| + rects.append("rect") |
|
| |
260
| + .attr("x", function(d, i){ |
|
| |
261
| + return i * (width / dataset.length ) + barPadding + marginLeft ; |
|
| |
262
| + }) |
|
| |
263
| + .attr("y", function(d){ |
|
| |
264
| + return height - yScale(d.count) - bottomPadding; |
|
| |
265
| + }) |
|
| |
266
| + .attr("width", |
|
| |
267
| + width / dataset.length - barPadding |
|
| |
268
| + ) |
|
| |
269
| + .attr("height", function(d){ |
|
| |
270
| + return yScale(d.count); |
|
| |
271
| + }); |
|
| |
272
| + |
|
| |
273
| + |
|
| |
274
| + var tooltipDiv = new_div.append("div").attr("class","bar-tip"); |
|
| |
275
| + |
|
| |
276
| + rects.on("mouseover", function(d, i){ |
|
| |
277
| + $(this).attr("fill", "red"); |
|
| |
278
| + $("#accessed_subject_"+i).show(); //So the tooltip is hidden |
|
| |
279
| + tooltipDiv.transition() |
|
| |
280
| + .duration(200) |
|
| |
281
| + .style("opacity", .9); |
|
| |
282
| + tooltipDiv.html("<p style='font-size:9px'>" + d.name + "( " + d.count + " )" +"</p>") |
|
| |
283
| + .style("left", (i * (width / dataset.length ) + barPadding + marginLeft) + "px") |
|
| |
284
| + .style("top", (height - yScale(d.count) - bottomPadding) + "px"); |
|
| |
285
| + }); |
|
| |
286
| + |
|
| |
287
| + rects.on("mouseout", function(d, i ){ |
|
| |
288
| + $(this).attr("fill", "black"); |
|
| |
289
| + |
|
| |
290
| + $("#accessed_subject_"+i).hide(); //So the tooltip shows up |
|
| |
291
| + |
|
| |
292
| + |
|
| |
293
| + tooltipDiv.transition() |
|
| |
294
| + .duration(500) |
|
| |
295
| + .style("opacity", 0); |
|
| |
296
| + |
|
| |
297
| + }); |
|
| |
298
| + |
|
| |
299
| + |
|
| |
300
| + |
|
| |
301
| + //Styling title |
|
| |
302
| + svg.append("text") |
|
| |
303
| + .attr("x", width/2) |
|
| |
304
| + .attr("y", 30) |
|
| |
305
| + .attr("text-anchor", "middle") |
|
| |
306
| + .style("font-size", "30px") |
|
| |
307
| + .text("Subjects mais acessados") |
|
| |
308
| + .attr("fill", "#003333") |
|
| |
309
| + .style("font-weight", "bold") |
|
| |
310
| + .style("font-style", "italic"); |
|
| |
311
| + |
|
| |
312
| + }); |
|
| |
313
| + }, |
|
| |
314
| + most_used_tags: function(url){ |
|
| |
315
| + $.get(url, function(dataset){ |
|
| |
316
| + //get most used tags across all amadeus |
|
| |
317
| + var width = 800; |
|
| |
318
| + var height = 300; |
|
| |
319
| + |
|
| |
320
| + function min(){ |
|
| |
321
| + min = 100000000000; |
|
| |
322
| + for(var i = 0; i < dataset.length; i++){ |
|
| |
323
| + if (dataset[i]['count'] < min){ |
|
| |
324
| + min = dataset[i]['count']; |
|
| |
325
| + } |
|
| |
326
| + } |
|
| |
327
| + |
|
| |
328
| + return min |
|
| |
329
| + } |
|
| |
330
| + |
|
| |
331
| + function max(){ |
|
| |
332
| + max = 0; |
|
| |
333
| + for(var i = 0; i < dataset.length; i++){ |
|
| |
334
| + if (dataset[i]['count'] > max){ |
|
| |
335
| + max = dataset[i]['count']; |
|
| |
336
| + } |
|
| |
337
| + } |
|
| |
338
| + |
|
| |
339
| + return max |
|
| |
340
| + } |
|
| |
341
| + |
|
| |
342
| + console.log(dataset); |
|
| |
343
| + |
|
| |
344
| + var container_div = d3.select("#most-used-tags-body"); |
|
| |
345
| + var svg = container_div.append("svg").attr("width", "100%").attr("height", height) |
|
| |
346
| + .style("margin","auto") |
|
| |
347
| + .style("display","block") |
|
| |
348
| + .style("background","#ddf8e7") |
|
| |
349
| + .append('g') |
|
| |
350
| + .attr("transform", "translate(0,0)") |
|
| |
351
| + .attr("width", width) |
|
| |
352
| + .attr("height", height); |
|
| |
353
| + |
|
| |
354
| + |
|
| |
355
| + |
|
| |
356
| + var radiusScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]); |
|
| |
357
| + var tag_cloud = svg.selectAll('.tag-cloud-div') |
|
| |
358
| + .data(dataset) |
|
| |
359
| + .enter() |
|
| |
360
| + .append('g') |
|
| |
361
| + .attr("class", "data-container"); |
|
| |
362
| + |
|
| |
363
| + |
|
| |
364
| + var tag_divs = tag_cloud |
|
| |
365
| + .append('div') |
|
| |
366
| + .attr('class', 'tag-cloud') |
|
| |
367
| + .attr('text', function(d){ |
|
| |
368
| + return d['name']; |
|
| |
369
| + }); |
|
| |
370
| + |
|
| |
371
| + }); |
|
| |
372
| + } |
|
| |
373
| +} |
|
| |
374
| + |
|
| |
375
| +charts.most_used_tags('/analytics/most_used_tags'); |
|
| |
376
| +//charts.build_resource('/topics/count_resources/'); |
|
| |
377
| +//charts.build_bubble_user('/users/get_users_log/'); |
|
| |
378
| +//charts.most_accessed_subjects('/subjects/most_accessed_subjects'); |
|
0
| \ No newline at end of file |
379
| \ No newline at end of file |
