31:T440,{ replay; const scale = Math.pow(2, 9-size); const context = DOM.context2d(n*scale, n*scale, 1/scale); const canvas = context.canvas; const image = context.createImageData(n, n); const {data} = image; const array = new Uint32Array(n2); canvas.style.maxWidth = "100%"; canvas.style.imageRendering = "pixelated"; function render(i) { const xy = d2xy(i); const [x, y] = xy; const j = (y * n + x); const {r, g, b} = color(array[i]); data[(j << 2) + 0] = r; data[(j << 2) + 1] = g; data[(j << 2) + 2] = b; data[(j << 2) + 3] = 255; return xy; } for (let i = 0; i < n2; ++i) { render(array[i] = i); } context.putImageData(image, 0, 0); { let i, j = array.length, t, x, y; while (j) { i = Math.random() * j-- | 0; t = array[j], array[j] = array[i], array[i] = t; ([x, y] = render(i)), context.putImageData(image, 0, 0, x, y, 1, 1); ([x, y] = render(j)), context.putImageData(image, 0, 0, x, y, 1, 1); if (j % speed === 0) yield context.canvas; } } return context.canvas; }32:[] 2f:{"title":"Visualizing Order","cells":[{"id":0,"value":"md`# Visualizing Order\n\nThis is just a version of Mike Bostock's [nice animation](https://beta.observablehq.com/@mbostock/visualizing-order) with some added controls.\n\nThis animation, inspired by [Brian Lee’s analysis](http://www.moderndescartes.com/essays/shuffle_viz/) of TensorFlow, visualizes the order of a one-dimensional array of numbers using the space-filling [Hilbert curve](https://en.wikipedia.org/wiki/Hilbert_curve). Initially, the array is in ascending order ${tex`[0, 1, 2, \\ldots]`}. Then, the [Fisher–Yates shuffle](https://en.wikipedia.org/wiki/Fisher–Yates_shuffle) is applied; this unbiased shuffle algorithm starts at the back of the array, swapping each element with a random element in the unswapped region.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"viewof scheme = {\n let schemes = []\n for (let k in d3) {\n if (k.startsWith('interpolate')) {\n schemes.push(k.substring('interpolate'.length));\n }\n }\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"viewof speed = slider({min: 1, max: 400, step: 1, value: 100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"viewof size = slider({min: 3, max: 9, step: 1, value: 9})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"viewof replay = html`