31:[] 2f:{"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 by Mike Bostock.\n\nThis notebook reproduces all the examples in the classic [Three Little Circles](https://bost.ocks.org/mike/circles/) by Mike Bostock, which was published in 2014. If you're new to D3 and/or Observable, then it's highly recommended to read them together. Unlike Mike's original, which is a static HTML page, you can run and modify all the code in this notebook.\n","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"Three little circles in an html [cell](https://observablehq.com/@observablehq/adding-cells):","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":233,"value":"Three little circles rendered as a named JavaScript cell:","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"three_circles = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"## Selecting Elements\n\nIn the example above, `three_circles` is an [SVG element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg). The next cell starts by [cloning](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) that SVG, and then uses D3 to restyle the circles as show in the original [Three Little Circles](https://bost.ocks.org/mike/circles/#selecting#).","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"styled_circles = {\n const cloned_svg = three_circles.cloneNode(true);\n \n const circle = d3.select(cloned_svg).selectAll(\"circle\");\n circle.style(\"fill\", \"steelblue\");\n circle.attr(\"r\", 30);\n \n return cloned_svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"You can make the circles dance by manually running the next cell.","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"{\n const cloned_svg = styled_circles.cloneNode(true);\n const circle = d3.select(cloned_svg).selectAll(\"circle\");\n\n circle.attr(\"cx\", function() { return Math.random() * 720; });\n \n return cloned_svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"Since this is an Observable notebook, it's easy to automate things with [Animation Loops](https://observablehq.com/@observablehq/animation-loops).","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"{\n const cloned_svg = styled_circles.cloneNode(true);\n const circle = d3.select(cloned_svg).selectAll(\"circle\");\n\n while (true) {\n circle.attr(\"cx\", function() { return Math.random() * 720; });\n await Promises.tick(2000);\n yield cloned_svg;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"## Binding data","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"circles_with_data = {\n const cloned_svg = styled_circles.cloneNode(true);\n const circle = d3.select(cloned_svg).selectAll(\"circle\");\n\n circle.data([32, 57, 112]);\n circle.attr(\"r\", function(d) { return Math.sqrt(d); });\n\n return cloned_svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"{\n const cloned_svg = circles_with_data.cloneNode(true);\n const circle = d3.select(cloned_svg).selectAll(\"circle\");\n\n circle.attr(\"cx\", function(d, i) { return i * 100 + 30; });\n\n return cloned_svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"## Entering elements\n\nThe next two cells implement Mike Bostock's demonstration of [entering elements](https://bost.ocks.org/mike/circles/#entering):","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"{\n var svg = d3.create(\"svg\")\n .attr(\"width\", 720)\n .attr(\"height\", 120);\n \n var circle = svg.selectAll(\"circle\")\n .data([32, 57, 112, 293]);\n \n var circleEnter = circle.enter().append(\"circle\");\n \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\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"And making things concise with method chaining:","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"four_circles = {\n const svg = d3.create(\"svg\").attr(\"width\", 720).attr(\"height\", 120);\n \n svg.selectAll(\"circle\")\n .data([32, 57, 112, 293])\n .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\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"## Exiting elements","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"two_circles = {\n var cloned_svg = four_circles.cloneNode(true);\n \n var circle = d3.select(cloned_svg).selectAll(\"circle\")\n .data([32, 57]);\n\n circle.exit().remove();\n\n return cloned_svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"## All together","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"{\n var cloned_svg = two_circles.cloneNode(true);\n \n var circle = d3.select(cloned_svg).selectAll(\"circle\")\n .data([32, 57, 293], function(d) { return d; });\n\n 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 \n circle.exit().remove();\n\n return cloned_svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"The 2014 tutorial and all its follow-on tutorials are all still highly relevant and informative. The links are at the bottom of [Three Little Circles](https://bost.ocks.org/mike/circles/#all-together). Check them out.\n\nMike has since added many more capabilities to D3. So don't miss the relatively recent [selection.join](https://observablehq.com/@d3/selection-join), along with the other excellent notebooks in the [Learn D3](https://observablehq.com/@d3/learn-d3) collection.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}