25:["$","title",null,{"children":"d3.forceRadial | apbleonard | Observable"}] 49:[] 29:{"id":"7703b08088115f0c","slug":null,"title":"d3.forceRadial","thumbnail":"b48b9f877f5c7e6af810a25407e444d53019bad494d037055502d747dab3ac8a","access_level":"public","create_time":"$D2025-01-07T11:12:13.530Z","update_time":"$D2025-01-07T11:13:57.763Z","view_time":null,"first_public_time":"$D2025-01-07T11:12:13.530Z","has_unpublished_edits":null,"fork":{"id":"10bf0058d6e8106c","slug":"d3-forceradial","title":"d3.forceRadial","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":1,"starred":false,"owner":{"type":"team","id":"9594bdb0a41d4fb8","login":"apbleonard","name":"apbleonard","avatar_url":"https://avatars-next.observableusercontent.com/987a2e86bd9323d72afb6214d47245aaf690508c0010423a760a4512f074bd59","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":160,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0876235e9614d15f","login":"anthony-leonard","name":"Anthony Leonard","avatar_url":"https://avatars-next.observableusercontent.com/5fcce08d6c3c1aaa5cd72468e34b2b041c278352a4ff84af5a1ccc06cd0b02a2","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0876235e9614d15f","login":"anthony-leonard","name":"Anthony Leonard","avatar_url":"https://avatars-next.observableusercontent.com/5fcce08d6c3c1aaa5cd72468e34b2b041c278352a4ff84af5a1ccc06cd0b02a2","tier":null,"role":"editor"},{"type":"team","id":"9594bdb0a41d4fb8","login":"apbleonard","name":"apbleonard","avatar_url":"https://avatars-next.observableusercontent.com/987a2e86bd9323d72afb6214d47245aaf690508c0010423a760a4512f074bd59","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"height = width*0.6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null