2f:[] 2d:{"title":"Three Little Circles","cells":[{"id":0,"value":"# Three Little Circles\nNote: run each cell sequentially in order for the program to work as intended\nSource: https://bost.ocks.org/mike/circles/","pinned":true,"hidden":false,"mode":"md"},{"id":5,"value":"\n\n","pinned":true,"hidden":false,"mode":"html"},{"id":7,"value":"{ var circles = d3.selectAll(\"circle\");\n \n circles.style(\"fill\", \"blue\") //styling the color of the circle\n .attr(\"r\", 30) //changing the radii of each circle\n //.attr(\"cx\", function() { return Math.random() * 360; }) //making the circles 'dance' using function of their location\n .data([25, 64, 121]) //binding data to each circle ... fourth element added to demonstrate data joining\n .attr(\"r\", function(d) { return Math.sqrt(d); }) //changing the radius of each circle based upon their associated data\n .attr(\"cx\", function(d, i) { return 720 - ((i+1) * 150); }); //changing the location of each circle using their index in the data array \n // the circles should be in reverse order\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"//demonstration of entering an element \n{\nvar svg = d3.select(\"svg\");\n\nvar circle = svg.selectAll(\"circle\")\n .data([25, 64, 121, 169]);\n\nvar circleEnter = circle.enter().append(\"circle\");\n\ncircleEnter.attr(\"cy\", 60)\n .attr(\"r\", function(d) {return Math.sqrt(d);})\n .attr(\"fill\", \"yellow\")\n .attr(\"cx\", function(d, i) { return 720 - ((i+1) * 150); });\n \n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"//demonstration of exiting an element (in the end we should have two blue circles)\n{\nvar svgR = d3.select(\"svg\");\n \nvar removeCircle = svgR.selectAll(\"circle\").data([25, 64]); //the elements in the data array are those that will be kept \n //the remaining will be removed through exiting\n removeCircle.exit().remove();\n \n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}