2b:null 2c:["$","title",null,{"children":"Fractions | Khuyen Tran | Observable"}] 31:T6d3,drawFraction = ([numerator, denominator], type = "circle") => { const { w, h } = { w: width - 64, h: 80 }; const plane = cartesianPlane(w, h, { axes: { x: { domain: [0, scale * 20], ticks: 20 }, y: { domain: [(type === "rect" ? 0 : -1 ) * scale, 1 * scale], ticks: 1 } } }); const offset = 0.5; const absNum = Math.abs(numerator); const absDenom = Math.abs(denominator); const wholeNumber = Math.floor(absNum / absDenom); const remainder = absNum % absDenom; for (let i = 0; i !== wholeNumber; i++) { const fraction = { numerator: absDenom, denominator }; if (type === "square") { drawFractionSquare(plane, { ...fraction, point: [i, 0] }); } else if (type === "rect") { drawFractionRect(plane, { ...fraction, point: [i, 0] }); }else if (type === "triangle") { drawFractionTriangle(plane, { ...fraction, point: [i, 0] }); } else { drawFractionCircle(plane, { ...fraction, center: [offset + i, 0] }); } } if (remainder !== 0) { const fraction = { numerator: remainder, denominator }; if (type === "square") { drawFractionSquare(plane, { ...fraction, point: [wholeNumber, 0] }); } else if (type === "rect") { drawFractionRect(plane, { ...fraction, point: [wholeNumber, 0] }); } else if (type === "triangle") { drawFractionTriangle(plane, { ...fraction, point: [wholeNumber, 0] }); } else { drawFractionCircle(plane, { ...fraction, center: [offset + wholeNumber, 0] }); } } return plane.svg.node(); }32:[] 2f:{"id":"39bfeffc4727a3e7","slug":"fractions","title":"Fractions","thumbnail":"a60187a09430abff6d6cb12c8f236437bb6ffb9416888b9fbd542f4a1a2f0528","access_level":"public","create_time":"$D2021-10-18T22:38:37.990Z","update_time":"$D2021-10-18T22:38:37.990Z","view_time":null,"first_public_time":"$D2021-10-18T22:39:17.319Z","fork":{"id":"211872859485cde1","slug":"fractions","title":"Fractions","owner":{"id":"4e8eb6188a86a7df","login":"rsamec","name":"Roman Samec"}},"stars":1,"starred":false,"owner":{"type":"team","id":"eba67ba19f64a52e","login":"khuyentran1401","name":"Khuyen Tran","avatar_url":"https://avatars-next.observableusercontent.com/9ed7804a0392bdec88be148f6d897842040d16d18f13797a76f0cb2c2c482638","tier":"starter_2024"},"version":1686,"publish_version":1686,"role":null,"authored":false,"authors":[{"type":"individual","id":"2b8c8acd73dd8a4e","login":"khuyentran1401","name":"Khuyen Tran","avatar_url":"https://avatars-next.observableusercontent.com/9ed7804a0392bdec88be148f6d897842040d16d18f13797a76f0cb2c2c482638","tier":null}],"members":[{"type":"individual","id":"2b8c8acd73dd8a4e","login":"khuyentran1401","name":"Khuyen Tran","avatar_url":"https://avatars-next.observableusercontent.com/9ed7804a0392bdec88be148f6d897842040d16d18f13797a76f0cb2c2c482638","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Fractions","cells":[{"id":0,"value":"# Fractions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":846,"value":"md`## Text and visual represenation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"viewof numerator = Inputs.range([0, 100], {step: 1, value: 10, label:\"Numerator\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"viewof denominator = Inputs.range([1, 10], {step: 1, value: 3, label:\"Denominator\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":861,"value":"fraction([numerator,denominator], {type:'circle',showGraphics:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":969,"value":"fraction([numerator,denominator],{type:'rect',showGraphics:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1220,"value":"fraction([numerator,denominator],{showGraphics:true, type:'triangle'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1131,"value":"fraction([numerator,denominator],{showGraphics:true, type:'square'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"md`### Fraction operation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1654,"value":"viewof secondNumerator = Inputs.range([1, 100], {step: 1, value: 10, label:\"Numerator\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1664,"value":"viewof secondDenominator = Inputs.range([1, 10], {step: 1, value: 3, label:\"Denominator\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":833,"value":"fractionOperation([numerator,denominator],[secondNumerator,secondDenominator])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1293,"value":"fractionOperation([numerator,denominator],[secondNumerator,secondDenominator], {type:'minus', visualize:false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1629,"value":"fractionOperation([numerator,denominator],[secondNumerator,secondDenominator], {type:'multiple'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1647,"value":"fractionOperation([numerator,denominator],[secondNumerator,secondDenominator], {type:'divide'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1583,"value":"md`#### Fraction utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"fractionOperation = (\n first,\n second,\n { type = \"plus\", visualize = false } = {}\n) => {\n const result = fracOperation(first, second, { operation: type });\n return html`

\n ${formatFraction(first)} ${type === \"minus\" ? \"-\" : type===\"multiple\"?\"*\": type===\"divide\"?\":\": \"+\"} \n ${formatFraction(second)} = ${formatFraction(result)}\n

\n ${\n visualize\n ? html.fragment`\n ${fraction(first, { showGraphics: true })}\n ${fraction(second, { showGraphics: true })}\n

\n ${fraction(result, { showGraphics: true })}`\n : \"\"\n }\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":686,"value":"sumFrac = (a, b) => {\n const aDenom = a[1], aNumer = a[0];\n const bDenom = b[1], bNumer = b[0];\n let resDenom = aDenom * bDenom;\n let resNumer = (aDenom*bNumer) + (bDenom*aNumer);\n const greatestDivisor = gcd(resDenom, resNumer);\n return [resNumer/greatestDivisor, resDenom/greatestDivisor];\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1016,"value":"fracOperation = (a, b, { operation = \"plus\" } = {}) => {\n const aDenom = a[1],\n aNumer = a[0];\n const bDenom = b[1],\n bNumer = b[0];\n let resDenom = aDenom * bDenom;\n let resNumer = 0;\n if (operation === \"minus\") {\n resNumer = bDenom * aNumer - aDenom * bNumer;\n } else if (operation === \"multiple\") {\n resNumer = aNumer * bNumer;\n resDenom = aDenom * bDenom;\n } else if (operation === \"divide\") {\n resNumer = aNumer * bDenom;\n resDenom = bNumer * aDenom;\n } else {\n resNumer = bDenom * aNumer + aDenom * bNumer;\n }\n const greatestDivisor = gcd(resDenom, Math.abs(resNumer));\n return [resNumer / greatestDivisor, resDenom / greatestDivisor];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":682,"value":"gcd = (a, b) => {\n let num = 2, res = 1;\n while(num <= Math.min(a, b)){\n if(a % num === 0 && b % num === 0){\n res = num;\n };\n num++;\n };\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":528,"value":"formatFraction = ([numerator, denominator]) => {\n const isNegative = numerator * denominator < 0;\n const absNumerator = Math.abs(numerator);\n const absDenominator = Math.abs(denominator);\n let wholeNumbers = Math.floor(absNumerator / absDenominator);\n const remainder = absNumerator % absDenominator;\n wholeNumbers = isNegative ? -1 * wholeNumbers : wholeNumbers;\n if (remainder === 0) return wholeNumbers;\n return tex`${\n wholeNumbers === 0 ? (isNegative ? \"-\" : \"\") : wholeNumbers\n } \\frac{${remainder}}{${absDenominator}}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":643,"value":"fraction = ([numerator, denominator], {type ='circle', showGraphics=false} = {}) => html`

${formatFraction([numerator,denominator])}${showGraphics?drawFraction([numerator,denominator], type):''}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1589,"value":"md`#### Fraction visualization utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":616,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1209,"value":"drawFractionTriangle = (plane, { numerator, denominator, point }) => {\n triangle(plane, {\n points: [\n [point[0], point[1]],\n [point[0] + 1, point[1]],\n [point[0] + 0.5, point[1] + 1]\n ],\n color: {\n fill: \"lightgray\"\n }\n });\n triangle(plane, {\n points: [\n [point[0], point[1]],\n [point[0] + numerator * (1/ denominator), point[1]],\n [point[0] + 0.5, point[1] + 1]\n ],\n color: {\n fill: \"red\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1070,"value":"drawFractionSquare = (plane, { numerator, denominator, point }) => {\n square(plane, {\n point: [point[0], point[1]],\n length: 1,\n color: {\n fill:'lightgray'\n }\n });\n const size = Math.sqrt((1 / denominator) * numerator);\n square(plane, {\n point: [point[0], point[1]],\n length: size,\n color: {\n fill: \"red\",\n opacity:1\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"drawFractionCircle = (plane, {numerator,denominator, center}) => {\n for (let i = 0; i !== denominator; i++) {\n circle(plane, {\n center,\n radius: 0.4,\n startAngle: (Math.PI * 2 * i) / denominator,\n endAngle: (Math.PI * 2 * (i + 1)) / denominator,\n fill: i < numerator ? \"red\" : \"lightgray\",\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"drawFractionRect = (plane, { numerator, denominator, point }) => {\n for (let i = 0; i !== denominator; i++) {\n rectangle(plane, {\n point: [point[0] + i * (1 / denominator), point[1]],\n width: 1 / denominator,\n height: 1,\n color: {\n fill: i < numerator ? \"red\" : \"lightgray\",\n stroke: 'black'\n }\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1259,"value":"viewof scale = Inputs.range([0.5,2], {step:0.1, value:1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"range = (count) => Array.from({length:count},(v,i) => i)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {cartesianPlane, segment, circle, square, rectangle, curves, annotation, triangle} from \"@fengyfei/math-visualization\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"import {verticalStack, horizontalStack, wrappableStack} from \"@rsamec/stacks\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1530,"value":"import {html} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"