item in array not defined

[rbhttchr]

Hi,

I am trying to generate a square via some functions, and am getting the error ‘item’ is not defined, from the second choice onwards. That is, if rem ===0, no error. Error begins with else if item > 12. Here is the notebook:
https://observablehq.com/@rbhttchr/magic-square

function magic(Array, rem, quot) {
if (rem === 0)
return Array.map((item) => item + quot);
else if (rem === 1)
return Array.map((item) > 12 ? (item + quot + 1) : (item + quot));
else if (rem === 2)
return Array.map(item > 8 ? item + quot + 1 : item + quot);
if (rem === 3) return Array.map(item > 4 ? item + quot + 1 : item + quot);
}

[Cobus]

Those map functions are missing the (item) => bits… the argument for the map function should be a function

[rbhttchr]

Thanks so much, silly me!

[rbhttchr]

How can I style this array into a nice 4x4 square? I have been looking for examples, but could not find any.

[Fil]

Maybe with Plot?

Plot.plot({
  axis: null,
  inset: 30,
  width: 150,
  height: 150,
  marks: [
    Plot.frame(),
    Plot.text(yourArray, { frameAnchor: "middle", fx: (d, i) => i % 4, fy: (d, i) => Math.floor(i / 4) })
  ]
})

maybe that’s too big of a hammer, and you’d rather do this in HTML?

<table>
  <tr>${yourArray.slice(0, 4).map(d => html`<td>${d}</td>`)}</tr>
  <tr>${yourArray.slice(4, 8).map(d => html`<td>${d}</td>`)}</tr>
  <tr>${yourArray.slice(8, 12).map(d => html`<td>${d}</td>`)}</tr>
  <tr>${yourArray.slice(12, 16).map(d => html`<td>${d}</td>`)}</tr>
</table>

[rbhttchr]

Plot is the perfect hammer, thank you so much!