2b:null 2c:["$","title",null,{"children":"Venn Diagram Creator | Alec Barrett | Observable"}] 31:[] 2f:{"id":"3296f2f6a911166c","slug":"venn-diagram-creator","title":"Venn Diagram Creator","thumbnail":"ffc8fd2a6df2b07bd4d1d524ec66fe1afa1a5e33329e5317e1cb5d20faa6484f","access_level":"public","create_time":"$D2018-11-13T21:04:32.772Z","update_time":"$D2018-11-13T22:55:17.359Z","view_time":null,"first_public_time":"$D2018-11-13T22:55:20.030Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a22e826d0f3dc150","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":"starter_2024"},"version":153,"publish_version":153,"role":null,"authored":false,"authors":[{"type":"individual","id":"3efd68de913f5c25","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":null}],"members":[{"type":"individual","id":"3efd68de913f5c25","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"469c9c32a2765865","slug":"widget","title":"Widgets","owner":{"id":"a22e826d0f3dc150","login":"anbnyc","name":"Alec Barrett"}},"type":"notebook","body":{"title":"Venn Diagram Creator","cells":[{"id":0,"value":"md`# Venn Diagram Creator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":55,"value":"settings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":16,"value":"viewof canvas = context.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":8,"value":"viz = {\n return \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"