2a:null 2b:["$","title",null,{"children":"Random Group Generator | Zening | Observable"}] 30:T67b,# Random Group Generator A useful user input tool for when users want to randomly generate groups from an array of elements. See [demo](https://twitter.com/ling66795/status/1779023762790465593). ## What it does? It is a custom user input that allow user to form a grouped array. It has an editable text area to view and edit data, a set of components to change the number of groups, a button to regenerate groups by current setting, and a output area to display the grouped tables. Users can provide their own data to group or it will display a empty input area for users to start. Array data in text area is seperated by newline. It will instantly reassign a new series of groups whenever users call it, change the input data, change the number of groups, or click on regenerate button. ## How to import it on observable? ~~~js import {randomGroup} from "@zhiling/synchronized-random-group-generator" ~~~ ## Options it accepts: ~~~js { data: [], // Input data that user want to use to generate groups. // It must be an array. // If user leaves this empty, data area would also leave empty. numGroup: 1, // The number of groups that user want to group. // It must be a integer. // If user leaves this empty, the number of group would start with data.length/2 or 1 dataHeight: 200, // The height of data area outputHeight: 400, // The height of output area outputWidth: 400, // The width of output area dataDisplay: true, // Boolean flag check if user want to display data text area outputDisplay: true, // Boolean flag check if user want to display result groups } ~~~ ## Example:31:T1058,function randomGroup( { data=[], numGroup = 9, dataHeight = 200, outputHeight = 500, outputWidth = 400, dataDisplay = true, outputDisplay = true, } = {} ) { // Check user input if (numGroup > data.length) { numGroup = data.length; } else if (numGroup < 1) { numGroup = 1; } // Check if data is not an array if (!Array.isArray(data)) { throw new Error("Data must be an array."); return; } let groupResult = []; const onDataChange = (event) => { data = event.target.value .split("\n") .map((item) => item.trim()) .filter((item) => item !== ""); numGroup = data.length > 4 ? parseInt(data.length / 4) : 1; setNumGroup(); generate(); }; const onNumGroupChange = (event) => { numGroup = parseInt(event.target.value); if (numGroup > data.length) { numGroup = data.length; } else if (numGroup < 1) { numGroup = 1; } setNumGroup(); generate(); }; const onSliderChange = (event) => { numGroup = parseInt(event.target.value); setNumGroup(); generate(); }; const setNumGroup = function () { numGroupInput.querySelector("#numGroupInput").value = numGroup; sliderInput.querySelector("#numGroupSlider").max = data.length; sliderInput.querySelector("#numGroupSlider").value = numGroup; }; const getGroup = function (__data) { let result = []; // Protect the data by clone a new one const _data = __data.slice(0); if (_data.length === 0) { return result; } const shuffledData = _data.sort(() => Math.random() - 0.5); for (let i = 0; i < numGroup; i++) { result.push([]); } let currentIndex = 0; // Create a slots for remaining elements const remain = Array.from({ length: numGroup }, (_, index) => index); shuffledData.forEach((item, i) => { result[currentIndex].push(item); if ( i + 1 >= parseInt(_data.length / numGroup) * numGroup && _data.length % numGroup != 0 ) { const randomIndex = Math.floor(Math.random() * remain.length); currentIndex = remain[randomIndex]; remain.splice(randomIndex, 1); } else { currentIndex = (currentIndex + 1) % numGroup; } }); return result; }; const generate = function () { groupResult = getGroup(data); renderGroupTable(); target.value = groupResult; target.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; const renderGroupTable = function () { groupTable.style = `display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;`; groupTable.innerHTML = ""; console.log(groupTable) groupResult.forEach((group, index) => { const table = document.createElement("table"); const header = table.createTHead(); const row = header.insertRow(); const cell = row.insertCell(); cell.textContent = `Group ${index + 1}`; group.forEach((member) => { const row = table.insertRow(); const cell = row.insertCell(); cell.textContent = member; }); groupTable.appendChild(table); }); }; const dataArea = htl.html` `; const numGroupInput = htl.html` `; const sliderInput = htl.html` `; const regenerateButton = htl.html` `; let groupTable = htl.html`

`; const target = htl.html`

${dataDisplay ? dataArea : ''}

Number of Groups: ${numGroupInput} ${sliderInput} ${regenerateButton}

${groupTable}

`; target.value = groupResult; generate(); return target; }32:[] 2e:{"id":"0cff44b8ecf71655","slug":"random-group-generator","title":"Random Group Generator","thumbnail":"15b3e5b11c4a5cf8b80c8e11d05cb9fedc2f7468f8d4eaa48b8e2e82ba9d0d7c","access_level":"public","create_time":"$D2025-01-12T11:12:26.527Z","update_time":"$D2025-01-12T11:38:21.338Z","view_time":null,"first_public_time":"$D2025-01-12T11:43:33.636Z","fork":{"id":"c7d5f1d103ddff19","slug":"synchronized-random-group-generator","title":"Random Group Generator","owner":{"id":"36626f71d97ed5b4","login":"zhiling","name":"Zhi Ling"}},"stars":1,"starred":false,"owner":{"type":"team","id":"bab6482ef7c91e6f","login":"zeningqu","name":"Zening","avatar_url":"https://avatars-next.observableusercontent.com/9bb70c46593f31ea5274495a69d2e1d8a65885184046055673b2e16e1612a52a","tier":"starter_2024"},"version":325,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a844db2e26a4fcef","login":"zeningqu","name":"Zening","avatar_url":"https://avatars-next.observableusercontent.com/9bb70c46593f31ea5274495a69d2e1d8a65885184046055673b2e16e1612a52a","tier":null}],"members":[{"type":"individual","id":"a844db2e26a4fcef","login":"zeningqu","name":"Zening","avatar_url":"https://avatars-next.observableusercontent.com/9bb70c46593f31ea5274495a69d2e1d8a65885184046055673b2e16e1612a52a","tier":null,"role":"editor"},{"type":"team","id":"bab6482ef7c91e6f","login":"zeningqu","name":"Zening","avatar_url":"https://avatars-next.observableusercontent.com/9bb70c46593f31ea5274495a69d2e1d8a65885184046055673b2e16e1612a52a","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Random Group Generator","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":131,"value":"viewof newGroup = randomGroup({data:exampleData, numGroup:9, dataHeight:100, outputHeight:2500, outputWidth:600});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"exampleData = new Array(40).fill('Name')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"newGroup","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"## Code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"