Download as
Browse Code »

Commit 8e27d414655f128b0431f6b6d4c1b53bdfc8f7d3

Authored by Felipe Bormann
1 parent 1917dcc1
Exists in master and in 2 other branches amadeus_univasf, refactoring

tag cloud is binding rectangle and texts but color scale is not working

Showing 5 changed files with 65 additions and 21 deletions   Show diff stats
analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc
View file @8e27d41
No preview for this file type
analytics/static/analytics/general.css
  Diff comments   View file @8e27d41
@@ -34,10 +34,12 @@ @@ -34,10 +34,12 @@
34 border-radius: 10px; 34 border-radius: 10px;
35 color: #ffffff; } 35 color: #ffffff; }
36 36
37 -div.tag-cloud { 37 +.tag-cloud {
38 width: 10%; 38 width: 10%;
39 border-radius: 25px; 39 border-radius: 25px;
40 - color: #ffffff;  
41 - background-color: #52b7bd; } 40 + color: #ffffff; }
  41 +
  42 +.tag-name {
  43 + color: #ffffff; }
42 44
43 /*# sourceMappingURL=general.css.map */ 45 /*# sourceMappingURL=general.css.map */
analytics/static/analytics/general.css.map
  Diff comments   View file @8e27d41
1 { 1 {
2 "version": 3, 2 "version": 3,
3 -"mappings": "AAAA,YAAY;EACX,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;;AAGd,sBAAsB;EACrB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACD,KAAK,EAAE,OAAO;EAEf,yBAAE;IACD,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACD,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACX,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEpB,gCAAG;QACF,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAIvB,sBAAsB;EACrB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;;AAEf,aAAa;EACZ,KAAK,EAAE,GAAG;EACV,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,gBAAgB,EAAE,OAAO", 3 +"mappings": "AAAA,YAAY;EACX,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;;AAGd,sBAAsB;EACrB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACD,KAAK,EAAE,OAAO;EAEf,yBAAE;IACD,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACD,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACX,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEpB,gCAAG;QACF,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAIvB,sBAAsB;EACrB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;;AAEf,UAAU;EACT,KAAK,EAAE,GAAG;EACV,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;;AAGf,SAAS;EACR,KAAK,EAAE,OAAO",
4 "sources": ["general.sass"], 4 "sources": ["general.sass"],
5 "names": [], 5 "names": [],
6 "file": "general.css" 6 "file": "general.css"
analytics/static/analytics/general.sass
  Diff comments   View file @8e27d41
@@ -41,8 +41,11 @@ @@ -41,8 +41,11 @@
41 border-radius: 10px 41 border-radius: 10px
42 color: #ffffff 42 color: #ffffff
43 43
44 -div.tag-cloud 44 +.tag-cloud
45 width: 10% 45 width: 10%
46 border-radius: 25px 46 border-radius: 25px
47 color: #ffffff 47 color: #ffffff
48 - background-color: #52b7bd  
49 \ No newline at end of file 48 \ No newline at end of file
  49 +
  50 +
  51 +.tag-name
  52 + color: #ffffff
50 \ No newline at end of file 53 \ No newline at end of file
analytics/static/analytics/js/charts.js
  Diff comments   View file @8e27d41
@@ -318,25 +318,25 @@ var charts = { @@ -318,25 +318,25 @@ var charts = {
318 var height = 300; 318 var height = 300;
319 319
320 function min(){ 320 function min(){
321 - min = 100000000000; 321 + minimum = 100000000000;
322 for(var i = 0; i < dataset.length; i++){ 322 for(var i = 0; i < dataset.length; i++){
323 if (dataset[i]['count'] < min){ 323 if (dataset[i]['count'] < min){
324 - min = dataset[i]['count']; 324 + minimum = dataset[i]['count'];
325 } 325 }
326 } 326 }
327 327
328 - return min 328 + return minimum
329 } 329 }
330 330
331 function max(){ 331 function max(){
332 - max = 0; 332 + maximum = 0;
333 for(var i = 0; i < dataset.length; i++){ 333 for(var i = 0; i < dataset.length; i++){
334 if (dataset[i]['count'] > max){ 334 if (dataset[i]['count'] > max){
335 - max = dataset[i]['count']; 335 + maximum = dataset[i]['count'];
336 } 336 }
337 } 337 }
338 338
339 - return max 339 + return maximum
340 } 340 }
341 341
342 console.log(dataset); 342 console.log(dataset);
@@ -348,26 +348,65 @@ var charts = { @@ -348,26 +348,65 @@ var charts = {
348 .style("background","#ddf8e7") 348 .style("background","#ddf8e7")
349 .append('g') 349 .append('g')
350 .attr("transform", "translate(0,0)") 350 .attr("transform", "translate(0,0)")
351 - .attr("width", width) 351 + .style("width", width)
352 .attr("height", height); 352 .attr("height", height);
353 353
354 354
  355 + var color = d3.scaleLinear()
  356 + .domain([min(), max()])
  357 + .range(['#bdbdbd','#52b7bd', '#149e91']);
355 358
356 - var radiusScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]); 359 + var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]);
357 var tag_cloud = svg.selectAll('.tag-cloud-div') 360 var tag_cloud = svg.selectAll('.tag-cloud-div')
358 .data(dataset) 361 .data(dataset)
359 .enter() 362 .enter()
360 .append('g') 363 .append('g')
361 - .attr("class", "data-container"); 364 + .attr("class", "data-container")
  365 + .attr("width", 100)
  366 + .attr("height", 50);
362 367
363 368
364 - var tag_divs = tag_cloud  
365 - .append('div') 369 + var tag_rects = tag_cloud
  370 + .append('rect')
366 .attr('class', 'tag-cloud') 371 .attr('class', 'tag-cloud')
367 - .attr('text', function(d){  
368 - return d['name'];  
369 - });  
370 - 372 + .attr("width", function(d){
  373 + return xScale(d['count']);
  374 + })
  375 + .attr("height", 25)
  376 + .attr("fill", function(d, i) {
  377 + return color(xScale[d["count"]]);
  378 + })
  379 + .attr("rx", 20)
  380 + .attr("ry", 20);
  381 +
  382 + var tag_texts = tag_cloud
  383 + .append("text")
  384 + .text(function(d){
  385 + return d['name'];
  386 + })
  387 + .attr("x", 15)
  388 + .attr("y", 20)
  389 + .attr("class", "tag-name")
  390 + .attr("fill", "#ffffff");
  391 +
  392 +
  393 + var simulation = d3.forceSimulation()
  394 + .force("x", d3.forceX(width/2).strength(0.05))
  395 + .force("y", d3.forceY(height/2).strength(0.05))
  396 + .force("collide", d3.forceCollide(function(d){
  397 + return 25;
  398 + }));
  399 +
  400 + //simulation
  401 + simulation.nodes(dataset)
  402 + .on('tick', ticked); //so all data points are attached to it
  403 +
  404 + function ticked(){
  405 + tag_cloud.attr("transform", function(d){
  406 + return "translate(" + d.x + "," + d.y + ")";
  407 + })
  408 + }
  409 +
371 }); 410 });
372 } 411 }
373 } 412 }