2d:null 2e:["$","title",null,{"children":"Three Little Circles (revisited) | cs7290 | Observable"}] 33:[] 31:{"id":"db0f9d75c714d5e9","slug":"three-little-circles-revisited","title":"Three Little Circles (revisited)","thumbnail":"9a626b7866b728a98783f33ccf70196ba46cc471ed5897fd9125d83258e8b032","access_level":"public","create_time":"$D2022-09-13T00:18:49.811Z","update_time":"$D2023-01-01T16:18:15.406Z","view_time":null,"first_public_time":"$D2022-09-13T00:18:49.811Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"36d6960a2be047c3","login":"cs7290","name":"cs7290","avatar_url":"https://avatars-next.observableusercontent.com/0ce306b044a65964db703f894de0eb44f22f91f1037f36cf409a87ad03ab4a67","tier":"starter_2024"},"version":392,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e151b61ef71fc904","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":null}],"members":[{"type":"individual","id":"e151b61ef71fc904","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":null,"role":"editor"},{"type":"team","id":"36d6960a2be047c3","login":"cs7290","name":"cs7290","avatar_url":"https://avatars-next.observableusercontent.com/0ce306b044a65964db703f894de0eb44f22f91f1037f36cf409a87ad03ab4a67","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"Three little circles in an html [cell](https://observablehq.com/@observablehq/adding-cells):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"Three little circles rendered as a named JavaScript cell:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"three_circles = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"You can make the circles dance by manually running the next cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"## Binding data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"And making things concise with method chaining:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"## Exiting elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"## All together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"