2e:null 2f:["$","title",null,{"children":"Visualizing Order | K Lindberg | Observable"}] 34: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; }35:[] 32:{"id":"13693b50a169a26a","slug":"visualizing-order","title":"Visualizing Order","thumbnail":"41d08ac6f2cca106d1630e74e4d652fb07472dce70278814219e771ef1f49bf3","access_level":"public","create_time":"$D2018-05-20T20:01:40.034Z","update_time":"$D2018-05-20T20:01:40.034Z","view_time":null,"first_public_time":"$D2018-05-20T20:01:44.479Z","has_unpublished_edits":null,"fork":{"id":"87af390f7bb2971d","slug":"visualizing-order","title":"Visualizing Order","owner":{"id":"e2d656a3355b8613","login":"jeffbaumes","name":"Jeff Baumes"}},"stars":1,"starred":false,"owner":{"type":"team","id":"63f5a83fdb550e46","login":"essingen123","name":"K Lindberg","avatar_url":"https://avatars-next.observableusercontent.com/f32fa345052e3b48114aa58703cb58d8886d6a48bd89a61b2892d012f73b0b53","tier":"starter_2024"},"version":316,"publish_version":316,"role":null,"authored":false,"authors":[{"type":"individual","id":"dca00f83ab125ba4","login":"essingen123","name":"K Lindberg","avatar_url":"https://avatars-next.observableusercontent.com/f32fa345052e3b48114aa58703cb58d8886d6a48bd89a61b2892d012f73b0b53","tier":null}],"members":[{"type":"individual","id":"dca00f83ab125ba4","login":"essingen123","name":"K Lindberg","avatar_url":"https://avatars-next.observableusercontent.com/f32fa345052e3b48114aa58703cb58d8886d6a48bd89a61b2892d012f73b0b53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"viewof speed = slider({min: 1, max: 400, step: 1, value: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"viewof size = slider({min: 3, max: 9, step: 1, value: 9})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"viewof replay = html`