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 34 border-radius: 10px;
35 35 color: #ffffff; }
36 36  
37   -div.tag-cloud {
  37 +.tag-cloud {
38 38 width: 10%;
39 39 border-radius: 25px;
40   - color: #ffffff;
41   - background-color: #52b7bd; }
  40 + color: #ffffff; }
  41 +
  42 +.tag-name {
  43 + color: #ffffff; }
42 44  
43 45 /*# sourceMappingURL=general.css.map */
... ...
analytics/static/analytics/general.css.map
  Diff comments   View file @8e27d41
1 1 {
2 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 4 "sources": ["general.sass"],
5 5 "names": [],
6 6 "file": "general.css"
... ...
analytics/static/analytics/general.sass
  Diff comments   View file @8e27d41
... ... @@ -41,8 +41,11 @@
41 41 border-radius: 10px
42 42 color: #ffffff
43 43  
44   -div.tag-cloud
  44 +.tag-cloud
45 45 width: 10%
46 46 border-radius: 25px
47 47 color: #ffffff
48   - background-color: #52b7bd
49 48 \ No newline at end of file
  49 +
  50 +
  51 +.tag-name
  52 + color: #ffffff
50 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 318 var height = 300;
319 319  
320 320 function min(){
321   - min = 100000000000;
  321 + minimum = 100000000000;
322 322 for(var i = 0; i < dataset.length; i++){
323 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 331 function max(){
332   - max = 0;
  332 + maximum = 0;
333 333 for(var i = 0; i < dataset.length; i++){
334 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 342 console.log(dataset);
... ... @@ -348,26 +348,65 @@ var charts = {
348 348 .style("background","#ddf8e7")
349 349 .append('g')
350 350 .attr("transform", "translate(0,0)")
351   - .attr("width", width)
  351 + .style("width", width)
352 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 360 var tag_cloud = svg.selectAll('.tag-cloud-div')
358 361 .data(dataset)
359 362 .enter()
360 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 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 }
... ...