2a:null 2b:["$","title",null,{"children":"Ratio | Roman Samec | Observable"}] 30:[] 2e:{"id":"f9b30c051b1449fc","slug":"ratio","title":"Ratio","thumbnail":"84ad8eabed3ef62193d165c5dc1d46cdb203bc50be7b5ac05f2193bc04d68892","access_level":"public","create_time":"$D2021-12-12T15:21:12.486Z","update_time":"$D2022-02-12T15:45:10.427Z","view_time":null,"first_public_time":"$D2021-12-12T17:48:25.735Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4e8eb6188a86a7df","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":"starter_2024"},"version":1015,"publish_version":1015,"role":null,"authored":false,"authors":[{"type":"individual","id":"29741195570dd799","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":null}],"members":[{"type":"individual","id":"29741195570dd799","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Ratio","cells":[{"id":0,"value":"# Ratio","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":100,"value":"viewof inputRatio = {\n const range = [1,100]\n const inputs = [\n Inputs.range(range, {value: 2, step:1, label:'Blue'}),\n Inputs.range(range, {value: 4, step:1, label:\"Orange\"}), \n Inputs.range(range, {value: 3, step:1, label:\"Green\"}), \n ];\n const view = html`

${inputs.map((input,i) => html.fragment`

${input}

`)}

`;\n view.value = mergeInputs(inputs, []);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":722,"value":"md`The ratio among colors is expressed **${formatRatio(inputRatio)}**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":733,"value":"{\n const whole = sum(inputRatio);\n return md`You can use fractions to express each part of the whole **${formatFraction([inputRatio[0],whole])}** : **${formatFraction([inputRatio[1],whole])}** : **${formatFraction([inputRatio[2],whole])}**`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":584,"value":"md`## Devide the whole into parts using the ratio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":749,"value":"md`#### Given the size of the whole you can compute the size of the part.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":640,"value":"ratioVectorImage = {\n const { w, h } = { w: width/2 - 70, h: 300 };\n const plane = cartesianPlane(w, h, {\n axes: {\n y: { domain: [-4, 4] },\n x: { domain: [-4, 4] }\n }\n });\n \n drawCircle(plane, inputRatio, [0, 0], 2);\n return plane.svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":946,"value":"md`compute the area of the circle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":812,"value":"areaOfTheWhole = Math.PI * Math.pow(2,2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":751,"value":"{\n const areaOfTheWhole = Math.PI * Math.pow(2,2);\n const whole = sum(inputRatio);\n const sizeOfOnePart = 1/ whole * areaOfTheWhole;\n\n return md`compute the area of one part of the whole ${formatFraction([1,whole])} * ${formatNumber(areaOfTheWhole)} = ${formatNumber(sizeOfOnePart)}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":830,"value":"md`compute the area of parts corresponding to each ratio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":769,"value":"{\n const whole = sum(inputRatio);\n const sizeOfOnePart = (1 / whole) * areaOfTheWhole;\n return html`

${inputRatio.map(\n (ratio, i) =>\n html.fragment`

${ratio} * ${formatNumber(sizeOfOnePart)} = ${formatNumber(\n sizeOfOnePart * ratio\n )} , ${formatFraction([ratio, sum(inputRatio)])} * ${formatNumber(\n areaOfTheWhole\n )} = ${formatNumber((ratio / sum(inputRatio)) * areaOfTheWhole)}

`\n )}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":543,"value":"md`## Change using the same ratio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"viewof inputScale = Inputs.range([0,3],{value:3, step:0.1, label: 'Scale factor'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":529,"value":"md`Circle with radius **2** can be changed by scale factor **${inputScale}** to another circle with radius **${inputScale * 2} = ${inputScale} * 2**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"{\n const { w, h } = { w: 300, h: 300 };\n const plane = () => cartesianPlane(w, h, {\n axes: {\n y: { domain: [-10, 10] },\n x: { domain: [-10, 10] }\n }\n });\n const plane1 = plane();\n drawCircle(plane1, inputRatio, [0, 0], 2);\n const plane2 = plane(); \n drawCircle(plane2, inputRatio, [0, 0], 2 * inputScale);\n \n return hStack({gap:'small', wrap:true},plane1.svg.node(), plane2.svg.node())\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":571,"value":"md`Tube with length **2** can be changed by scale factor **${inputScale}** to another tube with length **${inputScale * 2} = ${inputScale} * 2**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"{\n const { w, h } = { w:300, h: 100 };\n const plane = () =>\n cartesianPlane(w, h, {\n axes: {\n x: { domain: [0, 10] },\n y: { domain: [0, 1], ticks: 1 }\n }\n });\n const plane1 = plane();\n drawRectangle(plane1, inputRatio, [0, 0], 2, 1);\n const plane2 = plane();\n drawRectangle(plane2, inputRatio, [0, 0], 2 * inputScale, 1);\n\n return hStack({gap:'small', wrap:true},plane1.svg.node(), plane2.svg.node())\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":575,"value":"md`Triangle with base length **2** can be changed by scale factor **${inputScale}** to another triangle with base length **${inputScale * 2} = ${inputScale} * 2**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":384,"value":"{\n const { w, h } = { w: 300, h: 200 };\n const plane = () =>\n cartesianPlane(w, h, {\n axes: {\n x: { domain: [0, 10] },\n y: { domain: [0, 6], ticks: 5 }\n }\n });\n const plane1 = plane();\n drawTriangle(plane1, inputRatio, [0, 0], 2, 1);\n\n const plane2 = plane();\n drawTriangle(plane2, inputRatio, [0, 0], 2 * inputScale, 1);\n\n return hStack({gap:'small', wrap:true},plane1.svg.node(), plane2.svg.node())\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":990,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":840,"value":"## Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":842,"value":"md`How much is ${formatFraction([1,2])} of 50?` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":862,"value":"md`It depends do you mean? What does it mean ${formatFraction([1,2])}? What do you want to know how much value is it or how much % is it?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":853,"value":"md`It can be 50% of 50 = 25. You answer how much value/size/number is it?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":855,"value":"md`It can be 0.5 of 50 = 1%. You answer how much % is it?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":963,"value":"md`### Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":968,"value":"hStack = (options={}, ...elements) => {\n console.log(elements.length);\n return html`

${elements.map(el => el)}

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"drawTriangle = (plane, ratios, point, width) => {\n const denominator = sum(ratios);\n const colors = ratiosToColors(ratios);\n for (let i = 0; i !== denominator; i++) {\n const x = point[0] + i * (1 / denominator)* width;\n triangle(plane, {\n points: [\n [point[0] + width /2 , point[1] + width],\n [x , point[1]],\n [x + width/denominator, point[1]]\n ],\n color: {\n fill: colors[i]\n }\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"drawCircle = (plane, ratios, point, radius) => {\n const denominator = sum(ratios)\n const colors = ratiosToColors(ratios)\n for (let i = 0; i !== denominator; i++) { \n circle(plane, {\n center: point,\n radius,\n startAngle: (Math.PI * 2 * i) / denominator,\n endAngle: (Math.PI * 2 * (i + 1)) / denominator,\n fill: colors[i]\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"drawRectangle = (plane, ratios, point, width, height) => {\n const denominator = sum(ratios);\n const colors = ratiosToColors(ratios);\n for (let i = 0; i !== denominator; i++) {\n rectangle(plane, {\n point: [point[0] + i * (1 / denominator) * width, point[1]],\n width: width / denominator,\n height,\n color: {\n fill: colors[i],\n stroke: \"black\"\n }\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":595,"value":"formatRatio = ratios => ratios.join(':')\n //html`

${ratios.map((ratio,i) => html.fragment`${ratio}`)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"formatNumber = (input, decimals) => input.toLocaleString(\"en-US\", { maximumFractionDigits: decimals, minimumFractionDigits: 0 });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"ratiosToColors = ratios => ratios.flatMap((ratio,i) => [...Array(ratio).keys()].map(_ => d3.schemeTableau10[i]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"sum = numbers => numbers.reduce((out,n) => out += n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"import {mergeInputs} from \"@mootari/observablehq-inputs-feature-73\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"import {html} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"import {cartesianPlane, rectangle, triangle, circle} from \"@rsamec/math-visualization\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"import {horizontalStack, verticalStack} from \"@rsamec/stacks\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":691,"value":"import {formatFraction} from \"@rsamec/fractions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"