2c:null 2d:["$","title",null,{"children":"Visual Data Join Matrix | Lao | Observable"}] 32: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(); }33:[] 30:{"id":"1612e725fe46e7e3","slug":"visual-data-join-matrix","title":"Visual Data Join Matrix","thumbnail":"f710a097ec7bbf357ce35126f70edacbe2e3614a1ef5b6bb1fcf27646ff8138d","access_level":"public","create_time":"$D2022-05-19T00:56:55.334Z","update_time":"$D2022-06-15T09:27:49.396Z","view_time":null,"first_public_time":"$D2022-05-19T17:29:01.854Z","has_unpublished_edits":null,"fork":false,"stars":32,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":251,"publish_version":251,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visual Data Join Matrix","cells":[{"id":0,"value":"# Visual Data Join Matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"viewof checkbox = Inputs.checkbox([\"Show intersection labels\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"