2f:[] 2d:{"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"},{"id":172,"value":"first_circles = { return htl.html`` }","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":216,"value":"s.enter().selectAll(\"circle\")\n .remove()\n .exit()","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"my_circles = { return htl.html`` }","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":208,"value":"## Example with Enter and Exit","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":196,"value":"viewof color_select_3 = Inputs.select([\"steelblue\", \"crimson\"], {label: \"Color:\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"viewof data_input = Inputs.text({label: \"Data\", value: \"32, 57, 112, 293\"})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":185,"value":"circle_3.data()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}