28:null 29:["$","title",null,{"children":"More with Groups | Charles Redmond | Observable"}] 2e:[] 2c:{"id":"96144985a45bce68","slug":"more-with-groups","title":"More with Groups","thumbnail":null,"access_level":"public","create_time":"$D2020-10-19T15:04:09.461Z","update_time":"$D2020-11-01T14:32:07.110Z","view_time":null,"first_public_time":"$D2020-10-19T16:24:00.850Z","has_unpublished_edits":null,"fork":{"id":"d0bf757895a9a3f9","slug":"template","title":"Template","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"stars":1,"starred":false,"owner":{"type":"team","id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":"starter_2024"},"version":161,"publish_version":161,"role":null,"authored":false,"authors":[{"type":"individual","id":"37a987477e8b6db3","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":null}],"members":[{"type":"individual","id":"37a987477e8b6db3","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"83911aebcace17a1","slug":"fall20ds","title":"Fall20DS","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"type":"notebook","body":{"title":"More with Groups","cells":[{"id":0,"value":"md`# More with Groups`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"svg = {\n const svg = html``\n const container = d3.select(svg)\n\n for(let i = 0; i < 50; i = i + 1){\n const x = math.randomInt(0,600)\n const y = math.randomInt(0,300)\n const s = math.random(0,.5)\n makeFace(container,x,y,s)\n }\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"makeFace = function(container,x,y,s){\n const outer = container.append(\"g\").attr(\"transform\",`translate(${x},${y})`)\n const inner = outer.append(\"g\").attr(\"transform\",`scale(${s})`)\n \n inner.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"fill\",\"yellow\")\n .attr(\"stroke\",\"black\")\n \n inner.append(\"circle\")\n .attr(\"r\",20)\n .attr(\"cx\",0)\n .attr(\"fill\",\"tomato\")\n .attr(\"stroke\",\"black\")\n \n inner.append(\"circle\")\n .attr(\"r\",15)\n .attr(\"fill\",\"skyblue\")\n .attr(\"stroke\",\"black\")\n .attr(\"cx\",-50)\n .attr(\"cy\",-40)\n \n inner.append(\"circle\")\n .attr(\"r\",15)\n .attr(\"fill\",\"skyblue\")\n .attr(\"stroke\",\"black\")\n .attr(\"cx\",50)\n .attr(\"cy\",-40)\n \n inner.append(\"line\")\n .attr(\"stroke\",\"black\")\n .attr(\"x1\",-80)\n .attr(\"y1\",50)\n .attr(\"x2\",80)\n .attr(\"y2\",50)\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`\n

CSS

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"math = require('mathjs@6.2.1/dist/math.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"