2b:null 2c:["$","title",null,{"children":"Grid inputs | Fati CHEN | Observable"}] 31:T995,md`Here are some functions that create interactive SVG grids that can serve as input cells for arrays whose elements may be chosen from 0 to some integer \`numStates-1\`: \`\`\`js import {grid, hexGrid} from '@bryangingechen/grid-inputs' \`\`\` Each of the two functions takes a config object with the following (optional) keys: - \`numStates:2\`, the number of possible states that each element of the array can be in - \`init\`, if present, the initial 2D array. The entries must be between 0 and \`numStates\`. - \`nx\`, the number of boxes in the x-direction; must be equal to the number of columns of \`init\` if both are present. If \`init\` is present and \`nx\` is not, then \`nx\` is set to the number of columns of \`init\`. Otherwise, \`nx\` is set to \`ny\` if present, and 5 otherwise. - \`ny\`, the number of boxes in the y-direction; must be equal to the number of rows of \`init\` if both are present. If \`init\` is present and \`ny\` is not, then \`ny\` is set to the number of rows of \`init\`. Otherwise \`ny\` is set to \`nx\` if present, and 5 otherwise. - \`size:15\`, the size of each box in pixels - \`margin:2\`, half the space between boxes in pixels - \`colorArray\`, an array of colors to fill each state with. By default, the array of colors are white for 0, black for 1 and then the 12 entries of [\`d3.schemeSet3\`](https://github.com/d3/d3-scale-chromatic#schemeSet3) repeat. - \`outline:'#000'\`, color of the outline The config object for \`hexGrid\` also takes a string \`shape\` which can be equal to \`'parallelogram'\` (default), \`'rectangle'\`, or \`'hexagon'\`. The first two choices behave similarly, except that the array is displayed differently (see the examples below). However, if \`shape\` is \`'hexagon'\`, there are more restrictions: - First, \`nx\` and \`ny\` become the diameter of the resulting hexagon. - If \`init\` is present, it must be a square array. - Then, if \`nx\` and/or \`ny\` are not defined, they are read off from the dimensions of \`init\`. - If they are defined, they are checked against the dimensions of \`init\` for consistency. - Otherwise, if \`init\` is not present: - If both \`nx\` and \`ny\` are present they must be equal to each other. - \`nx\` and \`ny\` are set equal if one is present but not both. - If neither \`nx\` nor \`ny\` are present, they are both set to 5. - In any case, the resulting \`nx\` and \`ny\` must be odd and greater than 3. `32:Tb5c,function grid(config) { // defaults config = Object.assign( { size: 15, numStates: 2, margin: 2, outline: '#000' }, config ); let { nx, ny, size, numStates, init, margin, colorArray, outline } = config; // validate init: this is horrible... if (init !== undefined) { if ( init.some(d => d.length !== init[0].length) || init.some(d => d.some(v => v < 0 || v >= numStates || v != Math.round(v))) ) throw new Error( `init should be undefined or a rectangular matrix with integer entries between 0 and ${numStates - 1}` ); if (nx === undefined && ny !== undefined) { if (ny === init.length) nx = init[0].length; else throw new Error(`init length:${init.length} not equal to ny:${ny}`); } else if (ny === undefined && nx !== undefined) { if (nx === init[0].length) ny = init.length; else throw new Error( `init inner length:${init[0].length} not equal to nx:${nx}` ); } else if (nx === undefined && ny === undefined) { ny = init.length; nx = init[0].length; } } else { if (nx === undefined && ny !== undefined) nx = ny; else if (ny === undefined && nx !== undefined) ny = nx; else if (nx === undefined && ny === undefined) ny = nx = 5; } if (colorArray === undefined) colorArray = Array.from({ length: numStates }, (d, i) => i === 0 ? '#FFF' : i === 1 ? '#000' : d3.schemeSet3[(i - 2) % 12] ); // Array of values, start out all 0 if init not defined let state = init ? init.map(d => d.slice()) : Array.from({ length: ny }, d => Array(nx).fill(0)); const svg = d3.select( DOM.svg(nx * (size + 2 * margin), ny * (size + 2 * margin)) ); const el = svg.node(); const rectData = []; for (let y = 0; y < ny; y++) for (let x = 0; x < nx; x++) rectData.push({ x, y }); const grid = svg .append("g") .attr("cursor", "pointer") .selectAll("rect") .data(rectData) .join("rect") .on("click", gridClick) .attr("x", d => d.x * (size + 2 * margin) + margin) .attr("y", d => d.y * (size + 2 * margin) + margin) .attr("fill", d => colorArray[state[d.y][d.x]]) .attr("stroke", outline) .attr("width", size) .attr("height", size); function gridClick({ x, y }) { state[y][x] = (state[y][x] + 1) % numStates; this.style.fill = colorArray[state[y][x]]; el.dispatchEvent(new Event('input', { bubbles: true })); } Object.defineProperty(el, "value", { get: () => state, set: detail => { if (detail !== null && detail !== undefined) { validate(detail, { nx, ny, numStates }); state = detail; } else { state = init ? init.map(d => d.slice()) : Array.from({ length: ny }, d => Array(nx).fill(0)); } grid.style("fill", d => colorArray[state[d.y][d.x]]); } }); return el; }33:T175f,function hexGrid(config) { const SQRT3_2 = Math.sqrt(3) / 2; // defaults config = Object.assign( { size: 15, numStates: 2, margin: 2, outline: '#000', shape: 'parallelogram' }, config ); let { nx, ny, size, numStates, init, margin, colorArray, outline, shape } = config; // validate shape if (shape !== 'hexagon' && shape !== 'parallelogram' && shape !== 'rectangle') throw new Error(`shape must be 'hexagon', 'parallelogram', or 'rectangle'`); // passing in option hexagon was deprecated and is now removed const hexagon = shape === 'hexagon'; // validate init: this is horrible... if (init !== undefined) { if ( init.some(d => d.length !== init[0].length) || init.some(d => d.some(v => v < 0 || v >= numStates || v != Math.round(v)) ) || (hexagon && init.length !== init[0].length) ) throw new Error( `init should be undefined or a ${ hexagon ? 'square' : 'rectangular' } matrix with integer entries between 0 and ${numStates - 1}` ); if (nx === undefined && ny !== undefined) { if (ny === init.length) nx = init[0].length; else throw new Error(`init length:${init.length} not equal to ny:${ny}`); } else if (ny === undefined && nx !== undefined) { if (nx === init[0].length) ny = init.length; else throw new Error( `init inner length:${init[0].length} not equal to nx:${nx}` ); } else if (nx === undefined && ny === undefined) { ny = init.length; nx = init[0].length; } if (hexagon && nx !== ny) throw new Error( `init should be undefined or a square matrix and ny and nx should be equal to its size` ); } else { if (hexagon) { if (nx === undefined && ny !== undefined) nx = ny; else if (ny === undefined && nx !== undefined) ny = nx; else if (nx === undefined && ny === undefined) ny = nx = 5; if (ny !== nx || ny < 3 || ny % 2 === 0) throw Error( `when 'hexagon' is 'true', ny and nx should be odd and equal to each other` ); } else { if (nx === undefined && ny !== undefined) nx = ny; else if (ny === undefined && nx !== undefined) ny = nx; else if (nx === undefined && ny === undefined) ny = nx = 5; } } if (init !== undefined) if ( init.length !== ny || init.some(d => d.length !== nx || d.some(v => v < 0 || v >= numStates)) ) throw Error( `init should be undefined or an ${ny} by ${nx} with entries from 0 to ${numStates - 1}` ); if (colorArray === undefined) colorArray = Array.from({ length: numStates }, (d, i) => i === 0 ? '#FFF' : i === 1 ? '#000' : d3.schemeSet3[(i - 2) % 12] ); const unitHex = [0, 1, 2, 3, 4, 5].map(d => { const ang = (Math.PI * (d + (shape === 'rectangle' ? 0 : 0.5))) / 3; return [Math.cos(ang), Math.sin(ang)]; }); const scale = size * SQRT3_2; const r = size / Math.sqrt(3); // Array of values, start out all 0 if init not defined let state = init ? init.map(d => d.slice()) : Array.from({ length: ny }, d => Array(nx).fill(0)); const svg = hexagon ? d3.select( DOM.svg( nx * (size + 2 * margin), nx * (scale + Math.sqrt(3) * margin) + scale / 2 + Math.sqrt(3) * margin ) ) : shape === 'rectangle' ? d3.select( DOM.svg( nx * (scale + 2 * margin) + scale, ny * (size + 2 * margin) + size ) ) : // parallelogram (default) d3.select( DOM.svg( nx * (size + 2 * margin) + ny * (size / 2 + margin), ny * (scale + Math.sqrt(3) * margin) + scale / 2 + Math.sqrt(3) * margin ) ); const el = svg.node(); const hexData = []; if (hexagon) { for (let y = 0; y < (ny + 1) / 2; y++) for (let x = (nx - 1) / 2 - y; x < nx; x++) hexData.push({ x, y }); for (let y = (ny + 1) / 2; y < ny; y++) for (let x = 0; x < nx - (y - (ny - 1) / 2); x++) hexData.push({ x, y }); } else for (let y = 0; y < ny; y++) for (let x = 0; x < nx; x++) hexData.push({ x, y }); const grid = svg .append("g") .attr("cursor", "pointer") .selectAll("polygon") .data(hexData) .join("polygon") .attr("points", hexPoints) .on("click", gridClick) .attr("fill", d => colorArray[state[d.y][d.x]]) .attr("stroke", outline); function hexPoints({ x, y }) { if (shape === 'rectangle') { const cx = (scale + margin * Math.sqrt(3)) * x + scale / 2 + Math.sqrt(3) * margin; const cy = (size + 2 * margin) * y + size + (x % 2) * (size / 2 + SQRT3_2 * margin); return unitHex.map(([x, y]) => `${cx + r * x},${cy + r * y}`).join(' '); } const cx = hexagon ? (size / 2 + margin) * y + (size + 2 * margin) * (x - (nx - 1) / 4) + size / 2 + margin : (size / 2 + margin) * y + (size + 2 * margin) * x + size / 2 + 2 * margin; const cy = (scale + margin * Math.sqrt(3)) * y + scale; return unitHex.map(([x, y]) => `${cx + r * x},${cy + r * y}`).join(' '); } function gridClick({ x, y }) { state[y][x] = (state[y][x] + 1) % numStates; this.style.fill = colorArray[state[y][x]]; el.dispatchEvent(new Event('input', { bubbles: true })); } Object.defineProperty(el, "value", { get: () => state, set: detail => { if (detail !== null && detail !== undefined) { // error detection validate(detail, { nx, ny, numStates }); state = detail; } else { state = init ? init.map(d => d.slice()) : Array.from({ length: ny }, d => Array(nx).fill(0)); } grid.style("fill", d => colorArray[state[d.y][d.x]]); } }); return el; }34:[] 2f:{"id":"6fb3d90c5f307bd6","slug":"grid-inputs","title":"Grid inputs","thumbnail":"1f4d5e2b537227a5d2321c85a8755ef5c34d2bcfba73ad8726b6b4673ad7d038","access_level":"public","create_time":"$D2021-02-26T09:43:28.151Z","update_time":"$D2021-02-26T12:43:55.206Z","view_time":null,"first_public_time":"$D2021-02-26T10:50:52.478Z","fork":{"id":"8169604bb2daceb3","slug":"grid-inputs","title":"Grid inputs","owner":{"id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen"}},"stars":1,"starred":false,"owner":{"type":"team","id":"ffbcf8ce47e293f4","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":"starter_2024"},"version":674,"publish_version":674,"role":null,"authored":false,"authors":[{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null}],"members":[{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Grid inputs","cells":[{"id":417,"value":"md`# Grid inputs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"viewof first = {\n const makeRandom = (n,s) => Array.from({length:n}).map(() => Array.from({length:n}).map(() => Math.floor(s*Math.random())));\n const s = 10;\n const n = Math.floor(width/100);\n const rect = grid({init:makeRandom(2*n-1,s), numStates:s});\n const hex = hexGrid({shape:'hexagon', \n init:makeRandom(2*n+1,s).map(\n (row,y) => row.map(\n (d,x) => x+y > n-1 && x+y < 3*n+1 ? d : 0)), \n numStates:s});\n \n const div = md`## Rectangles, parallelograms and hexagons\n\n${rect} ${hex}`;\n div.value = ({rect,hex});\n rect.addEventListener('input', () => div.dispatchEvent(new CustomEvent('input')));\n hex.addEventListener('input', () => div.dispatchEvent(new CustomEvent('input')));\n return div;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"{\n const rectMat = await pt(first.rect.value, {maxrows:19});\n const hexMat = await pt(first.hex.value, {maxrows:21});\n return html`${rectMat} ${hexMat}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"md`## Examples\n\nTry clicking on the squares of this grid:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"viewof test = grid()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"{\n const div = html`\n `;\n const resetButton = div.querySelector('#resetButton');\n resetButton.onclick = () => {\n viewof test.value = null;\n };\n\n const onesButton = div.querySelector('#onesButton');\n onesButton.onclick = () => {\n viewof test.value = [\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1]\n ];\n };\n\n const invalidButton = div.querySelector('#invalidButton');\n invalidButton.onclick = () => {\n viewof test.value = [\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1]\n ];\n };\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"md`Here's a [nicely-formatted view](/@fil/pt) of the array \\`test\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"pt(test)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"md`This grid starts out with an \\`init\\` array:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"viewof test2 = grid(\n {numStates:4, \n init:[\n [0,0,0,1,0],\n [0,0,3,2,0],\n [0,3,0,0,0],\n [1,1,1,1,1]]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"pt(test2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":317,"value":"md`By default, \\`hexGrid\\` draws a hexagonal grid as a parallelogram:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"viewof testHex = hexGrid()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"pt(testHex)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"md`These SVG elements listen for \\`inputArray\\` CustomEvents. When the cell receives such an event, the state is set to \\`detail\\` if it is an array of the correct size, or it is set back to the initial array if \\`detail\\` is null or undefined. Otherwise an error is put in the console.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"{\n const div = html`\n `;\n const resetButton = div.querySelector('#resetButton');\n resetButton.onclick = () => {\n viewof testHex.value = null;\n };\n\n const onesButton = div.querySelector('#onesButton');\n onesButton.onclick = () => {\n viewof testHex.value = [\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1]\n ];\n };\n\n const invalidButton = div.querySelector('#invalidButton');\n invalidButton.onclick = () => {\n viewof testHex.value = [\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1, 1],\n [1, 1, 1, 1]\n ];\n };\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":505,"value":"md`We can draw a hexagonal grid in a rectangular form by setting \\`shape\\` to be \\`rectangle\\` (thanks to [@fil](/@fil) for the suggestion!):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":484,"value":"viewof testHex2a = hexGrid({shape:'rectangle',\n numStates:6,\n init:Array.from({length:6}, (d,i) => Array(10).fill(5-i))\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":514,"value":"pt(testHex2a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"viewof testHex2b = hexGrid({shape:'rectangle',\n numStates:7,\n init:[\n [6,5,4,3,2,0,6,5,4],\n [5,4,3,2,0,6,5,4,3],\n [4,3,2,0,6,5,4,3,2],\n [3,2,0,6,5,4,3,2,1],\n ]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"pt(testHex2b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"md`To create a hexagon, use \\`hexGrid\\` with the option \\`shape\\` set to \\`'hexagon'\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"viewof testHex3 = hexGrid(\n {shape:'hexagon', nx:7,\n init:[\n [1,1,0,1,0,0,1], // Note that stuff in the upper left corners ...\n [0,0,1,0,0,1,0],\n [0,1,0,0,1,0,0],\n [1,0,0,1,0,0,1],\n [0,0,1,0,0,1,0],\n [0,1,0,0,1,0,0],\n [1,0,0,1,0,0,1] // and lower right corners is ignored.\n // However, it is still checked to make sure it is in bounds!\n ]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"pt(testHex3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":655,"value":"function validate(input, { nx, ny, numStates }) {\n // error detection\n if (input.length !== ny)\n throw new Error(\n `value length ${input.length} does not match matrix ny (${ny}) `\n );\n\n input.forEach(d => {\n if (d.length !== nx)\n throw new Error(\n `the length of the line [${d}] does not match matrix nx: ${nx}`\n );\n d.forEach(v => {\n if (v >= numStates || v < 0 || v !== Math.round(v))\n throw new Error(\n `value integer entries should be between 0 and ${numStates -\n 1}, found ${v}`\n );\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"md`For the nice matrix print function, see @fil's notebook [pt](/@fil/pt). I only import a fork here because it says to...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"import {pt} from \"43b57dd558b3d1ee\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"