3f:null 40:["$","title",null,{"children":"Three Little Circles (revisited) | Greg Howard | Observable"}] 46:[] 44:{"id":"64d19112e30df090","slug":"three-little-circles-revisited","title":"Three Little Circles (revisited)","thumbnail":"cdce4dcbcbce2ac79820e92daea6785b959c8b51f2a0eded8d950240a6164318","access_level":"public","create_time":"$D2023-10-26T17:57:36.215Z","update_time":"$D2023-10-26T18:46:33.709Z","view_time":null,"first_public_time":"$D2023-10-26T18:19:12.772Z","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":"80bccf94bff92090","login":"greghowa","name":"Greg Howard","avatar_url":"https://avatars-next.observableusercontent.com/f3d103de41df25f37f356ba28ac8e7ae004c1a72c99c5d1319a2cbb987b6cd49","tier":"starter_2024","bio":"","following":false},"version":430,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d40020cc212e682","login":"greg-howard","name":"Greg Howard","avatar_url":"https://avatars-next.observableusercontent.com/3ea462a661ef43b9027b4a94800bb0e83da4e70a6682f55cef51ecebb4c6f9b2","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"80bccf94bff92090","login":"greghowa","name":"Greg Howard","avatar_url":"https://avatars-next.observableusercontent.com/f3d103de41df25f37f356ba28ac8e7ae004c1a72c99c5d1319a2cbb987b6cd49","tier":"starter_2024","role":"editor"},{"type":"individual","id":"3d40020cc212e682","login":"greg-howard","name":"Greg Howard","avatar_url":"https://avatars-next.observableusercontent.com/3ea462a661ef43b9027b4a94800bb0e83da4e70a6682f55cef51ecebb4c6f9b2","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 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"three_circles = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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(1000);\n yield cloned_svg;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"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(d, i) { return (Math.sin(Date.now() / 1000) + 1) / 2 * (240 - 2 * 30) + 225 * i + 30; });\n \n await Promises.tick(1);\n yield cloned_svg;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"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(d, i) { return (Math.sin(Date.now() / 1000 + Math.PI * i / 4) + 1) / 2 * (240 - 2 * 30) + 225 * i + 30; });\n \n await Promises.tick(1);\n yield cloned_svg;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"## Binding data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"## Exiting elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"## All together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"