32:T991,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; }33:Ta0e,singleVenn = { const w = Math.min(700, width); const h = w * 0.7; let r1 = Math.sqrt(element1.A / Math.PI); let r2 = Math.sqrt(element1.B / Math.PI); let d = distance(element1.A, element1.B, element1.AB); // scale let xScale = d3.scaleLinear( [0, Math.sqrt(Math.max(element1.max, element1.A, element1.B)) * 2.35], [0, w] ); let yScale = d3.scaleLinear([0, 1], [h, 0]); // canvas let svg = d3.select(DOM.svg(w, h)); let data = [ { name: "Live here", r: xScale(r1), n: element1.A, cx: w / 2 - xScale(d) / 2, color: element1.color_A }, { name: "Work here", r: xScale(r2), n: element1.B, cx: w / 2 + xScale(d) / 2, color: element1.color_B } ]; const circles = svg .selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", (d) => d.cx + 20) .attr("cy", yScale(0.6)) .attr("r", (d) => d.r) .attr("fill", (d) => d.color) .style("mix-blend-mode", "multiply"); const colouredLabels = svg .selectAll("text.coloured-label") .data(data) .enter() .append("text") .classed("coloured-label", true) .attr("x", (d) => d.cx + 20) .attr("y", (d) => yScale(0.6) - d.r - 5) .style("color", (d) => d.color) .style("text-anchor", "middle") .text((d) => d.name); let labelPositions = [ { name: "A", n: element1.A - element1.AB, cx: w / 2 - xScale(d) / 2, y: yScale(0.6) + xScale(r1) - 3, color: element1.color_A }, { name: "B", n: element1.B - element1.AB, cx: w / 2 + xScale(d) / 2, y: yScale(0.6) + xScale(r2) - 3, color: element1.color_B }, { name: "AB", n: element1.AB, cx: (w + xScale(r1) - xScale(r2)) / 2, y: yScale(0.6), color: "gray" } ]; const labels = svg .selectAll("text.number-label") .data(labelPositions) .enter() .append("text") .classed("number-label", true) .attr("x", (d) => d.cx + 20) .attr("y", yScale(0.55) + Math.max(...data.map((d) => d.r))) .style("text-anchor", "middle") .style("fill", (d) => d.color) .text((d) => d.n); const leaderLines = svg .selectAll("line") .data(labelPositions) .enter() .append("line") .style("stroke", "#888") .style("stroke-dasharray", "2 2") .attr("x1", (d) => d.cx + 20) .attr("x2", (d) => d.cx + 20) .attr("y1", yScale(0.55) + Math.max(...data.map((d) => d.r)) - 10) .attr("y2", (d) => d.y); // print return svg.node(); }34:T684,threeCircles = { const w = Math.min(700, width); const h = w * 0.7; // scale let xScale = d3.scaleLinear([0, 50], [0, w]); let yScale = d3.scaleLinear([0, 1], [h, 0]); let r1 = Math.sqrt((element1.A - element1.AB) / Math.PI); let r2 = Math.sqrt((element1.B - element1.AB) / Math.PI); let r3 = Math.sqrt(element1.AB / Math.PI); let x1 = xScale(r1) + 50; let x3 = x1 + xScale(r1 + r3) + 100; let x2 = x3 + xScale(r2 + r3) + 100; let d = distance(element1.A, element1.B, element1.AB); // canvas let svg = d3.select(DOM.svg(w, h)); let data = [ { name: "live but don't work here", r: xScale(r1), n: element1.A - element1.AB, cx: x1, color: element1.color_A }, { name: "work but don't live here", r: xScale(r2), n: element1.B - element1.AB, cx: x2, color: element1.color_B }, { name: "live and work here", r: xScale(r3), n: element1.AB, cx: x3, color: "gray" } ]; const circles = svg .selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", (d) => d.cx) .attr("cy", yScale(0.6)) .attr("r", (d) => d.r) .attr("fill", (d) => d.color) .style("mix-blend-mode", "multiply"); const colouredLabels = svg .selectAll("text.coloured-label") .data(data) .enter() .append("text") .classed("coloured-label", true) .attr("x", (d) => d.cx) .attr("y", (d) => yScale(0.6) - d.r - 5) .style("color", (d) => d.color) .style("text-anchor", "middle") .style("font", "9pt Arial") .text((d) => d.n + " people " + d.name); return svg.node(); }35: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) } }36: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.37: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; } 38: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(); }39:[] 30:{"title":"Three quick and not very successful ideas for travel to work viz","cells":[{"id":0,"value":"# Three quick and not very successful ideas for travel to work viz\n\nForked from @Lao's notebook with code for positioning circles in a venn diagram.","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"## Venn diagram\n\nI quite like this, but I don't think it's clear if the number on the left (for example) refers to \"Live here\" or to \"Live but don't work here\".","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"## Bar chart\n\nA bar chart gets the information across, but the labels are clunky.","pinned":false,"hidden":false,"mode":"md"},{"id":1105,"value":"{\n let data = [\n {\n name: \"Live but don't work here\",\n n: element1.A - element1.AB\n },\n {\n name: \"Work but don't live here\",\n n: element1.B - element1.AB\n },\n {\n name: \"Live and work here\",\n n: element1.AB\n }\n ];\n return Plot.barX(data, {\n fill: \"steelblue\",\n marginLeft: 200,\n x: \"n\",\n y: \"name\"\n }).plot();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"## Three circles\n\nI don't think this has any benefit over the bar chart, and it has the disadvantage that areas are harder to compare than lengths.","pinned":false,"hidden":false,"mode":"md"},{"id":1077,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"## Appendix\n\nEverything below is straight from the notebook that I forked this from.\n\n------","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":560,"value":"## Calculations","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":612,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":859,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"By experimenting, this converges to an imperceptible visual difference in five iterations.","pinned":false,"hidden":false,"mode":"md"},{"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"}],"files":"$W39","stdlib":"1","titling":"auto"}

	Live here	${tex`=`}	elements in A
	Work here	${tex`=`}	elements in B
Live and work here		${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