30:[] 2e:{"title":"Venn Diagram Creator","cells":[{"id":0,"value":"md`# Venn Diagram Creator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`Using math from: [http://mathworld.wolfram.com/Circle-CircleIntersection.html](http://mathworld.wolfram.com/Circle-CircleIntersection.html)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof settings = {\n const div = html`

\n R1
\n R2
\n R3

\n D2
\n D3 \n

`\n const qs = id => +div.querySelector('#'+id).value\n div.value = {\n r1: qs('r1'),\n r2: qs('r2'),\n r3: qs('r3'),\n d2: qs('d2'),\n d3: qs('d3'),\n }\n div.oninput = e => {\n div.value[e.target.id] = +e.target.value\n }\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"settings","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"data = {\n return [\n { x: 200, y: 150, radius: settings.r1, color: 'green' }, \n { x: 200 + settings.d2, y: 150, radius: settings.r2, color: 'purple' },\n { x: 200 + 0.5*settings.d2, y: 150 + settings.d3, radius: settings.r3, color: 'orange' },\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"viewof canvas = context.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"{\n const sq = e => Math.pow(e, 2)\n const a = r => Math.PI * sq(r)\n const { r1, r2, r3, d2, d3 } = settings\n const a1 = a(r1)\n const a2 = a(r2)\n const a3 = a(r3)\n const ao = sq(r2)*Math.acos((sq(d2) + sq(r2) - sq(r1))/(2*d2*r2)) + \n sq(r1)*Math.acos((sq(d2) + sq(r1) - sq(r2))/(2*d2*r1)) - \n 0.5*Math.sqrt((r2 + r1 - d2)*(d2 + r2 - r1)*(d2 - r2 + r1)*(d2 + r2 + r1))\n const latex = tex`A_1 = ${Math.round(a1)}\n\\newline\nA_2 = ${Math.round(a2)}\n\\newline\nA_3 = ${Math.round(a3)}\n\\\\~\\\\\n\n\\frac{A_1}{A_2} = ${Math.round(1000*a1/a2)/10}\\%\n\\newline\n\\frac{A_1}{A_3} = ${Math.round(1000*a1/a3)/10}\\%\n\\newline\n\\frac{A_2}{A_3} = ${Math.round(1000*a2/a3)/10}\\%\n\\\\~\\\\\nO_{12} = ${Math.round(ao)} = ${Math.round(100*ao/a1)}\\% * A_1 = ${Math.round(100*ao/a2)}\\% * A_2\n\\newline\nO_{13} ...\n\\newline\nO_{23} ...\n\\newline\nO_{123} ...`\n return latex\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"context = {\n let context = DOM.context2d(600, 600); \n context.canvas.width = 600\n context.canvas.height = 500\n context.globalAlpha = 0.7\n \n data.map(d => {\n context.beginPath()\n context.arc(d.x, d.y, d.radius, 0, Math.PI*2, false)\n context.fillStyle = d.color\n context.fill()\n })\n \n context.canvas.id = \"canvas\"\n return context;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viz = {\n return \n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}