30:T48e,chart = { const result = primeFactorSets(numbers); const substractValues = [...result.sets.values()].map(set => [...set.values()].filter(m => result.substractSet.contains(m)).map(m => m.get("value"))) return d3 .select(DOM.svg(600, 400)) .call((svg) => { svg .datum([ { sets: [0], label: `(${numbers[0]}) ${substractValues[0].join(",")}`, size: numbers[0], fill: "orange" }, { sets: [1], label: `(${numbers[1]}) ${substractValues[1].join(",")}`, size: numbers[1], fill: "blue" }, { sets: [0,1], label: [...result.intersectionSet.values()].map((m) => m.get("value")).join(" , "), size: result.gcd == 1 ? 0 : result.gcd } ]) .call(venn.VennDiagram()); // Circle stylings svg .selectAll(".venn-circle path") .style("fill", (d, i) => d["fill"]) .style("fill-opacity", 0.25); // Label stylings svg.selectAll(".venn-circle text").style("fill", (d, i) => d["fill"]); }) .node(); }31:T450,{ const scale = (width - 64) / numbers[0]; const { w, h } = { w: scale * numbers[0], h: equalSize ? scale * numbers[1]: 300}; const plane = cartesianPlane(w, h, { axes: { x: { domain: [0, numbers[0]], ticks: numbers[0] / 10 }, y: { domain: [0, numbers[1]], ticks: numbers[1] / 10 } } }); const divider = selectedDivider != null ? selectedDivider : 1; const parts = { x: Math.round(numbers[0] / divider), y: Math.round(numbers[1] / divider) }; const obj = { x: { count: equalSize ? parts.x : divider }, y: { count: equalSize ? parts.y : divider } }; const rect = { width: equalSize ? divider : parts.x, height: equalSize ? divider : parts.y }; for (let i = 0; i != obj.x.count; i++) { for (let j = 0; j != obj.y.count; j++) { const x = Math.round(i * rect.width); const y = Math.round(j * rect.height); rectangle(plane, { ...rect, point: [x, y], color: { point: "black", fill: "blue" } }); }true } return plane.svg.node(); }32:T432,formatPrimeFactors = (numbers) => { const colors = ['red','green'] const result = primeFactorSets(numbers); const valuesWithColors = [...result.sets.entries()].map(([key, set]) => [ key, [...set.values()].map((m) => ({ value: m.get("value"), color: result.intersectionSet.contains(m) ? colors[0] : colors[1] })) ]); return html`${valuesWithColors.map( ([key, coloredPrimeFactors]) => html.fragment`

${key} = ${formatColoredPrimeFactor( coloredPrimeFactors )}

` )}

GCD = ${result.gcd} = ${formatColoredPrimeFactor( [...result.intersectionSet.values()].map((m) => ({ value: m.get("value"), color: colors[0] })) )}

LCD = ${result.lcd} = ${formatColoredPrimeFactor( [...result.intersectionSet.values()].map((m) => ({ value: m.get("value"), color: colors[0] })).concat([...result.substractSet.values()].map(m => ({ value: m.get("value"), color: colors[1] }))) )}

`; }33:T4e0,graphViz = (tree) => { if (tree instanceof BinaryTree) { let result = `digraph{`; let count = 0; let traverse = (root) => { if (root.node) { if (root.node.left.node) { //result += `${root.node.entry.key} [label=${root.node.entry.toString()}]\n`; result += `${root.node.left.node.entry.key} [label=${root.node.left.node.entry.toString()}]\n`; result += `<${root.node.entry.key}> -> <${root.node.left.node.entry.key}>;\n`; traverse(root.node.left) } else { // result += 'null'+(++count)+'[shape = none, label=""];\n'; // result += `< ${root.node.toString()} > -> ${'null'+count} [arrowhead="tee"];\n`; } if (root.node.right.node) { result += `${root.node.right.node.entry.key} [label=${root.node.right.node.entry.toString()}]\n`; result += `<${root.node.entry.key}> -> <${root.node.right.node.entry.key}>;\n`; traverse(root.node.right); } else { // result += 'null'+(++count)+'[shape = none, label=""];\n'; // result += `< ${root.node.toString()} > -> ${'null'+count} [arrowhead="tee"];\n`; } } } traverse (tree) return result + "}" } }34:[] 2e:{"title":"Prime numbers","cells":[{"id":0,"value":"# Prime numbers","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"viewof inputNumber = Inputs.range([2,1000],{step:1,value: 45})","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"c = formatPrimeFactor(inputNumber)","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"draw(tree)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2161,"value":"### Equally divide line","pinned":false,"hidden":false,"mode":"md"},{"id":1812,"value":"{\n const { w, h } = {\n w: width - 64,\n h: 100\n };\n\n const sets = primeFactors(inputNumber).map((n, i, a) => [\n n,\n multiple(a.slice(0, i + 1))\n ]);\n\n const plane = cartesianPlane(w, h, {\n axes: {\n x: { domain: [0, inputNumber] },\n y: { domain: [0, sets.length], ticks: 0 }\n }\n });\n\n const allPoints = [];\n for (let i = 0; i != sets.length; i++) {\n curves(\n plane,\n {\n func: (x) => i,\n domain: (x) => x >= 0\n },\n {\n color: d3.schemeSet1[i],\n step: 0.1,\n type: \"line\",\n inverse: false\n }\n );\n allPoints.push(\n ...Array.from(\n { length: Math.round(inputNumber / sets[i][1]) },\n (_, j) => ({ x: j * sets[i][1], y: i, color: d3.schemeSet1[i] })\n )\n );\n }\n\n points(plane, allPoints);\n\n return plane.svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"### Greatest Common Divisor (GCD) and Lowest Common Denominator (LCD)","pinned":false,"hidden":false,"mode":"md"},{"id":850,"value":"viewof numbers= {\n const range = [1,1000]\n const inputs = [\n Inputs.range([...range], {value: 150, step: 1}),\n Inputs.range([...range], {value: 60, step:1}), \n ];\n const view = html`

${inputs}`;\n view.value = mergeInputs(inputs, []);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"##### Using prime factorizations","pinned":false,"hidden":false,"mode":"md"},{"id":820,"value":"formatPrimeFactors(numbers)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2192,"value":"### Equally devide space","pinned":false,"hidden":false,"mode":"md"},{"id":1762,"value":"viewof equalSize = Inputs.toggle({label: \"Equal size length \", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1644,"value":"viewof selectedDivider = Inputs.select(new Map([1].concat(primeFactors(gcd(numbers))).map((v,i,a) => {\n const parts = a.slice(0,i+1);\n const result = multiple(parts)\n return [`${result} = ${parts.join(\" * \")}`,result]\n})), {label: 'Dividers:'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1556,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"##### Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":905,"value":"gcd = (numbers) => {\n let num=2, res=1;\n while(num <= Math.min(...numbers)){\n if (numbers.every(n => n % num === 0)){ \n res = num;\n }\n num++;\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2164,"value":"lcd = numbers => multiple(numbers) / gcd(numbers)","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"primeFactorsTree = (n) => {\n let factors = [];\n let divisor = 2;\n while (n >= 2){\n const remainder = n % divisor;\n if (remainder === 0){\n const res = n / divisor;\n factors.push([n,divisor,res]);\n n = res;\n }\n else {\n divisor++;\n }\n }\n return buildTree(factors,0, generatorFactory())\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"primeFactors = (n) => {\n const factors = [];\n let divisor = 2;\n while (n >= 2){\n const remainder = n % divisor;\n if (remainder === 0){\n factors.push(divisor);\n n = n / divisor;\n }\n else {\n divisor++;\n }\n }\n return factors\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"primeFactorSets = (numbers) => {\n const sets = new Map(\n numbers.map((n) => [\n n,\n Immutable.Set(\n primeFactors(n).map((value, i, values) =>\n Immutable.Map({\n value,\n count: i - values.findIndex((v) => v === value)\n })\n )\n )\n ])\n );\n\n const intersectionSet = Immutable.Set.intersect([...sets.values()]);\n const substractSets = new Map(\n [...sets.entries()].map(([key, set]) => [\n key,\n set.subtract(intersectionSet)\n ])\n );\n\n const gcd = multiple(\n [...intersectionSet.values()].map((m) => m.get(\"value\"))\n );\n const substractSet = Immutable.Set.union([...substractSets.values()]);\n const lcd =\n gcd * multiple([...substractSet.values()].map((m) => m.get(\"value\")));\n return {\n gcd,\n lcd,\n intersectionSet,\n substractSet,\n sets\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1296,"value":"multiple = numbers => numbers.reduce((out,value) => out *= value,1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1984,"value":"sum = (numbers) => numbers.reduce((out,v) => out+=v,0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"formatPrimeFactor = inputNumber => html`${inputNumber} = ${primeFactors(inputNumber).join(\" * \")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"formatColoredPrimeFactor = (numbers) => numbers.map((n,i) => html.fragment`${i === 0 ? '':' * '}${n.value}`)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"function buildTree(factors, i,gen) {\n const current = factors[i];\n const next = factors[i + 1];\n return BT(\n new Entry(i === 0 ? current[0] : gen.next().value, current[0]),\n BT(new Entry(gen.next().value, current[1]), BT(), BT()),\n next != null\n ? buildTree(factors, i + 1, gen)\n : BT(new Entry(gen.next().value, current[2]), BT(), BT())\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"class Entry {\n constructor(key, value) {\n this.key = key;\n this.value = value;\n }\n toString() {\n return this.value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2094,"value":"generatorFactory = () => { \n function* nextId() {\n let i = 1000;\n while (true) {\n yield i++;\n }\n }\n let gen = nextId();\n return gen;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"tree = primeFactorsTree(inputNumber)","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"draw = (tree) => dot`${graphViz(tree)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"import {BT, BinaryTree} from \"@esperanc/binary-search-trees\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"dot = require(\"@observablehq/graphviz@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"import {mergeInputs} from \"@mootari/observablehq-inputs-feature-73\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"venn = require('venn.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"Immutable = require(\"immutable\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"value":"import {cartesianPlane, segment, circle, square, rectangle, curves,lines, annotation, points, triangle} from \"@fengyfei/math-visualization\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}