3f:null 40:["$","title",null,{"children":"fractional selector | Riley | Observable"}] 46:T95f,{ let output; let range = d3.create("input") .attr("type", "range") .attr("min", -2) .attr("max", 2) .attr("step", 0.0625) .style("margin-block", "1em") .on("input", function() { output.node().replaceChildren(...fracFormat(Number.parseFloat(this.value, 10), {rich: true})); }); { let min = Number.parseFloat(range.attr("min"), 10); range.attr("value", Math.random() * (Number(range.attr("max")) - min) / 4 + min); let update = () => { //output.node().replaceChildren(...fracFormat(Math.round(Number.parseFloat(range.attr("value"), 10) / round) * round, {rich: true})); //console.log(Number.parseFloat(range.attr("value"))); output.node().replaceChildren(...fracFormat(Number.parseFloat(range.attr("value"), 10), {rich: true})); range.style("pointer-events", "none"); range.attr("disabled", "disabled"); window.requestAnimationFrame(update); }; range.transition("fillUp") .duration(1000 + 500 * Math.random()) .ease(d3.easeBounceOut) .attrTween("fillUp", () => { let max = Number.parseFloat(range.attr("max"), 10); let round = Number.parseFloat(range.attr("step"), 10); // return d3.scaleLinear() // .domain([0, 1]) // .range([min, max]) // .tickFormat(n => { // debugger; // return Math.round(n / round) * round; // }); return d3.scaleQuantize() .domain([0, 1]) .range([...(function* () { let i = 0; let j; do { yield j = min + (i++ * round); } while (j < max); })()]); return t => { //debugger; t = t * (max - min) + min; t = Math.round(t / round) * round; //console.log(t); return t; }; }) .attr("value", Number(range.attr("max"))) .end().then(() => { update = () => {}; window.requestAnimationFrame(() => { range.style("pointer-events", null); range.node().removeAttribute("disabled"); }); }); window.requestAnimationFrame(update); } output = d3.create("output") .style("font-variant-numeric", "tabular-nums") .style("margin-inline-start", "1ex") .attr("for", range.attr("id")); return html`` }47:T632,fracFormat = { return fracFormat; function fracFormat(exact, {maxDenominator = 4096, sign = false, rich = false} = {}) { if (typeof exact === "bigint" || exact instanceof BigInt) { sign = exact < 0 ? minus : sign ? "+" : ""; return rich ? maybeSeverChildren(html`${sign}${exact}`, rich !== "wrap") : `${sign}${exact}`; } if (! (typeof exact === "number" || exact instanceof Number)) { throw "non-numeric input"; } if (Object.is(exact, -0)) { return rich ? maybeSeverChildren(html`${minus}0`, rich !== "wrap") : `${minus}0`; } let negative = exact < 0; sign = negative ? minus : sign ? "+" : ""; exact = Math.abs(exact); let whole = Math.floor(exact); let [n, d] = [exact - whole, 1]; while (d <= maxDenominator && !Number.isInteger(n)) { n *= 2; d *= 2; } if (d <= maxDenominator && d !== 1) { if (rich) { return whole === 0 ? maybeSeverChildren(html`^${sign}${n}${slash}_${d}`, rich !== "wrap") : maybeSeverChildren(html`${sign}${whole} ^${n}${slash}_${d}`, rich !== "wrap"); } let frac = fracPreset(n, d) ?? [ ...[...n.toString(10)].map(c => sup[c]), slash, ...[...d.toString(10)].map(c => sub[c]) ].join(""); return whole === 0 ? `${sign.length > 0 ? sup[sign] : ""}${frac}` : `${sign}${whole} ${frac}`; } return rich ? maybeSeverChildren(html`${sign}${Math.abs(exact)}`, rich !== "wrap") : `${sign}${Math.abs(exact)}`; }; }48:T6d7,function fracFormatNew(exact, {maxDenominator = 4096, sign = false, type} = {}) { if (typeof exact === "bigint" || exact instanceof BigInt) { sign = exact < 0 ? (type == "tex" ? "-" : minus) : sign ? "+" : ""; return type == "element" ? htl.html`${sign}${exact.toString()}` : `${sign}${exact.toString()}`; } let n = undefined, d = undefined; if (! (typeof exact === "number" || exact instanceof Number)) { if (Array.isArray(exact) && exact.length == 2 && exact.every(n => typeof exact.valueOf() === "number")) { [n, d] = exact; (d < 0) && (n *= -1, d *= -1); exact = n / d; } else { throw new TypeError("non-numeric input"); } } if (Object.is(exact, -0)) { return type == "element" ? htl.html`${minus}0` : `${type == "tex" ? "-" : minus}0`; } sign = (exact < 0) ? (type == "tex" ? "-" : minus) : sign ? "+" : ""; exact = Math.abs(exact); let whole = Math.floor(exact); [n, d] = [exact - whole, 1]; while (d <= maxDenominator && !Number.isInteger(n)) { n *= 2; d *= 2; } if (d <= maxDenominator && d !== 1) { if (rich) { return whole === 0 ? maybeSeverChildren(html`^${sign}${n}${slash}_${d}`, rich !== "wrap") : maybeSeverChildren(html`${sign}${whole} ^${n}${slash}_${d}`, rich !== "wrap"); } let frac = fracPreset(n, d) ?? [ ...[...n.toString(10)].map(c => sup[c]), slash, ...[...d.toString(10)].map(c => sub[c]) ].join(""); return whole === 0 ? `${sign.length > 0 ? sup[sign] : ""}${frac}` : `${sign}${whole} ${frac}`; } return rich ? maybeSeverChildren(html`${sign}${Math.abs(exact)}`, rich !== "wrap") : `${sign}${Math.abs(exact)}`; }49:[] 44:{"id":"68cd0da751a68034","slug":"fractional-selector","title":"fractional selector","thumbnail":"3b1c78265b341ebf7651d7877cbea548270eabe7ab74c6e4bcb92d25c081b125","access_level":"public","create_time":"$D2021-10-04T16:40:29.594Z","update_time":"$D2023-02-24T17:49:20.333Z","view_time":null,"first_public_time":"$D2021-10-04T20:55:12.176Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d2b7afa3a61febdf","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":"starter_2024","bio":"I enjoy spreadsheets and JavaScript way too much.","following":false},"version":258,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"817e538440b46e8a","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":null,"bio":"I enjoy spreadsheets and JavaScript way too much.\n\ntrust://Riley.science!","following":false}],"members":[{"type":"individual","id":"817e538440b46e8a","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"f315bea3064cd044","slug":"imports","title":"importables","owner":{"id":"d2b7afa3a61febdf","login":"rmw4269","name":"Riley"}},"type":"notebook","body":{"titling":"auto","title":"fractional selector","cells":[{"id":5,"value":"# fractional selector","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"testResults = [0, -0, 1, 12, 3.5, -3.5, 0.5, -0.5, 0.125, 0.0625, 15.375, 12.52, -4.56].map(d => ({\n input: d,\n \"plain output\": fracFormat(d),\n \"rich output\": fracFormat(d, {rich: true})\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"{\n let table = d3.create(\"table\").attr(\"id\", \"results\");\n let head = table.append(\"thead\").call(selection => [\"input\", \"plain output\", \"rich output\"].forEach(h => selection.append(\"th\").text(h)));\n let body = table.append(\"tbody\");\n // head.clone(true);\n let rows = body.selectChildren()\n .data(testResults)\n .join(\"tr\");\n rows.append(\"th\").text(d => d.input);\n rows.append(\"td\").text(d => d[\"plain output\"]);\n rows.append(\"td\").each(function(d, i) {\n // this.innerText = d[\"rich output\"];\n this.replaceChildren(...d[\"rich output\"]);\n });\n \n table.node().append(head.node().cloneNode(Infinity));\n return table.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"minus = String.fromCodePoint(0x2212);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"slash = String.fromCodePoint(0x2044)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"sup = {\n let sup = [\"⁰\", \"¹\", \"²\", \"³\", \"⁴\", \"⁵\", \"⁶\", \"⁷\", \"⁸\", \"⁹\"];\n sup[\"-\"] = \"⁻\";\n sup[minus] = sup[\"-\"];\n return sup;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"sub = [\"₀\", \"₁\", \"₂\", \"₃\", \"₄\", \"₅\", \"₆\", \"₇\", \"₈\", \"₉\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"function fracPreset(n, d) {\n switch (d) {\n case 2: if (n == 1) { return \"½\"; }\n case 3: switch (n) {\n case 0: return \"↉\";\n case 1: return \"⅓\";\n case 2: return \"⅔\";\n }\n case 4: switch (n) {\n case 1: return \"¼\";\n case 3: return \"¾\";\n }\n case 5: switch (n) {\n case 1: return \"⅕\";\n case 2: return \"⅖\";\n case 3: return \"⅗\";\n case 4: return \"⅘\";\n }\n case 6: switch (n) {\n case 1: return \"⅙\";\n case 5: return \"⅚\";\n }\n case 7: if (n == 1) { return \"⅐\"; }\n case 8: switch (n) {\n case 1: return \"⅛\";\n case 3: return \"⅜\";\n case 5: return \"⅝\";\n case 7: return \"⅞\";\n }\n case 9: if (n == 1) { return \"⅑\"; }\n case 10: if (n == 1) { return \"⅒\"; }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"function severChildren(parent) {\n if (parent instanceof Text) { return [parent]; }\n let out = [...parent.childNodes];\n out.forEach(child => child.remove());\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"function maybeSeverChildren(parent, sever) { return sever ? severChildren(parent) : parent; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"function fromFrac(numerator, denominator) {\n denominator < 0 && (numerator *= -1, denominator *= -1);\n let f = [numerator, denominator];\n f.negative = numerator / denominator < 0;\n f.whole = Math.floor(Math.abs(numerator/denominator));\n f.negative && (f.whole *= -1);\n f.valueOf = function valueOf() {\n return numerator / denominator;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"function toFrac(exact, {maxDenominator = 4096}) {\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"