2c:T10d1,joinMatrix = { let pad = {left:0, right:0, top:0, bottom:0} let spacing = 0 // padding between matrix cells let cellAspectRatio = 1 // 1 = sqaure cells, 1.25 = rectangular cells //color list let c = ["#4e79a7", "#f28e2c", "#e15759", "#76b7b2", "#59a14f", "#edc949","#af7aa1", "#ff9da7", "#9c755f", "#bab0ab"] let textIntersectionColor if( checkbox.length > 0){ textIntersectionColor = 'lightgrey' }else{textIntersectionColor = 'white'} const pi = Math.PI let w = width; let elements = elementMatrix // calculate maximum number of elements let nMax = 0 for(let i=0; i d.cx ) .attr("cy", d => pad.top+ (.5+d.i) * (h-pad.top-pad.bottom) / elements.length) .attr("r", d => d.r ) .attr("fill", d => d.c ) .attr("stroke", d => d.l ) .attr("stroke-width", 1); const clipping = svg .selectAll("clipPath") .data(clipData) .enter() .append("clipPath") .attr("id", d => d.id ) .append("circle") .attr("cx", d => d.cx ) .attr("cy", d => pad.top + (.5+d.i) * (h-pad.top-pad.bottom) / elements.length) .attr("r", d => d.r ); const intersection = svg .selectAll("int") .data(intData) .enter() .append("circle") .attr("cx", d => d.cx ) .attr("cy", d => pad.top + (.5+d.i) * (h-pad.top-pad.bottom) / elements.length) .attr("clip-path", d => d.mask ) .attr("r", d => d.r ) .attr("fill", 'lightgrey' ) .lower(); const text = svg .selectAll("t") .data(textData) .enter() .append('text') .attr("x", d => d.x ) .attr("y", d => d.y ) .attr("text-anchor", "middle") .style("font-size", "9px") .attr("font-family", "Arial") .attr("font-weight", 700) .text( d => d.text) .attr("fill", d => d.c ) // print return svg.node(); }2d:[] 2a:{"title":"Visual Data Join Matrix","cells":[{"id":0,"value":"# Visual Data Join Matrix","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"viewof checkbox = Inputs.checkbox([\"Show intersection labels\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"This matrix visualizes datasets and their inner joins with [proportional Venn diagrams](https://observablehq.com/@laotzunami/proportional-venn-diagram). When using your own data, make sure your element matrix is symmetric.","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"elementMatrix = {\n // creates dummy values. Replace with a matrix of set sizes down the main diagonal, and intersection sizes for the rest of the matrix\n let sets = [100, 250, 500, 400, 500, 150, 300, 200, 400, 100]\n let n = sets.length\n let matrix = []\n for(let i=0; i { // arguments are number of set elements\n let 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 }\n \n const iterations = 10\n \n const r1 = Math.sqrt( A / Math.PI )\n const r2 = Math.sqrt( B / Math.PI )\n\n if( AB <= 0 ){ return r1+r2+1 }\n \n else if ( A <= AB || B <= AB){ return 0 }\n \n else{\n let x1 = Math.abs( r1-r2 )\n let y1 = Math.PI * Math.min(r1**2, r2**2)\n \n let x2 = r1+r2\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 guess = (x2-x1) / (y2-y1) * ( AB - y1) + x1\n return guess\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2d","stdlib":"1","titling":"auto"}