30:T57c,divideToGroups = (total, items, isPartitative = false) => { const sum = Array.isArray(items) ? items.reduce((out, [key, value]) => (out += value), 0) : 0; const divider = Array.isArray(items) ? sum : items; const { groupCount, groupSize, remainder } = divide( total, divider, isPartitative ); const itemsValues = Array.isArray(items) ? toParts( items.map(([key, value]) => [key, value * (total / sum)]), groupSize, remainder ) : []; return range(groupCount) .map((group, i) => ({ name: i + 1, count: groupSize, parts: Array.isArray(items) ? isPartitative ? itemsValues[i] //items.map(([key, value]) => [key, value * (groupSize / sum)]) : items : [[i + 1, groupSize]] })) .filter((group) => group.count > 0) .concat( remainder > 0 ? [ { name: isPartitative ? "rem. group" : "remainder", count: remainder, parts: Array.isArray(items) ? isPartitative ? itemsValues[Math.floor(groupCount)] : items.map(([key, value]) => [ key, value * (remainder / sum) ]) : [[isPartitative ? "rem. group" : "remainder", remainder]] } ] : [] ); }31:[{"id":"3917899b7468c526a5bfe18f94d3cf1cfedf7a7c808976870a866d71d4a322af778ffb34fd3c06783be80ff60b10be3279d5dbc82f07a7201f4978130bc8edd6","href":"https://static.observableusercontent.com/files/3917899b7468c526a5bfe18f94d3cf1cfedf7a7c808976870a866d71d4a322af778ffb34fd3c06783be80ff60b10be3279d5dbc82f07a7201f4978130bc8edd6","name":"activity.svg","type":"image/svg+xml","lastModified":1650100276811.135,"size":282},{"id":"95aa7ca5356bd5232fbeee0e3a42bd2d85d26d3d8bd3228a028301276f82da6e84261dfb762b8d728dd2e49e0899b3bcc2109806e01342feb66e5b7621b1e6d8","href":"https://static.observableusercontent.com/files/95aa7ca5356bd5232fbeee0e3a42bd2d85d26d3d8bd3228a028301276f82da6e84261dfb762b8d728dd2e49e0899b3bcc2109806e01342feb66e5b7621b1e6d8","name":"yin-yang.svg","type":"image/svg+xml","lastModified":1650100478348.285,"size":390}] 2e:{"title":"Divide into groups","cells":[{"id":0,"value":"# Divide into groups","pinned":false,"hidden":false,"mode":"md"},{"id":1012,"value":"viewof dividend = Inputs.range([0, 1000], {label: \"Divident\", value: 104, step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"viewof divisor = Inputs.range([0, 100], {label: \"Divisor\", value: 8, step:0.1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"### Quotative division (step by step substraction)\n\n*I know how many (or how much) in each group*. **How many groups are there?**","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"{\n const { groupCount, remainder } = divide(dividend, divisor);\n\n return `${dividend} devided into groups of ${divisor} gives a result of ${formatNumber(\n Math.floor(groupCount)\n )} groups${\n remainder != 0 ? ` with remainder ${formatNumber(remainder)}` : \"\"\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4203,"value":"renderImagePlot(divideToGroups(dividend, divisor), { src: icons.y })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2881,"value":"viewof groupIndex = Scrubber(_.range(0, Math.ceil(dividend/divisor) + 1), {delay: 400, loop: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3934,"value":"{\n const { groupSize, groupCount, remainder } = divide(dividend, divisor);\n\n const groups = divideToGroups(dividend, divisor);\n const data = groups.flatMap((item) =>\n _.range(0, item.count).map((value, i, array) => ({\n ...item,\n group: item.name,\n index: i,\n value: 1\n }))\n );\n //return data;\n return Plot.plot({\n y: {\n domain: [...new Set(data.map((item) => item.group))],\n ...(groupIndex < groupCount && {\n label: null,\n ticks: []\n })\n },\n x: {\n type: \"point\",\n padding:0.5,\n align: 0.5\n },\n marks: [\n Plot.dot(\n data,\n Plot.stackX2({\n x: \"value\",\n y: \"group\", \n fill: (d, i) => {\n return groupIndex < d.group ||\n (d.group == \"remainder\" && groupIndex != groupCount + 1)\n ? \"black\"\n : \"red\";\n }\n })\n )\n ]\n })\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2867,"value":"{\n const { groupCount } = divide(dividend, divisor);\n const groups = divideToGroups(dividend, divisor);\n const data = groups.flatMap((item, i) =>\n item.parts.map(([key, value]) => ({\n count: value,\n group: item.name,\n category: key,\n opacity: i + 1 > groupIndex ? 0.5 : 1\n }))\n );\n\n return renderGroupPlot(\n data,\n {\n ...(groupIndex < groupCount && {\n y: {\n label: null, \n ticks: []\n },\n x:{\n //type:\"point\",\n padding: 0.5,\n align: 0.5,\n round: false\n }\n })\n },\n true\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"### Partitative division (equal sharing among groups)\n*I know how many (or how much) groups.* **I want to know how many (how much) in each group.**","pinned":false,"hidden":false,"mode":"md"},{"id":1128,"value":"{\n const { groupSize, remainder } = divide(dividend, divisor, true);\n return `${dividend} devided into ${divisor} groups gives a result of ${formatNumber(\n groupSize\n )} per one group${\n remainder != 0 ? ` (remaining group ${formatNumber(remainder)})` : \"\"\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4211,"value":"renderImagePlot(divideToGroups(dividend, divisor, true), { src: icons.y })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2946,"value":"viewof valueIndex = Scrubber(_.range(0,divide(dividend, divisor, true).groupSize + 1), {delay: 400, loop: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3616,"value":"{\n const { groupSize, remainder } = divide(dividend, divisor, true);\n\n const groups = divideToGroups(dividend, divisor, true);\n const data = groups.flatMap((item) =>\n _.range(0, item.count).map((value, i, array) => ({\n ...item,\n index: i,\n value: 1\n }))\n );\n //return data;\n return Plot.plot({\n y: {\n domain: [...new Set(data.map((item) => item.name))]\n },\n x: {\n type: \"point\",\n padding: 0.5,\n align: 0.5,\n ...(valueIndex < groupSize && {\n label: null,\n ticks: []\n })\n },\n marks: [\n Plot.dot(\n data,\n Plot.stackX2({\n x: \"value\",\n y: \"name\",\n fill: (d, i) => {\n return valueIndex < d.index + 1 ? \"black\" : \"red\";\n }\n })\n )\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2953,"value":"{\n const { groupSize, remainder } = divide(dividend, divisor, true);\n\n const groups = divideToGroups(dividend, divisor, true);\n const data = groups.flatMap((item) => {\n return [\n {\n count: valueIndex < item.parts[0][1] ? valueIndex : 0,\n group: item.name,\n category: item.parts[0][0],\n opacity: 1\n }\n ].concat(\n item.parts.map(([key, value]) => ({\n count: valueIndex < value ? value - valueIndex : value,\n group: item.name,\n category: key,\n opacity: valueIndex < value ? 0.5 : 1\n }))\n );\n });\n return renderGroupPlot(\n data,\n {\n ...(valueIndex < groupSize && {\n x: {\n label: null,\n padding: 0,\n ticks: []\n }\n })\n },\n true\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"## Divisions using given ratio","pinned":false,"hidden":false,"mode":"md"},{"id":1641,"value":"names = [[\"watter\",5],[\"oil\",1],[\"milk\",3]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"viewof dividendRatio = Inputs.range([0, 1000], {label: \"Divident\", value: 104, step:0.1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1594,"value":"viewof inputRatio = {\n const range = [0,100]\n const inputs = names.map(([label,value]) => Inputs.range(range, {value, step:0.1, label}))\n const view = html`

${inputs.map((input,i) => html`

${input}

`)}

`;\n view.value = mergeInputs(inputs, []);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"names.map(([key, _], index) => `${key} (${inputRatio[index]})`).join(\" : \")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"renderGroupPlot(\n dividePartitativeAndMultipleRatio(\n dividendRatio,\n names.map(([key], index) => [key, inputRatio[index]])\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"### Quotative division using given ratio","pinned":false,"hidden":false,"mode":"md"},{"id":1672,"value":"{\n const ratios = names.map(([key],i)=> ([key,inputRatio[i]]));\n const divisor = sum(inputRatio);\n const { groupCount, remainder } = divide(dividend, divisor);\n\n return `${dividend} devided into groups of ${divisor} gives a result of ${formatNumber(\n Math.floor(groupCount)\n )} groups${\n remainder != 0 ? ` with remainder ${formatNumber(remainder)}` : \"\"\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"renderPlot(divideToGroups(dividendRatio,names.map(([key],index) => ([key,inputRatio[index]]))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"### Partitative division using given ratio","pinned":false,"hidden":false,"mode":"md"},{"id":1713,"value":"{\n const ratios = names.map(([key], i) => [key, inputRatio[i]]);\n const divisor = sum(inputRatio);\n const { groupSize, remainder } = divide(dividendRatio, divisor, true); \n return `${dividendRatio} devided into ${divisor} groups gives a result of ${formatNumber(\n groupSize\n )} per one group${\n remainder != 0\n ? ` (remaining group ${formatNumber(remainder)})`\n : \"\"\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"renderPlot(\n divideToGroups(\n dividendRatio,\n names.map(([key], index) => [key, inputRatio[index]]), \n true\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"### Utils","pinned":false,"hidden":false,"mode":"md"},{"id":2767,"value":"divide = (total, divisor, isPartitative = false) => {\n const rawQuotient = total / divisor;\n const rawRemainder = rawQuotient % 1;\n const quotient = rawQuotient - rawRemainder;\n const remainder = isPartitative\n ? (divisor - Math.floor(divisor)) * rawQuotient\n : rawRemainder * divisor;\n\n const groupCount = isPartitative ? divisor : quotient;\n const groupSize = isPartitative ? rawQuotient : divisor;\n return {\n groupCount,\n groupSize, \n remainder\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2658,"value":"\ntoParts = (itemsValues, groupSize, remainder) => {\n const parts = [[]];\n const roundingError = 100000;\n let currentGroupSize = groupSize;\n let currentGroupIndex = 0;\n \n\n for (const itemsValue of itemsValues) {\n let currentValue =\n Math.round(itemsValue[1] * roundingError) / roundingError;\n\n while (currentValue > 0.0001) {\n if (currentGroupSize < 0.0001) {\n currentGroupSize = groupSize;\n parts.push([]);\n currentGroupIndex++;\n }\n\n const valueToUse =\n Math.round(Math.min(currentGroupSize, currentValue) * roundingError) /\n roundingError;\n parts[currentGroupIndex].push([itemsValue[0], valueToUse]);\n currentGroupSize -= valueToUse; \n currentValue -= valueToUse;\n }\n }\n return parts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2498,"value":"splitToChunks = (array, parts) =>{\n let result = [];\n for (let i = parts; i > 0; i--) {\n result.push(array.splice(0, Math.ceil(array.length / i)));\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2506,"value":"partition = (itemValues, sizes) => {\n const values = [...itemValues];\n const results = [];\n for (const size of sizes) {\n console.log(size);\n let current = [];\n while (values.length > 0 && current.length < size) {\n current.push(...values.splice(0, 1));\n }\n results.push(current);\n }\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2204,"value":"dividePartitativeAndMultipleRatio = (dividend, ratio) => {\n const quotient = dividend/ sum(ratio.map(([,value])=>value));\n \n return ratio.map(([key,value],i) => ({group:key, count:value * quotient , category:key}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"formatNumber = (input, decimals) => input.toLocaleString(\"en-US\", { maximumFractionDigits: decimals, minimumFractionDigits: 0 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function* rangeGen(start, end) {\n let i = start;\n while (i <= end) {\n yield i++;\n }\n return;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1679,"value":"sum = values => values.reduce((out,v)=> out+=v,0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4195,"value":"renderPlot = (items) => {\n const data = items.flatMap((item) =>\n item.parts.map(([key, value]) => ({\n count: value,\n group: item.name,\n category: key,\n }))\n );\n return renderGroupPlot(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1893,"value":"renderGroupPlot = (data, axis = { x: {}, y: {} }, shouldStroke) => {\n return Plot.plot({ \n ...axis,\n padding:0.1,\n marginLeft: 60, \n color: {\n legend: true,\n domain: [...new Set(data.map((item) => item.category))],\n type: \"categorical\"\n },\n marks: [ \n Plot.barX(data, {\n x: \"count\", // feature for the x channel\n y: \"group\", // feature for // {\n // count: valueIndex < item.parts[0][1] ? valueIndex : 0,\n // group: item.name,\n // category: item.parts[0][0],\n // opacity: 1\n // } the y channel\n opacity: (d) => d.opacity ?? 1,\n fill: shouldStroke ? \"lightgray\" : (d) => d.category,\n ...(shouldStroke && { strokeWidth: (d) => (d.opacity < 1 ? 0 : 1) }),\n ...(shouldStroke && { stroke: (d) => d.category })\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4340,"value":"renderDotPlot = (groups, dotProps = {}) => {\n const data = groups.flatMap((item) =>\n _.range(0, item.count).map((value, i, array) => ({\n ...item,\n group: item.name,\n value: 1\n }))\n );\n\n return Plot.plot({\n marginLeft: 70,\n y: {\n domain: [...new Set(data.map((item) => item.group))], \n },\n x: {\n type: \"point\",\n padding: 0.5,\n align: 0.5\n },\n marks: [\n Plot.dot(\n data,\n Plot.stackX2({\n x: \"value\",\n y: \"group\",\n ...dotProps\n })\n )\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4123,"value":"renderImagePlot = (groups, imageProps = {}) => {\n const data = groups.flatMap((item) =>\n _.range(0, item.count).map((value, i, array) => ({\n ...item,\n group: item.name,\n value: 1\n }))\n );\n\n return Plot.plot({\n marginLeft: 70,\n y: {\n domain: [...new Set(data.map((item) => item.group))], \n },\n x: {\n type: \"point\",\n padding: 0.5,\n align: 0.5\n },\n marks: [\n Plot.image(\n data,\n Plot.stackX2({\n x: \"value\",\n y: \"group\",\n ...imageProps\n })\n )\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2877,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"function range(count){\n return [...rangeGen(0, count - 1)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1597,"value":"import {mergeInputs} from \"@mootari/observablehq-inputs-feature-73\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4049,"value":"icons = ({\n o: await FileAttachment(\"activity.svg\").url(),\n y: await FileAttachment(\"yin-yang.svg\").url(),\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}