3e:null 3f:["$","title",null,{"children":"Visualizing Order | Mark Woodall | Observable"}] 45:T406,{ replay; const context = DOM.context2d(n, n, 1); 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 % 10 === 0) yield context.canvas; } } return context.canvas; }46:[] 43:{"id":"dfe91b968d1cfed3","slug":null,"title":"Visualizing Order","thumbnail":"b2cd720695f15a1b1e247b20b5e419cd7f8cf0c2b5fc4b755a08e49f10719773","access_level":"public","create_time":"$D2023-04-02T12:10:16.909Z","update_time":"$D2023-04-14T03:01:30.949Z","view_time":null,"first_public_time":"$D2023-04-02T12:10:16.909Z","has_unpublished_edits":null,"fork":{"id":"70a5472203a8cb89","slug":"visualizing-order","title":"Visualizing Order","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bb311203f4edb9ed","login":"llad","name":"Mark Woodall","avatar_url":"https://avatars-next.observableusercontent.com/afd150a847132b625d6e8f8321c9646fd1621cf853528dd7aaabb34db5c5381f","tier":"starter_2024","bio":"","following":false},"version":231,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"19f9c83addf7d1c0","login":"llad","name":"Mark Woodall","avatar_url":"https://avatars-next.observableusercontent.com/afd150a847132b625d6e8f8321c9646fd1621cf853528dd7aaabb34db5c5381f","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"19f9c83addf7d1c0","login":"llad","name":"Mark Woodall","avatar_url":"https://avatars-next.observableusercontent.com/afd150a847132b625d6e8f8321c9646fd1621cf853528dd7aaabb34db5c5381f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualizing Order","cells":[{"id":0,"value":"md`# Visualizing Order\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"viewof replay = html`