2b:null 2c:["$","title",null,{"children":"Three Little Circles | Derek Muse | Observable"}] 31:[] 2f:{"id":"6b6a0c9a2a8a8745","slug":null,"title":"Three Little Circles","thumbnail":"9e6d56999669e1f0d130bca6335aa8a4294caeb72350e090e7613eee0624fe6f","access_level":"public","create_time":"$D2022-10-19T00:18:42.938Z","update_time":"$D2022-12-02T18:28:20.741Z","view_time":null,"first_public_time":"$D2022-11-07T19:20:21.562Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7948d1ff51ccf0d3","login":"derekgmuse","name":"Derek Muse","avatar_url":"https://avatars-next.observableusercontent.com/3992559c39fedef61719f9d04ab21c039c094c3096f06efa4c6a5e0a1c57d5e2","tier":"starter_2024"},"version":91,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"08e2c13dd559ef79","login":"derekgmuse","name":"Derek Muse","avatar_url":"https://avatars-next.observableusercontent.com/3992559c39fedef61719f9d04ab21c039c094c3096f06efa4c6a5e0a1c57d5e2","tier":null}],"members":[{"type":"individual","id":"08e2c13dd559ef79","login":"derekgmuse","name":"Derek Muse","avatar_url":"https://avatars-next.observableusercontent.com/3992559c39fedef61719f9d04ab21c039c094c3096f06efa4c6a5e0a1c57d5e2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"