30:T45a,{ const svg = d3.create('svg') .attr('width', width) .attr('height', 40) const gCircles = svg.append('g').attr('transform', 'translate(15, 0)') gCircles.selectAll('circle') .data(Array.from({length: 11})) .join('circle') .attr('r', (_, i) => 2 + i / 2) .attr('cx', (_, i) => (i / 11) * width) .attr('cy', 25) .attr('stroke', 'black') .attr('stroke-width', 0.2) .attr('fill', (_, i) => d3.rgb(d3.interpolateInferno((i / 10)))) const gLabels = svg.append('g').attr('transform', 'translate(15,0)') gLabels.selectAll('text') .data(Array.from({length: 11})) .join('text') .text((_, i) => i === 10 ? `${maxIter}+` : `${Math.round((i / 10) * maxIter)}`) .attr('x', (_, i) => (i / 11) * width) .attr('y', 15) .attr('text-anchor', 'middle') .attr('stroke', 'black') .attr('stroke-width', 0.3) .attr('fill', (_, i) => d3.rgb(d3.interpolateInferno((i / 10)))) return svg.node() }31:Tf9f,chart = { const container = html`

` const svg = d3.select(container).selectAll('svg') const gx = d3.create('svg:g') const gy = d3.create('svg:g') let transformed const zoomed = ({transform, sourceEvent}) => { const zx = transform.rescaleX(x).interpolate(d3.interpolateRound) const zy = transform.rescaleY(y).interpolate(d3.interpolateRound) gx.call(xAxis, zx) gy.call(yAxis, zy) redraw(zx, zy) transformed = transform if(sourceEvent) recursionSteps(sourceEvent) } const zoom = d3.zoom() .scaleExtent([1, Infinity]) .on("zoom", zoomed) const canvas = d3.select(container) .selectAll('canvas') .attr('width', `${w}`) .attr('height', `${h}`) const ctx = canvas.node().getContext('2d') const canvasData = ctx.createImageData(w, h) const redraw = (zx, zy) => { console.log(`zx = ${zx.domain()}`) console.log(`zy = ${zy.domain()}`) let minIter = maxIter const iterCounts = {} Array.from({length: zx.range()[1]}).forEach((_, i) => { Array.from({length: zy.range()[0]}).forEach((_, j) => { const xi = zx.invert(i) const yi = zy.invert(j) const iterCount = mandelbrotCount([xi, yi]) if(iterCount < minIter) minIter = iterCount iterCounts[`${i}:${j}`] = iterCount // const iterRatio = d3.rgb(d3.interpolateInferno(iterCount / maxIter)) // fillPixel(canvasData, w, iterRatio, i, j) }) }) console.log(`iterCounts = ${JSON.stringify(iterCounts)}`) const maxIterCount = d3.max(Object.values(iterCounts)) console.log(`maxIterCount = ${maxIterCount}`) Array.from({length: zx.range()[1]}).forEach((_, i) => { Array.from({length: zy.range()[0]}).forEach((_, j) => { // const xi = zx.invert(i) // const yi = zy.invert(j) // const iterCount = mandelbrotCount([xi, yi]) // if(iterCount < minIter) minIter = iterCount const iterCount = iterCounts[`${i}:${j}`] const iterRatio = d3.rgb(d3.interpolateInferno(iterCount / maxIterCount)) fillPixel(canvasData, w, iterRatio, i, j) }) }) ctx.putImageData(canvasData, 0, 0) } d3.select(container) .call(zoom) .call(zoom.transform, d3.zoomIdentity) svg.attr('viewBox', [0, 0, w, h]) .attr('class', 'axis') .call(zoom) const recursionSteps = (e) => { svg.select('.recursed').remove() const g = svg.append('g') .classed('recursed', true) const point = d3.pointer(e) const zx = transformed.rescaleX(x).interpolate(d3.interpolateRound) const zy = transformed.rescaleY(y).interpolate(d3.interpolateRound) const xi = zx.invert(point[0]) const yi = zy.invert(point[1]) const steps = mandelbrotSteps([xi, yi]) let i = 0 let previous = [zx.invert(point[0]), zy.invert(point[1])] while(i < steps.length) { const step = steps[i] g.append('circle') .attr('r', 2 + i / (maxIter / 10)) .attr('cx', zx(step[0])) .attr('cy', zy(step[1])) .attr('stroke', 'black') .attr('fill', `${d3.interpolateInferno(i / maxIter)}`) if(previous) { g.append('line') .attr('x1', zx(previous[0])) .attr('y1', zy(previous[1])) .attr('x2', zx(step[0])) .attr('y2', zy(step[1])) .attr('stroke', `${d3.interpolateInferno(i / maxIter)}`) } previous = step ++i } } svg.on('mousemove', recursionSteps) svg.append(() => gx.node()) svg.append(() => gy.node()) return container }32:[] 2e:{"title":"Fractal – Mandelbrot set","cells":[{"id":0,"value":"# Fractal – Mandelbrot set","pinned":false,"hidden":false,"mode":"md"},{"id":388,"value":"md`\n## Mandelbrot algorithm\n\nStart at any complex number ${tex`z=a+bi`}

\n\nSquare it and add it to itself.

\n\n${tex`f(z) = z^2 + z`}

\n\nRepeat.

\n\n*Step 0*\n${tex.block`f^0(z) = z`}\n*Step 1*\n${tex.block`f^1(z) = z^2+z`}\n*Step 2*\n${tex.block`f^2(z) = (z^2+z)^2+z`}\n*Step 3*\n${tex.block`f^3(z) = ((z^2+z)^2+z)^2+z`}\n${tex.block`.`}\n${tex.block`.`}\n${tex.block`.`}\n*Step ${maxIter}*\n${tex.block`f^{${maxIter}}(z) = (...)^2 + z`}\n\nIf the resulting number *doesn't* grow unbounded towards ${tex`\\infty`}, it's in the set.\n\n(The convention is to consider the number unbounded if it's more than 2.)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"## Mandelbrot set","pinned":false,"hidden":false,"mode":"md"},{"id":1880,"value":"Each pixel in the interactive image below represents a coordinate on the complex plane. The x-axis is the real axis (the ${tex`a`} value) and the y-axis is the imaginary axis (${tex`b`} value) component.","pinned":false,"hidden":false,"mode":"md"},{"id":430,"value":"The colour represents the number of steps before a complex point \"escapes\".","pinned":false,"hidden":false,"mode":"md"},{"id":1884,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2063,"value":"### Controls\n\nHover over any point in the plot to see the steps.\n\nZoom in and out using mouse/touch gestures.","pinned":false,"hidden":false,"mode":"md"},{"id":1111,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1828,"value":"### Options","pinned":false,"hidden":false,"mode":"md"},{"id":1803,"value":"viewof w = Inputs.select([width / 2, width], {label: \"Size\", format: (_, i) => i === 0 ? \"Half (faster)\" : \"Full\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"md`Resolution/max number of iterations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof maxIter = slider({min: 0, max: 1000, value: 100, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1873,"value":"## Links","pinned":false,"hidden":false,"mode":"md"},{"id":476,"value":"- I saw a version of the recursion circles in a [3blue1brown video](https://www.youtube.com/watch?v=LqbZpur38nw) that he credited to [Numberphile](https://www.numberphile.com/videos/whats-special-about-the-mandelbrot-set).\n\nOther inspirations\n- [Professor Mark McClure's (@mcmcclur) Julia and Mandelbrot sets](https://observablehq.com/@mcmcclur/julia-sets-and-the-mandelbrot-set)\n- [Frank Dumont's (@fjdumont) Mandelbrot](https://observablehq.com/@fjdumont/mandelbrot)","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1844,"value":"#### Constants","pinned":false,"hidden":false,"mode":"md"},{"id":1201,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs"},{"id":1852,"value":"#### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":762,"value":"x = d3.scaleLinear()\n .domain([-2, 2])\n .range([0, w])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"y = d3.scaleLinear()\n .domain([-2, 2])\n .range([h, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"xAxis = (g, x) => \n g.call(d3.axisTop(x).ticks(10))\n .attr('transform', `translate(0, ${h-10})`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"yAxis = (g, y) =>\n g.call(d3.axisRight(y).ticks(10))\n .attr('transform', `translate(${10}, ${0})`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"mandelbrotCount = ([a0, b0]) => {\n let a = a0\n let b = b0\n let iter = 0\n while (a * a + b * b <= 4 && ++iter < maxIter) {\n [a, b] = [a * a - b * b + a0, 2 * a * b + b0]\n }\n return iter\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"mandelbrotSteps = ([a, b]) => {\n const a0 = a\n const b0 = b\n const steps = []\n while (a * a + b * b <= 4 && steps.length < maxIter) {\n [a, b] = [a * a - b * b + a0, 2 * a * b + b0]\n steps.push([a, b])\n }\n return steps\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"// don't use... slow\nfunction mandelbrotCountRecursive([a, b], a0, b0, count) {\n const magnitudeZ = a * a + b * b\n if (magnitudeZ > 4) return count\n if (count + 1 > maxIter) return count\n return mandelbrotCountRecursive([a * a - b * b + a0, 2 * a * b + b0], a0, b0, count + 1)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1533,"value":"fillPixel = (canvasData, width, colour, x, y) => {\n const ix = (x + y * w) * 4\n canvasData.data[ix + 0] = colour.r\n canvasData.data[ix + 1] = colour.g\n canvasData.data[ix + 2] = colour.b\n canvasData.data[ix + 3] = 255\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1837,"value":"#### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}