3c:null 3d:["$","title",null,{"children":"Three Little Circles (revisited) | cs7290 | Observable"}] 43:[] 41:{"id":"fc96926c0e44b912","slug":null,"title":"Three Little Circles (revisited)","thumbnail":"ed5a4046e4ca063841c2311181ba06d176c531d9fa373a980a2c4fcb6f45d636","access_level":"public","create_time":"$D2022-09-19T23:24:21.743Z","update_time":"$D2022-09-19T23:27:16.840Z","view_time":null,"first_public_time":"$D2022-09-19T23:24:21.743Z","has_unpublished_edits":null,"fork":{"id":"db0f9d75c714d5e9","slug":"three-little-circles-revisited","title":"Three Little Circles (revisited)","owner":{"id":"36d6960a2be047c3","login":"cs7290","name":"cs7290"}},"stars":0,"starred":false,"owner":{"type":"team","id":"36d6960a2be047c3","login":"cs7290","name":"cs7290","avatar_url":"https://avatars-next.observableusercontent.com/0ce306b044a65964db703f894de0eb44f22f91f1037f36cf409a87ad03ab4a67","tier":"starter_2024","bio":""},"version":218,"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,"bio":""}],"members":[{"type":"team","id":"36d6960a2be047c3","login":"cs7290","name":"cs7290","avatar_url":"https://avatars-next.observableusercontent.com/0ce306b044a65964db703f894de0eb44f22f91f1037f36cf409a87ad03ab4a67","tier":"starter_2024","role":"editor"},{"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":{"titling":"auto","title":"Three Little Circles (revisited)","cells":[{"id":0,"value":"# Three Little Circles (revisited)\n\n* [Three Little Circles](https://bost.ocks.org/mike/circles/) -- the original\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"first_circles = { return htl.html`` }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"s = {\n var circle = d3.select(first_circles).selectAll(\"circle\") // selection of circles\n .style(\"fill\", \"crimson\") // still the previous update selection\n .data([32, 57, 112, 90]) // update selection of data\n .attr(\"r\", d => Math.sqrt(d)) // still the previous update selection\n .enter().append(\"circle\")\n .style(\"fill\", \"blue\")\n .attr(\"r\", (d) => Math.sqrt(d))\n .attr(\"cy\", 60)\n .attr(\"cx\", (d, i) => i * 100 + 30)\n return circle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"s.enter().append(\"circle\")\n .style(\"fill\", \"blue\")\n .attr(\"r\", d => Math.sqrt(d))\n .attr(\"cy\", 60)\n .attr(\"cx\", (d, i) => i * 100 + 30)\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"s.enter().selectAll(\"circle\")\n .remove()\n .exit()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"my_circles = { return htl.html`` }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"{\n var circle = d3.select(my_circles).selectAll(\"circle\") // selection of circles\n .style(\"fill\", \"crimson\") // still the previous update selection\n .data([32, 57, 112, 90]) // update selection of data\n .attr(\"r\", d => Math.sqrt(d)) // still the previous update selection\n \n return circle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"{\n var svg = d3.select(my_circles)\n var circle = svg.selectAll(\"circle\")\n .data([32, 57, 112, 200, 400])\n var circleEnter = circle.enter().append(\"circle\");\n circleEnter.attr(\"cy\", 60);\n circleEnter.attr(\"cx\", function(d, i){ return i * 100 + 30; });\n circleEnter.attr(\"r\", function(d) { return Math.sqrt(d); });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"{\n var svg = d3.select(my_circles);\n var circle = svg.selectAll(\"circle\")\n .data([32, 57, 112, 293]);\n var circleEnter = circle.enter().append(\"circle\")\n .attr(\"cy\", 60)\n .attr(\"cx\", function(d, i) { return i * 100 + 30; })\n .attr(\"r\", function(d) { return Math.sqrt(d); });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"## Example with Enter and Exit","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"my_circles_3","database":"$undefined"},{"id":196,"value":"viewof color_select_3 = Inputs.select([\"steelblue\", \"crimson\"], {label: \"Color:\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof data_input = Inputs.text({label: \"Data\", value: \"32, 57, 112, 293\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"circle_3 = {\n // Citation: https://stackoverflow.com/questions/16396124/how-to-convert-comma-separated-string-into-numeric-array-in-javascript\n var my_data = data_input.split(\",\").filter(x => x.trim().length && !isNaN(x)).map(Number)\n \n var svg = d3.select(my_circles_3);\n var circle = svg.selectAll(\"circle\").data(my_data);\n circle.style(\"fill\", color_select_3);\n \n // I think adding this line fixed it, but I don't know why...\n circle.attr(\"r\", function(d) { return Math.sqrt(d); });\n\n var circleEnter = circle.enter().append(\"circle\");\n\n circleEnter.attr(\"cy\", 60)\n .attr(\"cx\", function(d, i) { return i * 100 + 30; })\n .attr(\"cy\", 60)\n .attr(\"r\", function(d) { return Math.sqrt(d); });\n\n circle.exit().remove();\n return circle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"circle_3.data()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W43","stdlib":"1"}} 42:"$41:body"