2b:null 2c:["$","title",null,{"children":"Vertical-splitting of the intersection lens of a proportional Venn diagram | Alex Reynolds | Observable"}] 32:T43d,function initialVenn(setA, setB, setI) { let sc = ScaledParameters; let midpoint = { x : sc.r + (sc.d / 2), y : 0 }; let A = circleCircleIntersectionArea(V.d, V.r, V.R); const svg = d3.select(DOM.svg(width, height)) .style("font", "24px sans-serif") .style("width", width) .style("height", height) .attr("text-anchor", "middle"); let tG = svg.append("g").attr("transform", ()=>{ return "translate(0," + (height/2) + ")"}); tG.append("circle") .attr("r", sc.r) .attr("cx", sc.r) .attr("cy", "0") .attr("stroke", "none") .attr("fill", colorA) .attr("fill-opacity", elementOpacity); let yG = tG.append("g").attr("transform", ()=> { return "translate(" + sc.d + ", 0)"}); yG.append("circle") .attr("r", sc.R) .attr("cx", sc.R) .attr("cy", "0") .attr("stroke", "none") .attr("fill", colorB) .attr("fill-opacity", elementOpacity); tG.append("text") .attr("x", midpoint.x) .attr("y", midpoint.y) .attr("dx", "0.25em") .text("lens"); return svg.node(); }33:T685,function chartWithPartitionPoints(is, ca, cb) { const svg = d3.select(DOM.svg(width, height)) .style("font", "24px sans-serif") .style("width", width) .style("height", height) .attr("text-anchor", "middle"); svg.append('circle') .attr("r", ca.radius) .attr("cx", ca.center.x) .attr("cy", ca.center.y) .attr("fill", colorA) .attr("fill-opacity", elementOpacity); svg.append('circle') .attr("r", cb.radius) .attr("cx", cb.center.x) .attr("cy", cb.center.y) .attr("fill", colorB) .attr("fill-opacity", elementOpacity); let icq = IntersectCirclesQuery(is, ca, cb); let overlapRadius = 1; svg.append('circle') .attr("r", overlapRadius) .attr("cx", icq.CI[0].x) .attr("cy", icq.CI[0].y) .attr("fill", colorOverlap); svg.append('circle') .attr("r", overlapRadius) .attr("cx", icq.CI[1].x) .attr("cy", icq.CI[1].y) .attr("fill", colorOverlap); for (let idx = 0; idx < (is - 1); idx++) { let iter = icq.IS[idx]; svg.append('circle') .attr("r", overlapRadius) .attr("cx", iter[0].points[0].x) .attr("cy", iter[0].points[0].y) .attr("fill", colorOverlap); svg.append('circle') .attr("r", overlapRadius) .attr("cx", iter[1].points[0].x) .attr("cy", iter[1].points[0].y) .attr("fill", colorOverlap); svg.append('line') .attr('x1', iter[0].points[0].x) .attr('y1', iter[0].points[0].y) .attr('x2', iter[1].points[0].x) .attr('y2', iter[1].points[0].y) .attr('stroke', colorOverlap) .attr('stroke-width', overlapRadius/4); } return svg.node(); }34:T502,function chartWithSplits(is, ca, cb, perc) { const svg = d3.select(DOM.svg(width, height)) .style("font", "10px sans-serif") .style("width", width) .style("height", height) .attr("text-anchor", "middle"); svg.append('circle') .attr("r", ca.radius) .attr("cx", ca.center.x) .attr("cy", ca.center.y) .attr("fill", colorA) .attr("fill-opacity", elementOpacity); svg.append('circle') .attr("r", cb.radius) .attr("cx", cb.center.x) .attr("cy", cb.center.y) .attr("fill", colorB) .attr("fill-opacity", elementOpacity); let icq = IntersectCirclesQuery(is, ca, cb, perc); let upperPolygonPoints = ""; for (let idx = 0; idx < icq.SP.U.length; idx++) { if (!icq.SP.U[idx]) continue; upperPolygonPoints += icq.SP.U[idx][0] + "," + icq.SP.U[idx][1] + " "; } svg.append('polygon') .attr("points", upperPolygonPoints) .attr("fill", colorUpperSplitFill); let lowerPolygonPoints = ""; for (let idx = 0; idx < icq.SP.L.length; idx++) { if (!icq.SP.L[idx]) continue; lowerPolygonPoints += icq.SP.L[idx][0] + "," + icq.SP.L[idx][1] + " "; } svg.append('polygon') .attr("points", lowerPolygonPoints) .attr("fill", colorLowerSplitFill); return svg.node(); }35:T1862,function IntersectCirclesQuery(is, ca, cb, perc) { let circleA = ki.ShapeInfo.circle(ca); let circleB = ki.ShapeInfo.circle(cb); let circleIntersections = ki.Intersection.intersect(circleA, circleB); let its = []; let yDelta = Math.abs(circleIntersections.points[1].y - circleIntersections.points[0].y) / is; let yPos = circleIntersections.points[0].y; let stripes = []; for (let idx = 0; idx < (is - 1); idx++) { yPos += yDelta; // the stripe start and end points must start inside A and B, exclusively let stripe = null; if (ScaledParameters.r >= ScaledParameters.R) { stripe = ki.ShapeInfo.line({x: Math.min(ca.center.x, cb.center.x-ca.center.x)-1, y: yPos}, {x: Math.max(cb.center.x + ScaledParameters.d, 2*ca.radius + 1), y: yPos}); } else { stripe = ki.ShapeInfo.line({x: Math.min(ca.center.x, ca.center.x-cb.center.x)-1, y: yPos}, {x: Math.max(cb.center.x + ScaledParameters.d, 2*ca.radius + 1), y: yPos}); } stripes.push(stripe); let cai = ki.Intersection.intersect(circleA, stripe); let cbi = ki.Intersection.intersect(circleB, stripe); if (cbi.points.length > 1) { cbi = { points : [cbi.points[1]] } } its.push([cbi, cai]); } let paths = []; let areas = []; let cumulativeAreas = []; let area = 0; let cumulativeArea = 0; // we need to handle the top and bottommost points as triangles, separate from // the iterated points that otherwise define parallelograms for (let idx = 0; idx < (is - 1); idx++) { let pathPoints = []; let itsInstanceA = its[idx]; let itsInstanceB = (idx < (is - 2)) ? its[idx + 1] : null; if (idx === 0) { pathPoints.push([circleIntersections.points[0].x, circleIntersections.points[0].y]) pathPoints.push([itsInstanceA[1].points[0].x, itsInstanceA[1].points[0].y]) pathPoints.push([itsInstanceA[0].points[0].x, itsInstanceA[0].points[0].y]) paths.push(pathPoints); area = Math.abs(d3.polygonArea(pathPoints)); cumulativeArea += area; areas.push(area); cumulativeAreas.push(cumulativeArea); pathPoints = []; pathPoints.push([itsInstanceA[0].points[0].x, itsInstanceA[0].points[0].y]) pathPoints.push([itsInstanceA[1].points[0].x, itsInstanceA[1].points[0].y]) if (itsInstanceB) { pathPoints.push([itsInstanceB[1].points[0].x, itsInstanceB[1].points[0].y]) pathPoints.push([itsInstanceB[0].points[0].x, itsInstanceB[0].points[0].y]) } paths.push(pathPoints); area = Math.abs(d3.polygonArea(pathPoints)); cumulativeArea += area; areas.push(area); cumulativeAreas.push(cumulativeArea); } else if (idx === (is - 2)) { pathPoints.push([itsInstanceA[0].points[0].x, itsInstanceA[0].points[0].y]) pathPoints.push([itsInstanceA[1].points[0].x, itsInstanceA[1].points[0].y]) pathPoints.push([circleIntersections.points[1].x, circleIntersections.points[1].y]) paths.push(pathPoints); area = Math.abs(d3.polygonArea(pathPoints)); cumulativeArea += area; areas.push(area); cumulativeAreas.push(cumulativeArea); } else { pathPoints.push([itsInstanceA[0].points[0].x, itsInstanceA[0].points[0].y]) pathPoints.push([itsInstanceA[1].points[0].x, itsInstanceA[1].points[0].y]) if (itsInstanceB) { pathPoints.push([itsInstanceB[1].points[0].x, itsInstanceB[1].points[0].y]) pathPoints.push([itsInstanceB[0].points[0].x, itsInstanceB[0].points[0].y]) } paths.push(pathPoints); area = Math.abs(d3.polygonArea(pathPoints)); cumulativeArea += area; areas.push(area); cumulativeAreas.push(cumulativeArea); } } let areaSum = areas.reduce((a,b) => a + b, 0); let splitPathsOrderedPoints = {"U" : [], "L" : []}; let splitLabels = []; let lastU = -1; let lastL = -1; if (typeof perc !== "undefined") { let thresholdSum = perc * areaSum; for (let idx = 0; idx < is; idx++) { splitLabels.push((thresholdSum <= cumulativeAreas[is - idx - 1]-0.001) ? "U" : "L"); if (splitLabels[idx] === 'U') { lastU = idx+1; } if (splitLabels[idx] === 'L') { lastL = idx+1; } } if (lastU != -1) { splitPathsOrderedPoints['U'] = new Array((lastU * 2) + 1); for (let idx = 0; idx <= lastU; idx++) { if (idx === 0) { splitPathsOrderedPoints['U'][idx] = [circleIntersections.points[0].x, circleIntersections.points[0].y]; } else if (idx <= lastU) { let itsUInstance = its[idx-1]; if (itsUInstance) { splitPathsOrderedPoints['U'][idx] = [itsUInstance[0].points[0].x, itsUInstance[0].points[0].y]; splitPathsOrderedPoints['U'][(lastU * 2) + 1 - idx] = [itsUInstance[1].points[0].x, itsUInstance[1].points[0].y]; } if (lastL === -1) { splitPathsOrderedPoints['U'][lastU] = [circleIntersections.points[1].x, circleIntersections.points[1].y]; } } } } if (lastL != -1) { splitPathsOrderedPoints['L'] = new Array((lastL * 2) + 1 - splitPathsOrderedPoints['U'].length); if (lastU === -1) { lastU = 0; } else { lastU--; } for (let idx = lastL; idx >= lastU; idx--) { if (idx === lastL) { splitPathsOrderedPoints['L'][idx] = [circleIntersections.points[1].x, circleIntersections.points[1].y]; } else if (idx > lastU) { let itsLInstance = its[idx-1]; if (itsLInstance) { splitPathsOrderedPoints['L'][idx] = [itsLInstance[0].points[0].x, itsLInstance[0].points[0].y]; splitPathsOrderedPoints['L'][(lastL * 2) + 1 - idx] = [itsLInstance[1].points[0].x, itsLInstance[1].points[0].y]; } } else if (lastU === 0) { splitPathsOrderedPoints['L'][lastU] = [circleIntersections.points[0].x, circleIntersections.points[0].y]; } } } } return { CA: circleA, CB: circleB, CI: circleIntersections.points, ST: stripes, IS: its, PS: paths, AS: areas, ASUM: areaSum, CS: cumulativeAreas, SL: splitLabels, SP: splitPathsOrderedPoints, lastU: lastU, lastL: lastL }; }36:[] 2f:{"id":"071377e32ffef4b6","slug":"vertical-splitting-of-the-intersection-lens-of-a-proportio","title":"Vertical-splitting of the intersection lens of a proportional Venn diagram","thumbnail":"08e29fec1f11c725342275b83cfbb79edd57c86f1376b7dc7b8b5f8b3303b3b0","access_level":"public","create_time":"$D2019-11-16T00:13:54.891Z","update_time":"$D2020-05-17T06:56:15.240Z","view_time":null,"first_public_time":"$D2019-11-16T00:13:59.865Z","fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"c37303cdd0850875","login":"alexpreynolds","name":"Alex Reynolds","avatar_url":"https://avatars-next.observableusercontent.com/d65c5655ec5460fd3f3e991b39388f7f7bc6fd994a450ca1cd6723004caa728c","tier":"starter_2024"},"version":1303,"publish_version":1303,"role":null,"authored":false,"authors":[{"type":"individual","id":"2e14005bda844aa3","login":"alexpreynolds","name":"Alex Reynolds","avatar_url":"https://avatars-next.observableusercontent.com/d65c5655ec5460fd3f3e991b39388f7f7bc6fd994a450ca1cd6723004caa728c","tier":null}],"members":[{"type":"individual","id":"2e14005bda844aa3","login":"alexpreynolds","name":"Alex Reynolds","avatar_url":"https://avatars-next.observableusercontent.com/d65c5655ec5460fd3f3e991b39388f7f7bc6fd994a450ca1cd6723004caa728c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Vertical-splitting of the intersection lens of a proportional Venn diagram","cells":[{"id":0,"value":"md`# Vertical-splitting of the intersection lens of a proportional Venn diagram\n\nWe explore calculating a proportional two-set Venn diagram, in which the intersection of the two sets forms an asymmetric \"lens\" that we further subdivide vertically by some specified percentage value, into upper and lower \"splits\".\n\n## Procedure\n\nThe process is to use the \\`kld-intersections\\` library to calculate a set of points which outline the intersection lens.\n\nFrom this set of points, we create SVG \\`path\\` elements that can be filled conditionally with one or another color, depending on which of the two \"splits\" that slice belongs to, decided by how much area that slice contributes to its respective split.\n\nThis solution is an approximation, because the paths we generate are polygons and so do not entirely fill the curved edges of the lens. But with increased iterations, we should be able to reduce this error to give an answer that is so reasonably close to an expected or true result as to be indiscernable to the eye.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"md`## Output\n\nThe output should be an SVG which contains paths outlining the two circles, and the intersection lens divided into upper and lower splits by the specified percentage value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"md`## Inputs\n\nInputs are sets (two sets, specifically, for a two-set Venn diagram). We define, here, the cardinality of sets A and B, and the cardinality of overlap between sets A and B.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"viewof A = slider({\n min: 10, \n max: 1000, \n step: 1, \n value: 600,\n title: \"A\",\n description: \"Number of items in set A\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"viewof B = slider({\n min: 10, \n max: 1000, \n step: 1, \n value: 400,\n title: \"B\",\n description: \"Number of items in set B\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"viewof I = slider({\n min: 10, \n max: 1000, \n step: 1, \n value: 150,\n title: \"A^B\",\n description: \"Number of items in both set A or set B\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"initialVenn(A, B, I);","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"viewof colorA = colorPicker(\"red\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"viewof colorB = colorPicker(\"blue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"DOM.download(() => serialize(initialVenn(A, B, I)), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"md`Area-proportional Venn diagram described here:\n\nhttps://observablehq.com/@omnizach/accurate-area-venn-diagram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"md`## Partitioning the lens\n\nIn order to partition the intersection lens, we first define how many partitions we want:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"viewof initialIterations = slider({\n min: 1, \n max: 100,\n step: 1, \n value: 10, \n title: \"Partitions\", \n description: \"Increased number of slices made through intersection lens\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"viewof colorOverlap = colorPicker(\"black\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`Here we show a chart with points outlining the lens, calculated by the specified number of partitions.\n\nDragging the *Partitions* slider demonstrates the effect:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"chartWithPartitionPoints(initialIterations, circleA, circleB)","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"DOM.download(() => serialize(chartWithPartitionPoints), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"md`We next use these points to create paths and measure coverage.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"md`## Calculating partition areas\n\nFinally, we can now generate a chart that contains splits.\n\nWe start with paths for each of the lens' partitions, using \\`d3.polygonArea\\` to calculate their areas.\n\nThe cumulative area at a partition will assign it to either the upper or lower vertical split. \n\nThere is a slight error at the left and right sides of a partition, which each only approximately follows the arc of either circle. A thinner partition will follow the arc more closely and contribute less error than a thicker partition.\n\nThe overall sum of partition tile area values is compared against the area we expect from a closed-form equation described at:\n\nhttps://www.xarg.org/2016/07/calculate-the-intersection-area-of-two-circles/\n\nComparing the observed (estimated) and expected (true) areas allows us to calculate error, which we should see decrease as the number of partitions is increased and they are made thinner.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"viewof splitIterations = slider({\n min: 1, \n max: 250,\n step: 1, \n value: 50, \n title: \"Partitions\", \n description: \"Specify the number of slices made through intersection lens\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"viewof splitPercentage = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0.80,\n format: \".0%\",\n title: \"Split percentage\",\n description: \"Zero to one, formatted as a percentage\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"chartWithSplits(splitIterations, circleA, circleB, splitPercentage)","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"viewof colorUpperSplitFill = colorPicker(\"lightgreen\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"viewof colorLowerSplitFill = colorPicker(\"darkgreen\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"DOM.download(() => serialize(chartWithSplits(splitIterations, circleA, circleB, splitPercentage)), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"md`### Error`","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"{\n let te = tilingError(splitIterations, circleA, circleB); \n let ef = Math.abs(te.expectedArea - te.observedArea)/te.expectedArea;\n let ep = Math.floor(ef * 100000)/1000;\n return `Error (difference of observed and expected areas): ${ep}%`\n return te;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"md`## Global functions and parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"circleCircleIntersectionArea = function(d, r, R) {\n d = Math.max(Math.min(d, r+R), Math.abs(r-R));\n return r*r * Math.acos((d*d + r*r - R*R) / (2*d*r)) +\n R*R * Math.acos((d*d + R*R - r*r) / (2*d*R)) -\n 0.5 * Math.sqrt((-d+r+R)*(d+r-R)*(d-r+R)*(d+r+R));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"function findDistance(r, R, A, eta = 0.0001) {\n if (A > r*r*Math.PI || A > R*R*Math.PI) {\n return Math.abs(r-R);\n }\n \n if (A < eta) {\n return r+R;\n }\n \n let gd = (minD = Math.abs(r-R), maxD = r+R) => {\n let d = (maxD + minD) / 2,\n guess = circleCircleIntersectionArea(d, r, R);\n \n if (Math.abs(guess - A) < eta) {\n return d;\n }\n \n // too much overlap, need more separation\n if (guess > A) {\n return gd(d, maxD);\n }\n \n // otherwise, too little overlap, need less separation\n return gd(minD, d);\n }\n \n return gd();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"// a : area of circle region\n// b : area of other circle region\n// i : area of intersection\nfunction venn(a, b, i) {\n let radiusA = Math.sqrt(a / Math.PI),\n radiusB = Math.sqrt(b / Math.PI),\n distance = findDistance(radiusA, radiusB, i);\n \n return {\n r : radiusA,\n R : radiusB,\n d : distance\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"V = venn(A, B, I)","pinned":true,"hidden":false,"mode":"ojs"},{"id":915,"value":"Scale = height / Math.max(V.r, V.R) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":919,"value":"ScaledParameters = { return { r : V.r * Scale, R : V.R * Scale, d : V.d * Scale } }","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"circleA = { return { \"center\" : {\"x\" : ScaledParameters.r, \"y\" : height/2}, \"radius\" : ScaledParameters.r}}","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"circleB = { return { \"center\" : {\"x\" : ScaledParameters.d + ScaledParameters.R, \"y\" : height/2}, \"radius\" : ScaledParameters.R}}","pinned":true,"hidden":false,"mode":"ojs"},{"id":824,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"width = 2*height","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"elementOpacity = 0.33","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"IntersectCirclesQuery(16, circleA, circleB, 0.5);","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"function tilingError(is, ca, cb) {\n let icq = IntersectCirclesQuery(is, ca, cb);\n let r1 = ca.radius;\n let r2 = cb.radius;\n let d = Math.abs(ca.center.x - cb.center.x);\n let a = r1 * r1;\n let b = r2 * r2;\n let x = (a - b + d * d) / (2 * d);\n let z = x * x;\n let y = Math.sqrt(a - z);\n let observedArea = icq.ASUM;\n let expectedArea = a * Math.asin(y / r1) + b * Math.asin(y / r2) - y * (x + Math.sqrt(z + b - a));\n let errorResult = { \n observedArea: observedArea,\n expectedArea: expectedArea\n };\n return errorResult;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"IntersectCirclesQuery(6, circleA, circleB, 0.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"import {colorPicker} from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"ki = require('kld-intersections');","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"