diff --git a/analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc b/analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc index 9ac09a5..51f9774 100644 Binary files a/analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc and b/analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc differ diff --git a/analytics/static/analytics/general.css b/analytics/static/analytics/general.css index 35d1ca7..e190dc9 100644 --- a/analytics/static/analytics/general.css +++ b/analytics/static/analytics/general.css @@ -34,10 +34,12 @@ border-radius: 10px; color: #ffffff; } -div.tag-cloud { +.tag-cloud { width: 10%; border-radius: 25px; - color: #ffffff; - background-color: #52b7bd; } + color: #ffffff; } + +.tag-name { + color: #ffffff; } /*# sourceMappingURL=general.css.map */ diff --git a/analytics/static/analytics/general.css.map b/analytics/static/analytics/general.css.map index b659a69..5a4cf80 100644 --- a/analytics/static/analytics/general.css.map +++ b/analytics/static/analytics/general.css.map @@ -1,6 +1,6 @@ { "version": 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", +"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", "sources": ["general.sass"], "names": [], "file": "general.css" diff --git a/analytics/static/analytics/general.sass b/analytics/static/analytics/general.sass index 7b1c963..8a25dae 100644 --- a/analytics/static/analytics/general.sass +++ b/analytics/static/analytics/general.sass @@ -41,8 +41,11 @@ border-radius: 10px color: #ffffff -div.tag-cloud +.tag-cloud width: 10% border-radius: 25px color: #ffffff - background-color: #52b7bd \ No newline at end of file + + +.tag-name + color: #ffffff \ No newline at end of file diff --git a/analytics/static/analytics/js/charts.js b/analytics/static/analytics/js/charts.js index 17ad291..1a1f866 100644 --- a/analytics/static/analytics/js/charts.js +++ b/analytics/static/analytics/js/charts.js @@ -318,25 +318,25 @@ var charts = { var height = 300; function min(){ - min = 100000000000; + minimum = 100000000000; for(var i = 0; i < dataset.length; i++){ if (dataset[i]['count'] < min){ - min = dataset[i]['count']; + minimum = dataset[i]['count']; } } - return min + return minimum } function max(){ - max = 0; + maximum = 0; for(var i = 0; i < dataset.length; i++){ if (dataset[i]['count'] > max){ - max = dataset[i]['count']; + maximum = dataset[i]['count']; } } - return max + return maximum } console.log(dataset); @@ -348,26 +348,65 @@ var charts = { .style("background","#ddf8e7") .append('g') .attr("transform", "translate(0,0)") - .attr("width", width) + .style("width", width) .attr("height", height); + var color = d3.scaleLinear() + .domain([min(), max()]) + .range(['#bdbdbd','#52b7bd', '#149e91']); - var radiusScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]); + var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]); var tag_cloud = svg.selectAll('.tag-cloud-div') .data(dataset) .enter() .append('g') - .attr("class", "data-container"); + .attr("class", "data-container") + .attr("width", 100) + .attr("height", 50); - var tag_divs = tag_cloud - .append('div') + var tag_rects = tag_cloud + .append('rect') .attr('class', 'tag-cloud') - .attr('text', function(d){ - return d['name']; - }); - + .attr("width", function(d){ + return xScale(d['count']); + }) + .attr("height", 25) + .attr("fill", function(d, i) { + return color(xScale[d["count"]]); + }) + .attr("rx", 20) + .attr("ry", 20); + + var tag_texts = tag_cloud + .append("text") + .text(function(d){ + return d['name']; + }) + .attr("x", 15) + .attr("y", 20) + .attr("class", "tag-name") + .attr("fill", "#ffffff"); + + + var simulation = d3.forceSimulation() + .force("x", d3.forceX(width/2).strength(0.05)) + .force("y", d3.forceY(height/2).strength(0.05)) + .force("collide", d3.forceCollide(function(d){ + return 25; + })); + + //simulation + simulation.nodes(dataset) + .on('tick', ticked); //so all data points are attached to it + + function ticked(){ + tag_cloud.attr("transform", function(d){ + return "translate(" + d.x + "," + d.y + ")"; + }) + } + }); } } -- libgit2 0.21.2