28:null 29:["$","title",null,{"children":"Visualizing Order | Jeff Baumes | Observable"}] 2e: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; }2f:[] 2c:{"id":"87af390f7bb2971d","slug":"visualizing-order","title":"Visualizing Order","thumbnail":"f94450cb6f5bb42b50245a8fda92c7afc415c1f74dd806c4b1ef426d62bc7d80","access_level":"public","create_time":"$D2018-04-11T15:15:14.567Z","update_time":"$D2018-04-13T13:14:15.210Z","view_time":null,"first_public_time":"$D2018-04-11T15:40:23.416Z","has_unpublished_edits":null,"fork":{"id":"70a5472203a8cb89","slug":"visualizing-order","title":"Visualizing Order","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":3,"starred":false,"owner":{"type":"team","id":"e2d656a3355b8613","login":"jeffbaumes","name":"Jeff Baumes","avatar_url":"https://avatars-next.observableusercontent.com/d6a8e1a24059997c2c6b6b13f9e886f9c8b779b2eef91ecb0ea60d93ce69518e","tier":"starter_2024"},"version":316,"publish_version":316,"role":null,"authored":false,"authors":[{"type":"individual","id":"431f4e2db5423400","login":"jeffbaumes","name":"Jeff Baumes","avatar_url":"https://avatars-next.observableusercontent.com/d6a8e1a24059997c2c6b6b13f9e886f9c8b779b2eef91ecb0ea60d93ce69518e","tier":null}],"members":[{"type":"individual","id":"431f4e2db5423400","login":"jeffbaumes","name":"Jeff Baumes","avatar_url":"https://avatars-next.observableusercontent.com/d6a8e1a24059997c2c6b6b13f9e886f9c8b779b2eef91ecb0ea60d93ce69518e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"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":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"viewof replay = html`