2e:null 2f:["$","title",null,{"children":"Scale Bar Fraction | Michael Bricknell | Observable"}] 34:T440,{ const labels = [[0,0], [1,4], [1,2], [3,4], [1,1]] const scale = d3.scaleLinear() .range([10, width - 32]) .domain([0,1]).nice() const svg = d3.create("svg") .attr("viewBox", [0, -4, width, 36]) svg.append("g") .call(d3.axisBottom(scale).tickValues([0, 0.25, 0.5, 0.75, 1])) svg.selectAll('text').each(function(d,i){ d3.select(this.parentNode) .append('foreignObject') .attr('x',-4) .attr('y',6) .attr('width', 20) .attr('height', 20) .append('xhtml:div') .append('div') .html(returnFractionHTML(labels[i][0],labels[i][1])) d3.select(this).remove() }) // add a cicle to the scale svg.append("circle").attr('r', 4) .data([2/3]) .style('fill', 'red') .attr('cx', function(d) { return scale(d); }); // add multiple cicles to the scale svg.selectAll("circles") .data([1/3, 5/6]) .enter() .append('circle') .attr('r', 4) .style('fill', 'green') .attr('cx', function(d) { return scale(d); }) return svg.node(); }35:T563,html`Let's not use a foreignObject. The SVG has a different syntax to support the superscript and subscript.
They use a tspan with a baseline-shift="super" or baseline-shift="sub"
strings ${returnFractionSVG('1/4')} , ${returnFractionSVG('1/3')} , ${returnFractionSVG('1/2')},
divison ${returnFractionSVG(1/4)} , ${returnFractionSVG(1/3)} , ${returnFractionSVG(1/2)},
decimal as a string ${returnFractionSVG('0.25')} , ${returnFractionSVG('0.333')} , ${returnFractionSVG('0.5')},
decimal as a float ${returnFractionSVG(0.25)} , ${returnFractionSVG(0.333)} , ${returnFractionSVG(0.25)}

whole fractions ${returnFractionSVG(1.25)} , ${returnFractionSVG(5.678)} , ${returnFractionSVG(5.75)}

only want the fraction part of a number? pass the remainder parameter 1
remainder only ${returnFractionSVG(1.25, 1)} , ${returnFractionSVG(5.678, 1)} , ${returnFractionSVG(5.75, 1)}

Working with fractions can be tricky, but the above works as JavaScript is intended to work. So we get floating points and ugly looking numbers.

Since I only want to display fractions and not calculate fractions I won't go into detail, but please refer to this link as a better explainer https://floating-point-gui.de/basic/ `36:[] 32:{"id":"9872e8353592ac6d","slug":"scale-bar-fraction","title":"Scale Bar Fraction","thumbnail":"6c5c923e05f4bf3dedcd0f01dad8002fd4f9dc4e4bdd0bee39034f19fcded1c0","access_level":"public","create_time":"$D2021-04-22T23:57:05.052Z","update_time":"$D2021-04-23T13:25:55.269Z","view_time":null,"first_public_time":"$D2021-04-23T13:26:30.048Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":571,"publish_version":571,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Scale Bar Fraction","cells":[{"id":0,"value":"md`# Scale Bar Fraction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"html` How to display fractions along an axis line using d3.

This method is not intended to solve for rounding errors or mathmatical operations involving fractions.
This in only intended to display fractions and not calculate fractions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"html`Existing methods of displaying fractions is limited and are boring and lame.
\n boring HTML text 1/4, 1/2, 3/4
\n and
\n lame HTML 4 Entity ¼ ½ ¾`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"html `Or we can write our own using html tags with the fraction slash html entity &frasl; with the ^sup-erscript and _sub-script tags.
\nI've kept this as simple as possible to include only strings or integers for the numerator and denominator.
\n${returnFractionHTML(1,4)} , ${returnFractionHTML(1,2)} , ${returnFractionHTML(3,4)}
\n${returnFractionHTML('1','4')} , ${returnFractionHTML('1','2')} , ${returnFractionHTML('3','4')}
\n1${returnFractionHTML(1,4)} , 1${returnFractionHTML(1,2)} , 1${returnFractionHTML(3,4)}
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function returnFractionHTML (numerator, denominator) {\n if (numerator === denominator) {\n return numerator\n } else {\n return `^${numerator}⁄_{${denominator}}`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"html`However this is not ideal in using with d3 as we would be embeding an html element into an SVG element. Can it be done?
We can, but should we?` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function returnFractionSVG (num, remainder) {\n let n = ''\n let d = ''\n let f = ''\n \n if (num.toString().indexOf('/') > -1) {\n n = num.split('/')[0]\n d = num.split('/')[1]\n f = new Fraction((n/d))\n }\n \n //if decimal or fraction using division\n if (num.toString().indexOf('.') > -1) {\n f = new Fraction(+num)\n n = f.numerator\n d = f.denominator\n }\n \n if (typeof num === 'number') {\n f = new Fraction(num.toString())\n n = f.numerator\n d = f.denominator\n }\n \n if (remainder === 1 ) {\n f = new Fraction(num % remainder)\n n = f.numerator\n d = f.denominator\n }\n \n if (n === 0) {\n return `0`\n }\n else if (n === 1 && d === 1) {\n return `1`\n } else {\n return `${n}⁄${d}`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"{ \n const scale = d3.scaleLinear()\n .range([10, width - 32])\n .domain([0,1]).nice()\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, -4, width, 36])\n\n svg.append(\"g\")\n .call(d3.axisBottom(scale)\n .tickValues([0, 1/16, 2/16, 3/16, 4/16, 5/16, 6/16, 7/16, 8/16, 9/16, 10/16, 11/16, 12/16, 13/16, 14/16, 15/16, 1]))\n\n svg.selectAll('text').each(function(d,i){\n d3.select(this).html(returnFractionSVG(d)).attr('transform','translate(0,5)')\n })\n\n // add a cicle to the scale\n svg.append(\"circle\").attr('r', 4)\n .data([1 / 2])\n .style('fill', 'red')\n .attr('cx', function(d) {\n\t\treturn scale(d);\n\t});\n // add multiple cicles to the scale\n svg.selectAll(\"circles\")\n .data([1/8, 13/16])\n .enter()\n .append('circle')\n .attr('r', 4)\n .style('fill', 'green')\n .attr('cx', function(d) {\n\t\t return scale(d);\n\t })\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"html`${returnFractionSVG('1.5')}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"html`${returnFractionSVG('-1.5')}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"html`${returnFractionSVG('1/4')}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"html`${returnFractionSVG(1/4)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"html`${returnFractionSVG('4/6')}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"html`${returnFractionSVG(2/3)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"(1/3) * 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"(2/3) * 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"new Fraction(2/3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"weird = new BigNumber(2/3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"weird.toFraction()[0].toNumber()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"weird.toFraction()[1].toNumber()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Fraction = (await require('fractional@1.0.0/index.js').catch(() => window[\"Fraction\"]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"BigNumber = require('bignumber.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"