2d:null 2e:["$","title",null,{"children":"Roman numerals \n DRAFT | Toph Tucker | Observable"}] 33:T66c,romanAnimation = { const duration = 450 const numberCMarks = 30 const angleC = d3.scaleLinear() .domain([0, numberCMarks - 1]) .range([-100, 100]) const sel = d3.select(this || html``) let line = sel.selectAll("line") .data(digitsToMarks(romanToDigits(numToRoman(stickN)))) line.exit().transition() .duration(duration) .attr("transform", `translate(${100}, 0)`) .attr("opacity", 0) .remove() line = line.enter().append("line") .attr("y1", -7.5) .attr("y2", 7.5) .attr("transform", `translate(${100}, 0)`) .attr("opacity", 0) .merge(line) line.transition() .duration(duration) .attr("opacity", 1) .attr("transform", (d, i) => { const x = d.i * 10 switch (d.letter) { case "I": return `translate(${x}, 0)` case "V": return ` translate(${x + (i % 2 ? -2.5 : 2.5)}, ${i % 5 - 2.5}) rotate(${i % 2 ? -20 : 20})` case "X": return ` translate(${x}, ${i % 5 - 2.5}) rotate(${i % 2 ? 30 : -30})` case "L": return ` translate(${x + (i % 2 ? 0 : -5) + i % 5}, ${(i % 2 ? 5 : -2) + i % 5}) rotate(${i % 2 ? 90 : 0})` case "C": let a = angleC(i % numberCMarks) return ` translate(${x + -10 * Math.cos(a * degToRad)}, ${-10 * Math.sin(a * degToRad)}) rotate(${a})` } }) return sel.node() }34:[] 31:{"id":"207f9dad4d47a4de","slug":"roman-numerals","title":"Roman numerals \n DRAFT\n ","thumbnail":"45ca33f4a740353ce8aaaf8068432b39157a104d43c7d697986c86a38a1b0589","access_level":"public","create_time":"$D2019-06-25T18:17:08.920Z","update_time":"$D2019-11-02T03:16:15.534Z","view_time":null,"first_public_time":"$D2019-07-06T22:34:00.859Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2024"},"version":772,"publish_version":772,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d40cc4f153f404b4","slug":"how-we-do-math","title":"How We Do Math","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Roman numerals \n DRAFT\n ","cells":[{"id":0,"value":"md`# Roman numerals ${draft()}\nhttps://en.wikipedia.org/wiki/Roman_numerals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"numToRoman = n => {\n let m = n\n const digits = []\n while (m > 0) {\n // Subtractive Principle: \n // If there exists a smaller power of ten (subtrahend) that, \n // when subtracted from the next larger digit (minuend), \n // is less than the remaining value to be added (m), \n // then prepend the subtrahend to the minuend.\n // http://www.numericana.com/answer/roman.htm#valid\n let minuend = values.find(d => d[1] > m)\n let subtrahend = minuend && values\n .find(d => \n d[1] < minuend[1] &&\n d[1] * 10 >= minuend[1] &&\n Math.log10(d[1]) % 1 === 0 &&\n minuend[1] - d[1] <= m\n )\n if (subtrahend && subtractive) {\n // Subtractive\n digits.push(subtrahend[0], minuend[0])\n m -= minuend[1] - subtrahend[1]\n } else {\n // Additive\n let digit = reverseValues.find(d => d[1] <= m)\n digits.push(digit[0])\n m -= digit[1]\n }\n } \n return digits.join(\"\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof n = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`${numToRoman(n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"md`Initially, historically, they didn’t have the subtractive principle… but then they did… and it’s a bit subtle! Like, “VL” and “IL” and “VIX” and “XCL” are not valid, although you can imagine what they’d be (and my initial implemenation was spitting out that kind of thing). Summary of rules: http://www.numericana.com/answer/roman.htm\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"viewof subtractive = checkbox({\n options: [{ value: \"subtractive\", label: \"Allow subtractive principle\" }],\n value: \"subtractive\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`As Wolfram pointed out in his [excellent 2000 talk](https://www.stephenwolfram.com/publications/mathematical-notation-past-future/), the length of Roman numerals grows fractally:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"{\n await visibility()\n const sel = d3.select(DOM.svg(width, table.length / 2))\n .attr(\"class\", \"fractal-text-bar-chart\")\n const g = sel.selectAll(\"g\").data(table).enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(0, ${i * 15 + 20})`)\n g.append(\"rect\").attr(\"width\", width).attr(\"height\", 10).attr(\"fill\", \"white\")\n g.append(\"text\").attr(\"y\", 10).text(d => d[1])\n g.transition().duration(1e4)\n .attr(\"transform\", (d, i) => `translate(0, ${i * 0.5 + 20})`)\n return sel.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`Like many numeral systems, there is an intuitive agglomerative principle at work whereby _many_ marks are replaced by _one_ that stands for a larger number. Marks get piled up, and then the pile becomes its own single discrete object. It resembles a child collecting sticks into stacks of five and then counting the stacks. (Notably, Hindu-Arabic numerals eschew this technique, giving them monotonically increasing length, and facilitating their standard ease for calculation.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"viewof stickN = timerSlider(0, 180, 500, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"todo = md`To-do: \n- Vinculum support for 1000× (“M×”?) multiplier\n- More history\n- Using them for calculation vs. using them to “serialize” a calculation (cf. Jacob Rus et al.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"values = [\n [\"I\", 1],\n [\"V\", 5],\n [\"X\", 10],\n [\"L\", 50],\n [\"C\", 100],\n [\"D\", 500],\n [\"M\", 1000],\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"reverseValues = values.slice(0).reverse()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"table = Array(1e3).fill(true)\n .map((_, i) => i + 1)\n .map(n => [n, numToRoman(n)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"degToRad = Math.PI / 180","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"romanToDigits = roman => roman\n .split(\"\")\n .map((l, i) => {\n const [letter, value] = values.find(d => d[0] === l)\n return {i, letter, value}\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"timerSlider = async (min, max, delay, wait) => {\n if (wait) {\n await visibility()\n }\n\n let direction = 1\n \n const div = html`\n \n \n `\n const range = div.querySelector(\"[type=range]\")\n const number = div.querySelector(\"[type=number]\")\n \n div.value = range.value = number.value = 1\n range.oninput = () => number.value = div.value = range.valueAsNumber\n number.oninput = () => range.value = div.value = number.valueAsNumber\n \n const interval = d3.interval(function() {\n div.value = range.value = number.value = +div.value + direction\n div.dispatchEvent(new CustomEvent(\"input\"))\n if (div.value <= min || div.value >= max) direction *= -1\n }, delay)\n \n div.addEventListener(\"mousedown\", () => interval.stop())\n invalidation.then(() => interval.stop())\n \n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"digitsToMarks = digits => d3.merge(digits.map((digit, i, arr) => {\n let n\n if (arr[i - 1] && arr[i - 1].value < digit.value) {\n // digit is minuend; subtract 2 * subtrahend such that\n // number of marks in minuend and subtrahend = minuend - subtrahend\n // e.g. in IV, you have to use 1 mark for \"I\", so \"V\" should have only 3, so that 1 + 3 = 4 = IV\n n = digit.value - arr[i - 1].value * 2\n } else {\n // digit is normal digit or subtrahend\n n = digit.value\n }\n return d3.range(n).map(() => digit)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"import {draft} from \"@tophtucker/scrapbook\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"