3f:null 40:["$","title",null,{"children":"Generative circle clusters | Eric Yancey Dauenhauer | Observable"}] 46:T49f,svg` `47:[] 44:{"id":"8d63eb9dd393630a","slug":"generative-circle-clusters","title":"Generative circle clusters","thumbnail":"3e5ea6023b261160d24a99017f34fb2553edecce4a26d75d006ae8bcd3c5fd15","access_level":"public","create_time":"$D2020-03-13T14:48:31.110Z","update_time":"$D2020-03-13T23:44:56.325Z","view_time":null,"first_public_time":"$D2020-03-13T23:47:36.253Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"0859e816ebbc8abe","login":"ericyd","name":"Eric Yancey Dauenhauer","avatar_url":"https://avatars-next.observableusercontent.com/78be3a44c98f42079131223ddec6a977e2d03c38d723ca5b06c06fd164b0c2a1","tier":"starter_2024","bio":"Just a human with a passion for all things JavaScript, web accessibility, and well-tested software.","following":false},"version":272,"publish_version":272,"role":null,"authored":false,"authors":[{"type":"individual","id":"79ba5b95753ac93a","login":"ericyd","name":"Eric Yancey Dauenhauer","avatar_url":"https://avatars-next.observableusercontent.com/78be3a44c98f42079131223ddec6a977e2d03c38d723ca5b06c06fd164b0c2a1","tier":null,"bio":"Just a human with a passion for all things JavaScript, web accessibility, and well-tested software.","following":false}],"members":[{"type":"individual","id":"79ba5b95753ac93a","login":"ericyd","name":"Eric Yancey Dauenhauer","avatar_url":"https://avatars-next.observableusercontent.com/78be3a44c98f42079131223ddec6a977e2d03c38d723ca5b06c06fd164b0c2a1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Generative circle clusters","cells":[{"id":0,"value":"md`\n# Generative circle clusters\n\nSome experiments with generting SVG circles in pseudo-random arrangements and sizes\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`\n## \"Glass\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"createRandomTouchingCircle = (a, angle = randomFloat(0, 2 * Math.PI), maxRadius, attrs = {}) => {\n const length = randomFloat(a.r + 0.1, a.r + maxRadius)\n const cx = Math.sin(angle) * length + a.cx\n const cy = Math.cos(angle) * length + a.cy\n const r = length - a.r\n return new Circle(cx, cy, r, attrs)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"glassAttrs = () => ({ fill: \"url('#bubbleGrad')\", stroke: \"#999\", \"stroke-width\": \"0.1px\", opacity: randomFloat(1, 1) })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`\n## \"Neon nights\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"honeycombAttrs = () => ({ fill: d3.interpolateLab(\"#d61fff\", \"#ff961f\")(Math.random()), stroke: \"none\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"createHoneycombCircle = (a, angle = randomFloat(0, 2 * Math.PI), maxRadius, attrs = {}) => {\n const length = 4\n const cx = Math.sin(angle) * length + a.cx\n const cy = Math.cos(angle) * length + a.cy\n const r = a.r\n \n // quasi-randomly assign \"invisible\", \"glow\", or \"blur\" to circles\n const attributes = {}\n if (Math.random() < 0.55) {\n attributes.fill = \"none\"\n attributes.stroke = \"none\"\n } else if (Math.random() < 0.2) {\n attributes.filter = \"url('#glow')\"\n } else {\n attributes.filter = \"url('#blur')\"\n attributes.opacity = randomFloat(0.5, 1)\n }\n \n return new Circle(cx, cy, r, Object.assign({}, attrs, attributes))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`\n## \"Grandfather clock\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"clockAttrs = () => ({ fill: randomColor(), opacity: randomFloat(0.5, 1) })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`\n## Classes\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"class CircleCluster {\n constructor(numberOfChildren, maxNodes, maxRadius, strategy, getAttrs = () => {}) {\n this.nodes = []\n this.numberOfChildren = numberOfChildren\n this.getAttrs = getAttrs\n this.maxNodes = maxNodes\n this.maxRadius = maxRadius\n this.strategy = strategy\n }\n \n addNode(node) {\n this.nodes.push(node)\n return this\n }\n \n addCircles() {\n for (let idx = 0; idx < this.maxNodes; idx++) {\n if (this.nodes[idx] === undefined || this.nodes[idx] === null) continue\n for (let i = 0; i <= this.numberOfChildren; i++) {\n const angle = 2 * Math.PI / this.numberOfChildren * i\n const circle = this.strategy.call(this, this.nodes[idx], angle, this.maxRadius, this.getAttrs())\n if (any(c => c.hasIntersection(circle), this.nodes)) continue\n this.addNode(circle)\n }\n }\n return this\n }\n \n draw() {\n return this.nodes.map(n => n.draw()).join('')\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`\n## Properties\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// height is the height of the canvas\n// width is an Observable built-in, in this case used for the width of the canvas\nheight = width * 9 / 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// w is the width of the viewBox\nw = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// h is the height of the viewBox\nh = w * 9 / 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// default aspect ratio for viewBoxed SVGs\n// reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio\naspectRatio = \"xMidYMid meet\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// maximum circle radius\ndefaultMaxRadius = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// hardcode a basic palette.\n// For a more interesting dynamic option, consider\n// import { getRandomPalette, displayPalettes } from '@makio135/give-me-colors'\n// palette = getRandomPalette()\n// or one of the great palletes from d3\n// https://observablehq.com/@d3/working-with-color\npalette = [\"#ebd7c3\", \"#e7b67b\", \"#d17028\", \"#809181\", \"#313c3e\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"randomColor = () => palette[randomInt(0, palette.length - 1)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { Circle, randomFloat, randomInt, any } from '@ericyd/svg-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"