2c:null 2d:["$","title",null,{"children":"D3.js spiral growth explorer, fibonacci in nature | Justin Philpott | Observable"}] 32:T44d,{ const SVG = d3.select(DOM.svg(outerWidth, outerHeight)); let penX = 200; let penY = 0; let startAngle = 0; let growthAngle = 0; let growthDist = 0; let svg = null; let d2r = Math.PI/180; let centerX = width/2; let centerY = outerHeight/2; // loop through petals numFlorets times for (var f = 1; f < numFlorets; f++) { // add the deltaAngle to the existing angle if(animate) { growthAngle += incrementAngle; } else { growthAngle += deltaAngle; } // growth dist will give x and Y with simple trig growthDist = growth * f; // establish point x and y penX = Math.cos(growthAngle*d2r) * centerX * growthDist; penY = Math.sin(growthAngle*d2r) * centerX * growthDist; // draw point scaled accordingly svg = SVG.append("circle") .attr('r', 1+growthDist*8) .attr('cx', d => penX + centerX) .attr('cy', d => penY + centerY) .attr('fill', '#ff8800'); } // Return canvas as explained above - this is Observable specific, not required outside of Observable return SVG.node(); }33:T75f,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = display ? display(value) : format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } return form; }34:[] 30:{"id":"7b2317749584c092","slug":"d3-js-spiral-growth-explorer-fibonacci-in-nature","title":"D3.js spiral growth explorer, fibonacci in nature","thumbnail":"137d322c7e63c8cede02f73f0fd89777aa363b525dcc79c3ef8413046842f42f","access_level":"public","create_time":"$D2018-11-15T19:35:37.061Z","update_time":"$D2021-10-18T10:58:44.344Z","view_time":null,"first_public_time":"$D2018-11-17T20:34:50.606Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"14296e1283da31b7","login":"justinphilpott","name":"Justin Philpott","avatar_url":"https://avatars-next.observableusercontent.com/2f37dc075540e52deca52cb180a1632c948d955da12cd934ac64b3052dfaae22","tier":"starter_2024"},"version":812,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c1a7167c4233c17b","login":"justinphilpott","name":"Justin Philpott","avatar_url":"https://avatars-next.observableusercontent.com/2f37dc075540e52deca52cb180a1632c948d955da12cd934ac64b3052dfaae22","tier":null}],"members":[{"type":"individual","id":"c1a7167c4233c17b","login":"justinphilpott","name":"Justin Philpott","avatar_url":"https://avatars-next.observableusercontent.com/2f37dc075540e52deca52cb180a1632c948d955da12cd934ac64b3052dfaae22","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"e4bf026338b6bbc0","slug":"science-in-nature","title":"Science in Nature","owner":{"id":"14296e1283da31b7","login":"justinphilpott","name":"Justin Philpott"}},"type":"notebook","body":{"title":"D3.js spiral growth explorer, fibonacci in nature","cells":[{"id":0,"value":"md`# D3.js spiral growth explorer, fibonacci in nature`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":555,"value":"viewof animationSwitch = button({value: \"Animate on/off\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"deltaAngle >= 137 && deltaAngle <= 138 ? deltaAngle == 137.508 ? md`## You got it!\n...almost... in fact you are only close, as the golden angle is an infinite series. See https://en.wikipedia.org/wiki/Golden_angle for a deep dive!` : md`### You are getting close to the golden angle, now use the numeric input to search more precisely...` : md`Turn animation off and use the first slider to search for the \"golden angle\", watch the pattern below, at some point it will start to look like a sunflower...`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":445,"value":"angle = {\n const input = html``;\n input.oninput = () => viewof deltaAngle.value = input.valueAsNumber;\n const update = () => input.value = viewof deltaAngle.value;\n viewof deltaAngle.addEventListener(\"input\", update);\n invalidation.then(() => viewof deltaAngle.removeEventListener(\"input\", update));\n return update(), input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"incrementAngle ? incrementAngle : bind(html``, viewof deltaAngle)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":681,"value":"viewof animationAngleIncrement = slider({\n min: 0.01,\n max: 0.1,\n step: 0.0001,\n value: 0.01,\n description: \"How fast to animate\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"viewof numFlorets = slider({\n value: 125,\n min: 1,\n max: 4096,\n precision: 1,\n step: 1,\n description: \"How many florets to grow (as you grow more, scale back the growth factor to keep in view)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"viewof growth = slider({\n min: 0.0002,\n max: 0.02,\n precision: 5,\n step: 0.0001,\n value: 0.005,\n description: \"This acts like a zoom\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":614,"value":"incrementAngle = {\n animationSwitch;\n return range(0,360) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":599,"value":"function* range(start, stop) {\n start = Math.floor(start);\n stop = Math.ceil(stop);\n while (start < stop && animate) {\n yield Promises.delay(10, start += animationAngleIncrement);\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"animate = {\n animationSwitch;\n return !this;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"viewof deltaAngle = new View(132)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"outerHeight = outerWidth /1.5\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"outerWidth = 972","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, getValue, format, display, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\", title, description, submit, format, display,\n attributes: {min, max, step, value},\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":416,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"d3format = require(\"d3-format\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"class View {\n constructor(value) {\n Object.defineProperties(this, {\n _list: {value: [], writable: true},\n _value: {value, writable: true}\n });\n }\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent({type: \"input\", value});\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"function bind(input, view) {\n input.oninput = () => view.value = input.valueAsNumber;\n const update = () => input.value = view.value;\n const dispose = () => view.removeEventListener(\"input\", update);\n view.addEventListener(\"input\", update);\n return update(), Generators.disposable(input, dispose);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":557,"value":"function button(config = {}) {\n let {value, title, description, disabled} = config;\n if (typeof config == \"string\") value = config;\n if (!value) value = \"Ok\";\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"