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 }