2c:null 2d:["$","title",null,{"children":"Bad Shuffle | Duane Millar Barlow | Observable"}] 32:T8b2,So you're reviewing some code (someone else's, obviously ;P) and see a function that attempts to randomly shuffle an array. The results appear to be random permutations of the array, but the implementation is incorrect and doesn't select every permutation of the array with equal probability. The implementation is something like this: ```javascript function badShuffle(array) { for (let i = 0; i < array.length; i++) { const randomIndex = Math.floor(Math.random() * array.length); const temp = array[randomIndex]; array[randomIndex] = array[i]; array[i] = temp; } } ``` The problem is with `randomIndex`. For every `i`, we choose a random index *from the entire array* and swap the elements at those positions. We know that for an array of length `n`, there are `n!` permutations of it. Choosing the random index from the entire array for each element of the array will distribute the outputs randomly across `n`^`n` possibilities. Since `n`^`n` is greater than (and not a multiple of) `n!`, this means that some permutations are repeated more than others and are therefore more likely and this won't produce a truly random permutation of the array. So we've learned that you should instead only swap with the *remaining* elements of the array, that way when an element is placed, it can't be chosen again (i.e. choosing `n` items randomly without replacement). This will produce `n!` possible outputs which matches our expectation for the number of permutations of an array. Satisfied, you make the change and move on: ```javascript function shuffle(array) { for (let i = 0; i < array.length; i++) { const randomIndex = Math.floor((Math.random() - i) * array.length + i); const temp = array[randomIndex]; array[randomIndex] = array[i]; array[i] = temp; } } ``` One day I got curious to see what the actual distribution is for the `badShuffle` implementation. At the top of the notebook is a heatmap of the distribution of where each index starts (y-axis) and where it ends up in the array. Below is the same data but using lines to display the distribution for each starting index (the darkest magenta is the `0th` item and the bright green is the last item).33:[] 30:{"id":"20986c1e38ae2f16","slug":"bad-shuffle","title":"Bad Shuffle","thumbnail":"2cf32e75806cc13bc46ee053834cfc871ae2109f3ff2d74880cd45605b8c0527","access_level":"public","create_time":"$D2021-07-14T02:04:10.236Z","update_time":"$D2021-09-13T14:37:33.337Z","view_time":null,"first_public_time":"$D2021-07-18T05:16:29.467Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"a94d5c23aa0785ad","login":"duaneatat","name":"Duane Millar Barlow","avatar_url":"https://avatars-next.observableusercontent.com/fe811bf60dd25fe5a1a2c15f5477887534931530c69d3837041e9d1df5ea53bf","tier":"starter_2024","bio":"Former Engineer @ObservableHQ"},"version":364,"publish_version":364,"role":null,"authored":false,"authors":[{"type":"individual","id":"83af954252b77055","login":"duaneatat","name":"Duane Millar Barlow","avatar_url":"https://avatars-next.observableusercontent.com/fe811bf60dd25fe5a1a2c15f5477887534931530c69d3837041e9d1df5ea53bf","tier":null,"bio":"Former Engineer @ObservableHQ"}],"members":[{"type":"individual","id":"83af954252b77055","login":"duaneatat","name":"Duane Millar Barlow","avatar_url":"https://avatars-next.observableusercontent.com/fe811bf60dd25fe5a1a2c15f5477887534931530c69d3837041e9d1df5ea53bf","tier":null,"role":"editor"}],"comments":[{"id":"65279ce23515aaa6","reply_to_id":null,"content":"These sliders are missing {step: 1}","create_time":"$D2021-07-18T13:36:24.119Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"1ff774f422e29ce4","reply_to_id":"65279ce23515aaa6","content":"ty!","create_time":"$D2021-07-18T13:48:30.957Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"83af954252b77055","login":"duaneatat","name":"Duane Millar Barlow","avatar_url":"https://avatars-next.observableusercontent.com/fe811bf60dd25fe5a1a2c15f5477887534931530c69d3837041e9d1df5ea53bf","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bad Shuffle","cells":[{"id":0,"value":"# Bad Shuffle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"Plot.plot({\n width: Math.min(800, width),\n height: 500,\n marginLeft: 20,\n marginRight: 0,\n marginTop: 0,\n color: {\n // domain: [0, 80000],\n scheme: \"blues\"\n },\n marks: [\n Plot.cell(results, {\n sort: \"original\",\n x: (d) => d.i,\n y: (d) => d.original,\n fill: \"frequency\",\n inset: -3\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"*Array length is ${length}. The distribution of where each starting index (y-axis) most often ends up after calling `badShuffle(array)`. ${Number(n).toLocaleString()} trials. Darker blue is more frequent.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"Plot.plot({\n width: Math.min(800, width),\n marginLeft: 60,\n marginRight: 40,\n color: {\n scheme: \"warm\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(results, {\n sort: \"i\",\n x: \"i\",\n y: \"frequency\",\n stroke: \"original\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof n = Inputs.range([1e6, 1e7], {\n value: width < 500 ? 2e6 : 5e6,\n step: 1,\n label: \"Number of trials\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof length = Inputs.range([1, 100], {\n value: width < 500 ? 20 : 30,\n step: 1,\n label: \"Array length\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"For every position *i* of the array (aside from 0) the most likely position an element ends up in is the position just before it, *i - 1*. The very first element in the array is just as likely to to end up in any position, but the elements after that are significantly more likely to end up just to the left of where they started.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"## What is the intuition behind this behavior?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"Please fork this notebook and help illuminate any of the following:\n\n- Why is the most likely position just to the left of the starting position?\n- Why does the max of each distribution together trace this nice curve?\n- Any other interesting observations?\n\nThank you!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"## Related\n\nJust encountered Mike Bostock's similar matrix diagram that shows similar results (you'll need to select \"naïve swap (i ↦ random)\" from the dropdown): https://bost.ocks.org/mike/shuffle/compare.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"badShuffle = (array) => {\n const copy = [...array];\n for (let i = 0; i < copy.length; i++) {\n const randomIndex = Math.floor(Math.random() * copy.length);\n const temp = copy[randomIndex];\n copy[randomIndex] = copy[i];\n copy[i] = temp;\n }\n return copy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"results = {\n const array = Array.from({ length: length }, (_, i) => i);\n const counts = array.map(() => Object.fromEntries(array.map((i) => [i, 0])));\n for (let i = 0; i < n; i++) {\n badShuffle(array).forEach((d, i) => counts[d][i]++);\n }\n\n return Object.entries(counts).flatMap(([original, counts]) =>\n Object.entries(counts).map(([i, count]) => ({\n i: +i,\n frequency: count,\n original: +original\n }))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"