2b:null 2c:["$","title",null,{"children":"Proportional Venn Diagram | Lao | Observable"}] 31:T983,viewof element1 = { let colorA = '#31BF93' let colorB = '#A357B2' let max = 200 const form = html` `; let min form.oninput = () => { min = Math.min(form.AB_n.valueAsNumber, form.A_n.valueAsNumber, form.B_n.valueAsNumber) form.AB_n.value = min form.AB_slide.value = min return form.value = ({ A: form.A_n.valueAsNumber, color_A: form.A_c.value, B: form.B_n.valueAsNumber, color_B: form.B_c.value, AB: form.AB_n.valueAsNumber, max: max, }); } form.oninput(); return form; } 32:T1132,distanceRange = { const w = Math.min(625, width) const h = w/3.5 const padding = {left:10, right:10, top:10, bottom:10} let r1 = Math.sqrt(element1.A/Math.PI) let r2 = Math.sqrt(element1.B/Math.PI) let min = Math.abs(r1-r2) let max = r1+r2 let d = 1 // scale let xScale = d3.scaleLinear([ 0, Math.max(r1, r2)*3 ], [0, w/4]) let yScale = d3.scaleLinear([ 0, 1 ], [h , 0]); // canvas let svg = d3 .select(DOM.svg(w, h)) let minA, minB if(r1 > r2){ minA = 0; minB = min;} else{ minA = min; minB = 0;} let circleData=[ {name:'A', r: xScale(r1), n: element1.A, cx: .09*w - xScale(minA), cy:yScale(.6), color:element1.color_A}, {name:'B', r: xScale(r2), n: element1.B, cx: .09*w + xScale(minB), cy:yScale(.6), color:element1.color_B}, {name:'A', r: xScale(r1), n: element1.A, cx: .44*w - xScale(min+(max-min)*d)/2, cy:yScale(.6), color:element1.color_A}, {name:'B', r: xScale(r2), n: element1.B, cx: .44*w + xScale(min+(max-min)*d)/2, cy:yScale(.6), color:element1.color_B}, {name:'A', r: xScale(r1), n: element1.A, cx: .66*w + xScale(r1), cy:yScale(.6), color:element1.color_A}, {name:'B', r: xScale(r2), n: element1.B, cx: .66*w + xScale(2*r1+r2), cy:yScale(.6), color:element1.color_B}, ] let lineData, x0, x1, x2, x3, x4, x5, y0, y1, y2, y3, y4, y5, yB let a = 3 let updateData = () => { x0 = circleData[0].cx x1 = circleData[1].cx x2 = circleData[2].cx x3 = circleData[3].cx x4 = circleData[4].cx x5 = circleData[5].cx y0 = circleData[0].cy y1 = circleData[1].cy y2 = circleData[2].cy y3 = circleData[3].cy y4 = circleData[4].cy y5 = circleData[5].cy yB = yScale(.2) lineData = [] lineData.push( {line: [[x0, y0], [x0, yB]], color:'black'}, {line: [[x1, y1], [x1, yB]], color:'black'}, {line: [[x2, y2], [x2, yB]], color:'black'}, {line: [[x3, y3], [x3, yB]], color:'black'}, {line: [[x4, y4], [x4, yB]], color:'black'}, {line: [[x5, y5], [x5, yB]], color:'black'}, {line: [[x0+1, yB-2*a], [x0+1+a, yB-3*a], [x0+1, yB-2*a], [x0+1+a, yB-a], [x0+1, yB-2*a], [x1-1, yB-2*a], [x1-1-a, yB-3*a], [x1-1, yB-2*a], [x1-1-a, yB-a], [x1-1, yB-2*a], ], color:'black'}, {line: [[x2+1, yB-2*a], [x2+1+a, yB-3*a], [x2+1, yB-2*a], [x2+1+a, yB-a], [x2+1, yB-2*a], [x3-1, yB-2*a], [x3-1-a, yB-3*a], [x3-1, yB-2*a], [x3-1-a, yB-a], [x3-1, yB-2*a], ], color:'black'}, {line: [[x4+1, yB-2*a], [x4+1+a, yB-3*a], [x4+1, yB-2*a], [x4+1+a, yB-a], [x4+1, yB-2*a], [x5-1, yB-2*a], [x5-1-a, yB-3*a], [x5-1, yB-2*a], [x5-1-a, yB-a], [x5-1, yB-2*a], ], color:'black'}, ) } updateData() let textData = [] textData.push( {text:'| r₁ − r₂ |', x:(x0+x1)/2, y:yB+20}, {text:'≤', x:((x0+x1)/2+(x2+x3)/2)/2, y:yB+20}, {text:'d', x:(x2+x3)/2, y:yB+20}, {text:'≤', x:((x2+x3)/2+(x4+x5)/2)/2, y:yB+20}, {text:'r₁ + r₂', x:(x4+x5)/2, y:yB+20} ) let circles = svg .selectAll("circle") .data(circleData) .enter() .append("circle") .attr("cx", (d) => d.cx) .attr("cy", d => d.cy) .attr("r", (d) => d.r ) .attr("fill", (d) => d.color ) .style("mix-blend-mode", "multiply" ) let line = d3 .line() .x(d => d[0]) .y(d => d[1]) let path = svg.selectAll("line") .data(lineData) .enter() .append('path') .attr('fill', 'none') .attr('stroke', d => d.color) .attr('stroke-linejoin','round') .datum(d => d.line) .attr('d', line); const text = svg .selectAll("label") .data(textData) .enter() .append("text") .text(d => d.text) .attr("x", d => d.x) .attr("y", d => d.y ) .attr("text-anchor", "middle") .style("font-size", "14px") .attr("font-family", "Arial") .attr("font-weight",400) .attr('fill', 'black') while(true){ d = (d+1)%2 circleData[2].cx = .44*w - xScale(min+(max-min)*d)/2 circleData[3].cx = .44*w + xScale(min+(max-min)*d)/2 circles .data(circleData) .transition().duration(4000).ease(d3.easeQuadInOut) .attr("cx", (d) => d.cx) updateData() path .data(lineData) .datum(d => d.line) .transition().duration(4000).ease(d3.easeQuadInOut) .attr('d', line) yield svg.node(); await Promises.delay(4000) } }33:T4da,We need to solve for ${tex`d`} given the overlapping area, but this is too hard to do analytically, so instead let's make an algorithm that converges to the right answer. Notice that along this range, moving the circles apart decreases the overlapping area, and moving the circles together increases overlapping area. This means the intersected area with respect to distance is strictly decreasing (injective). The simplest approximation of a strictly decreasing function is a line, which isn't too far off from the intersected area function if you graph it. Solving for ${tex`x`} given a ${tex`y`}, the linear equation between two points is: > ${tex` x = \dfrac{x_2-x_1}{y_2-y_1}(y-y_1)+x_1`} The domain and range can be the original approximation: > ${tex` x_1 = |r_1 - r_2|`}
> ${tex` x_2 = \space r_1 + r_2`}

> ${tex` y_1 = \pi \cdot \min(r_1, r_2 )^2 `}
> ${tex` y_2 = 0`}
The graph of ${tex`area(d, r_1, r_2)`} is sigmoid, so the first linear approximation only gets in the right ballpark. We need an iterative process to refine our guess. If the guess is too low, we can move the left point ${tex`(x_1, y_1)`} to our guess, and if we are too high, we can move the right point ${tex`(x_2, y_2)`} to our guess.34:Ta2e,viewof element2 = { let max = 200 const form = html` `; let min form.oninput = () => { min = Math.min(form.AB_n.valueAsNumber, form.A_n.valueAsNumber, form.B_n.valueAsNumber) form.AB_n.value = min form.AB_slide.value = min return form.value = ({ A: form.A_n.valueAsNumber, B: form.B_n.valueAsNumber, AB: form.AB_n.valueAsNumber, n: form.n.valueAsNumber, }); } form.oninput(); return form; } 35:Tea4,graph = { const w = Math.min(625, width); const h = w*3/4; const padding = {x0:70, x1:10, y0:40, y1:10}; const color = ["#f28e2c","#e15759","#76b7b2","#59a14f","#af7aa1","#ff9da7","#9c755f","#bab0ab","#4e79a7","#edc949"] let A = element2.A let B = element2.B let AB = element2.AB let n = element2.n let r1 = Math.sqrt(A/Math.PI) let r2 = Math.sqrt(B/Math.PI) let x1 = Math.abs( r1-r2 ) let x2 = r1+r2 let y1 = Math.PI * Math.min(r1**2, r2**2) let y2 = 0 // make graph points let t let makeLine = () =>{ let points = [] let step = Math.round(w-padding.x0-padding.x1) for(let i=1; i { guess = (x2-x1) / (y2-y1) * ( AB - y1) + x1 if( 0 AB ){ x1 = guess y1 = guessArea }else{ x2 = guess y2 = guessArea } } else if( 0 xScale(d[0])) .y((d) => yScale(d[1])) // plot function let intersectLine = svg .append('path') .datum([[x1, AB], [(x2-x1) / (y2-y1) * ( AB - y1) + x1, AB]]) .attr('d', line) .attr('fill', 'none') .attr('stroke', 'black') const sigmoid = svg .append('path') .datum(data) .attr('d', line) .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 2) for( let i=0; i d.text) .attr("x", d => d.x) .attr("y", d => d.y ) .attr("text-anchor", d => d.anchor) .style("font-size", d => d.size) .attr("font-family", "Arial") .attr("font-weight",700) .attr('fill', d => d.color) .attr("stroke", "white") .attr("paint-order", "stroke") .attr("stroke-width", 2.5); // print return svg.node(); }36:[] 2f:{"id":"1b6d507578e4f273","slug":"proportional-venn-diagram","title":"Proportional Venn Diagram","thumbnail":"a8aebdcebe02aea7814fa6fe5a375059838a4ebdba7ca5a522b5aec847054d9f","access_level":"public","create_time":"$D2022-05-09T20:16:06.280Z","update_time":"$D2022-05-26T02:59:54.312Z","view_time":null,"first_public_time":"$D2022-05-18T21:20:29.204Z","fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":1008,"publish_version":1008,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Proportional Venn Diagram","cells":[{"id":0,"value":"# Proportional Venn Diagram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"singleVenn = {\n const w = Math.min(600, width);\n const h = w/2;\n\n let r1 = Math.sqrt(element1.A/Math.PI)\n let r2 = Math.sqrt(element1.B/Math.PI)\n let d = distance(element1.A, element1.B, element1.AB)\n \n // scale \n let xScale = d3.scaleLinear([ 0, Math.sqrt(Math.max(element1.max,element1.A,element1.B))*2.35 ], [0, w]);\n let yScale = d3.scaleLinear([ 0, 1 ], [h , 0]);\n \n // canvas\n let svg = d3\n .select(DOM.svg(w, h))\n \n let data=[\n {name:'A', r: xScale(r1), n: element1.A, cx: w/2 - xScale(d)/2, color:element1.color_A},\n {name:'B', r: xScale(r2), n: element1.B, cx: w/2 + xScale(d)/2, color:element1.color_B}\n ]\n\n const circles = svg\n .selectAll(\"circle\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", (d) => d.cx)\n .attr(\"cy\", yScale(.5))\n .attr(\"r\", (d) => d.r )\n .attr(\"fill\", (d) => d.color )\n .style(\"mix-blend-mode\", \"multiply\" )\n \n // print\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":545,"value":"I made this to illustrate data joins. Like the area of a pie chart, the area of each part of the intersection is proportional to its number of elements. Since projects often combine more than 2 datasets, multiple Venn diagrams can be arranged in a [data join matrix](https://observablehq.com/@laotzunami/visual-data-join-matrix).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":560,"value":"## Calculations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":268,"value":"First we convert the area of each circle (which represents the number of elements in set A and B) to a radius.\n\n> ${tex` r_1 = \\sqrt{ |A| / \\pi}`}
\n> ${tex` r_2 = \\sqrt{ |B| / \\pi}`}\n\nNext, we can use equation (14) from Wolfram's [Circle-Circle Intersection](https://mathworld.wolfram.com/Circle-CircleIntersection.html) page to find the area of the intersection:\n\n> ${tex` |A \\cap B| = area(d, r_1, r_2) `}

\n> ${tex`= r_1^2 \\cdot \\cos^{-1} \\left( \\dfrac{d^2+r_1^2-r_2^2}{2d \\cdot r_1} \\right)\n+ r_2^2 \\cdot \\cos^{-1} \\left( \\dfrac{d^2-r_1^2+r_2^2}{2d \\cdot r_2} \\right)`}

\n> ${tex`- \\frac{1}{2} \\sqrt{ (d+r_1+r_2) (-d+r_1+r_2) (d-r_1+r_2) (d+r_1-r_2) }`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":326,"value":"area = (d, r1, r2) => {\n return (\n r1**2 * Math.acos( (d**2+r1**2-r2**2) / (2*d*r1) ) + r2**2 * Math.acos( (d**2 -r1**2 + r2**2) / (2*d*r2) )\n -.5 * Math.sqrt( (d+r1+r2) * (-d+r1+r2) * (d-r1+r2) * (d+r1-r2) )\n )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"Now, we need to find how far apart to space the circles so only a certain area overlaps.\n\nLet's define the range of ${tex`d`}. The minimum distance is when one circle is completely inside of the other with the sides touching ${tex` |r_1 - r_2|`}. The maximum distance is when there is no overlap but the circles are touching ${tex`r_1 + r_2`}. \n\n> ${tex`|r_1 - r_2| \\leq d \\leq r_1 + r_2`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":612,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":859,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":805,"value":"By experimenting, this converges to an imperceptible visual difference in five iterations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":365,"value":"distance = ( A, B, AB) => { // arguments are number of set elements\n const iterations = 5\n \n const r1 = Math.sqrt( A / Math.PI )\n const r2 = Math.sqrt( B / Math.PI )\n\n // set exclusion\n if( AB <= 0 ){ return r1+r2+1 }\n \n // set inclusion\n else if ( A <= AB || B <= AB){ return 0 }\n \n // set intersection\n else{\n let x1 = Math.abs( r1-r2 )\n let x2 = r1+r2\n \n let y1 = Math.PI * Math.min(r1**2, r2**2)\n let y2 = 0\n \n let guess, guessArea\n \n for( let i=0; i AB ){\n x1 = guess\n y1 = guessArea\n }else{\n x2 = guess\n y2 = guessArea\n }\n }\n \n return (x2-x1) / (y2-y1) * ( AB - y1) + x1\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"

	${tex`\|A\| `}	${tex`=`}	elements in A
	${tex`\|B\|`}	${tex`=`}	elements in B
${tex`\|A \cap B\| `}		${tex`=`}	elements in intersection

${tex`\|A\| `}	${tex`=`}	elements in A
${tex`\|B\|`}	${tex`=`}	elements in B
${tex`\|A \cap B\| `}	${tex`=`}	elements in intersection
${tex`n `}	${tex`=`}	number of iterations