2d:null 2e:["$","title",null,{"children":"d3.forceRadial | John Alexis Guerra Gómez | Observable"}] 33:[] 31:{"id":"10bf0058d6e8106c","slug":"d3-forceradial","title":"d3.forceRadial","thumbnail":"24f33fcf28f2a31f3e02dacf7c22107d25d55f9728a5b620853da5b51d1f78d8","access_level":"public","create_time":"$D2019-05-25T14:08:18.683Z","update_time":"$D2019-05-25T16:40:49.460Z","view_time":null,"first_public_time":"$D2019-05-25T15:37:57.257Z","has_unpublished_edits":null,"fork":false,"stars":19,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":158,"publish_version":158,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":null,"type":"notebook","body":{"title":"d3.forceRadial","cells":[{"id":0,"value":"md`# d3.forceRadial\n\nA commonly overlook [d3 force](https://github.com/d3/d3-force#forceRadial) that distributes nodes in concentric circles\n\n\n\n\n\n\n\n\n\n

${viewof x}	${viewof y}
${viewof r1}	${viewof r2}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"{\n const svg = html`\n `;\n \n // https://bl.ocks.org/mbostock/cd98bf52e9067e26945edd95e8cf6ef9\n const node = d3.select(svg)\n .selectAll()\n .data(nodes)\n .join(\"circle\")\n .attr(\"r\", 2.5)\n .attr(\"cx\", x)\n .attr(\"cy\", y)\n .attr(\"fill\", d => d.type === \"a\" ? \"brown\" : \"steelblue\")\n\n const simulation = d3.forceSimulation(nodes)\n .force(\"charge\", d3.forceCollide().radius(5).iterations(2))\n .force(\"r\", d3.forceRadial(d => d.type === \"a\" ? r1 : r2, x, y).strength(0.1))\n .on(\"tick\", ticked)\n .alphaTarget(0.1);\n\n function ticked() {\n node.attr(\"cx\", d => d.x).attr(\"cy\", d => d.y);\n }\n\n ticked();\n invalidation.then(() => simulation.stop());\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"shuffle = {\n for (let n of nodes) {\n n.x = Math.random()*width;\n n.y = Math.random()*width;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"height = width*0.6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof x = slider({\n min:0,\n max:width,\n value:width/2,\n title: \"cx\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"viewof y = slider({\n min:0,\n max:height,\n value:height/2,\n title: \"cy\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof r1 = slider({\n min:0,\n max:width,\n value:100,\n title: \"Red radius\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"viewof r2 = slider({\n min:0,\n max:width,\n value:200,\n title: \"Blue radius\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"nodes = [].concat(\n d3.range(200).map(function() { return {type: \"a\"}; }),\n d3.range(360).map(function() { return {type: \"b\"}; })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"