This file takes in a default set of items that were given to users and compares over a finite period of time how that has changed. The new set shows what addional items the users have collectively added as well as what items they have collectively removed from those originally given.
The animation shows this change over a simple mouse click.
The area of the circles is proportional to the number of users that have this item.
Data update reference thanks to: http://bl.ocks.org/mbostock/3808218
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Bubbles</title> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="title"> | |
| <h1>Visualisation of change overtime</h1> | |
| </div> | |
| <script type="text/javascript"> | |
| var w = 500; | |
| var h = 500; | |
| var p = 100; | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var default_set = [ | |
| ["1", r = Math.sqrt(43740) / 10, 40, 45, "coral"], | |
| ["2", r = Math.sqrt(43740) / 10, 60, 160, "purple"], | |
| ["3", r = Math.sqrt(43740) / 10, 300, 430, "cyan"], | |
| ["4", r = Math.sqrt(2 * 43740) / 10, 170, 70, "DarkTurquoise"], | |
| ["5", r = Math.sqrt( 2 * 43740) / 10, 70, 300, "DeepSkyBlue"], | |
| ["6", r = Math.sqrt(43740) / 10, 410, 250, "LawnGreen"], | |
| ["7", r = Math.sqrt(43740) / 10, 200, 380, "MediumVioletRed "], | |
| ["8", r = Math.sqrt(43740) / 10, 350, 140, "navy"], | |
| ["9", r = Math.sqrt(43740) / 10, 320, 320, "tomato"], | |
| ["10", r = Math.sqrt(43740) / 10, 150, 220, "thistle"], | |
| ["11", r = Math.sqrt(43740) / 10, 40, 420, "peru"], | |
| ["12", r = Math.sqrt(43740) / 10, 430, 440, "orchid"], | |
| ["13", r = Math.sqrt(43740) / 10, 300, 45, "gold"], | |
| ["14", r = Math.sqrt(43740) / 10, 270, 230, "yellow" ] | |
| ]; | |
| var newset = [ | |
| ["1", r = Math.sqrt(21636) / 10, 40, 45, "coral"], | |
| ["2", r = Math.sqrt(21615) / 10, 60, 160, "purple"], | |
| ["3", r = Math.sqrt(21293) / 10, 300, 430, "cyan"], | |
| ["4", r = Math.sqrt(42296) / 10, 170, 70, "DarkTurquoise"], | |
| ["5", r = Math.sqrt(42713) / 10, 70, 300, "DeepSkyBlue"], | |
| ["6", r = Math.sqrt(21742) / 10, 390, 250, "LawnGreen"], | |
| ["7", r = Math.sqrt(21574) / 10, 200, 380, "MediumVioletRed "], | |
| ["8", r = Math.sqrt(21166) / 10, 350, 140, "navy"], | |
| ["9", r = Math.sqrt(21994) / 10, 320, 320, "tomato"], | |
| ["10", r = Math.sqrt(21818) / 10, 150, 220, "thistle"], | |
| ["11", r = Math.sqrt(21740) / 10, 40, 420, "peru"], | |
| ["12", r = Math.sqrt(21500) / 10, 430, 440, "orchid"], | |
| ["13", r = Math.sqrt(21742) / 10, 300, 45, "gold"], | |
| ["14", r = Math.sqrt(21554) / 10, 270, 230, "yellow" ], | |
| ["15", r = Math.sqrt(1079) / 10, 440, 40, "plum"], | |
| ["16", r = Math.sqrt(679) / 10, 450, 250, "RoyalBlue"] | |
| ]; | |
| var circles = svg.selectAll("circle") | |
| .data(default_set) | |
| .enter() | |
| .append("circle"); | |
| circles.attr("cx", function(d) { | |
| return d[2]; | |
| }) | |
| .attr("cy", function(d) { | |
| return d[3]; | |
| }) | |
| .attr("r", function(d) { | |
| return d[1]; | |
| }) | |
| .attr("fill", function(d) { | |
| return d[4]; | |
| }); | |
| var text = svg.selectAll("text") | |
| .data(default_set) | |
| .enter() | |
| .append("text"); | |
| text.attr("x", function(d) { | |
| return d[2] - d[1]; | |
| }) | |
| .attr("y", function(d) { | |
| return d[3] - d[1] - 5; | |
| }) | |
| .text(function (d) {return d[0];}) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "10px"); | |
| d3.select("svg") | |
| .on("click", function(){ | |
| //Delete circles so that can create new circles bound to the new data in the | |
| //update function; if we do not delete but instead update and add as advised by | |
| //http://bl.ocks.org/mbostock/3808218 then the process does not happen simultaneously: | |
| //first the existing circles change size and then the new circles get added. | |
| svg.selectAll("circle").remove() | |
| update(newset) | |
| }); | |
| function update(data){ | |
| var new_circles = svg.selectAll("circle") | |
| .data(newset) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d) { | |
| return d[2]; | |
| }) | |
| .attr("cy", function(d) { | |
| return d[3]; | |
| }) | |
| .attr("r", function(d) { | |
| return d[1]; | |
| }) | |
| .attr("fill", function(d) { | |
| return d[4]; | |
| }); | |
| // Join new data with old elements, if any. (In this case we can do this because | |
| //the text from old circles doesn't change unlike their radius) | |
| var text = svg.selectAll("text") | |
| .data(newset); | |
| // Update old elements as needed. | |
| text.enter() | |
| .append("text") | |
| .transition() | |
| .duration(1000) | |
| .ease("linear") | |
| .attr("x", function(d) { | |
| return d[2] - d[1]; | |
| }) | |
| .attr("y", function(d) { | |
| return d[3] - d[1] - 5; | |
| }) | |
| .text(function (d) {return d[0];}) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "10px"); | |
| } | |
| </script> | |
| </body> | |
| </html> |