31:T4ff,treemap_1 = { let data_generated = generateTreemapData(prior_probabability, m, u); const height = 400; const width2 = Math.max(400, width); let root = treemap(data_generated, height, width2); pruneTreeInPlace(root, 1); const container = html`

`; const svg = d3 .select(container) .append("svg") .attr("height", height) .attr("width", width); const color = d3.scaleOrdinal(d3.schemeCategory10); // Or any other color scheme // Bind data to all nodes, not just leaves const nodes = svg .selectAll("g") .data(root) .join("g") .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // Append rectangles with borders nodes .append("rect") .attr("fill", (d) => d.data.colour) .attr("stroke", (d) => d.data.bordercolour) .attr("stroke-width", 1) .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0); nodes .append("foreignObject") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("xmlns", "http://www.w3.org/1999/xhtml") .append("xhtml:div") .attr("class", "wrap-info") .html((d) => { return `

${d3.format(".1%")(d.value)} - ${d.data.name}

`; }); return container; }32:T4f0,treemap_2 = { let data_generated = generateTreemapData(prior_probabability, m, u); const height = 400; const width2 = Math.max(400, width); const root = treemap(data_generated, height, width2); const container = html`

`; const svg = d3 .select(container) .append("svg") .attr("height", height) .attr("width", width); const color = d3.scaleOrdinal(d3.schemeCategory10); // Or any other color scheme // Bind data to all nodes, not just leaves const nodes = svg .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // Append rectangles with borders nodes .append("rect") .attr("fill", (d) => d.data.colour) .attr("stroke", (d) => d.data.bordercolour) .attr("stroke-width", 1) .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0); nodes .append("foreignObject") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("xmlns", "http://www.w3.org/1999/xhtml") .append("xhtml:div") .attr("class", "wrap-info") .html((d) => { return `

${d3.format(".1%")(d.value)} - ${d.data.name}

`; }); return container; }33:T928,treemap_3 = { const height = 400; const width3 = Math.max(400, width); const data_generated = generateTreemapData(prior_probabability, m, u); const root = treemap(data_generated, height, width3); let rect1 = findNodeByName(root, get_scenario_labels(true, true)); let rect2 = findNodeByName(root, get_scenario_labels(true, false)); const width1 = rect1.x1 - rect1.x0; const height1 = rect1.y1 - rect1.y0; const width2 = rect2.x1 - rect2.x0; const height2 = rect2.y1 - rect2.y0; // Align both rectangles vertically to the highest y value (smallest y0) const highestY = Math.min(rect1.y0, rect2.y0); rect1.y0 = highestY; rect1.y1 = highestY + height1; rect2.y0 = highestY; rect2.y1 = highestY + height2; // Position rect2 20 pixels to the right of rect1 rect2.x0 = rect1.x1 + 20; rect2.x1 = rect2.x0 + width2; const container = html`

`; const svg = d3 .select(container) .append("svg") .attr("height", height) .attr("width", width3); // Draw the first rectangle in a group let g1 = svg .append("g") .attr("transform", `translate(${rect1.x0}, ${rect1.y0})`); g1.append("rect") .attr("width", rect1.x1 - rect1.x0) .attr("height", rect1.y1 - rect1.y0) .attr("fill", rect1.data.colour) .attr("stroke", rect1.data.bordercolour); g1.append("foreignObject") .attr("width", rect1.x1 - rect1.x0) .attr("height", rect1.y1 - rect1.y0) .attr("xmlns", "http://www.w3.org/1999/xhtml") .append("xhtml:div") .attr("class", "wrap-info") .html(() => { return `

${d3.format(".1%")(rect1.value)} - ${rect1.data.name}

`; }); // Draw the second rectangle in a group let g2 = svg .append("g") .attr("transform", `translate(${rect2.x0}, ${rect2.y0})`); g2.append("rect") .attr("width", rect2.x1 - rect2.x0) .attr("height", rect2.y1 - rect2.y0) .attr("fill", rect2.data.colour) .attr("stroke", rect2.data.bordercolour); g2.append("foreignObject") .attr("width", rect2.x1 - rect2.x0) .attr("height", rect2.y1 - rect2.y0) .attr("xmlns", "http://www.w3.org/1999/xhtml") .append("xhtml:div") .attr("class", "wrap-info") .html(() => { return `

${d3.format(".1%")(rect2.value)} - ${rect2.data.name}

`; }); return container; }34:T54f,function generateTreemapData(probability_two_random_records_match, m, u) { return { name: `All pairwise record comparisons`, colour: "white", bordercolour: "black", children: [ { name: `Entities match = λ`, colour: "#d6ffe0", bordercolour: "black", children: [ { name: get_scenario_labels(true, true), value: probability_two_random_records_match * m, colour: scenario_match_colour, bordercolour: "black" }, { name: get_scenario_labels(false, true), value: probability_two_random_records_match * (1 - m), colour: "white", bordercolour: "black" } ] }, { name: "Entities do not match = (1-λ)", colour: "#ffd6d9", bordercolour: "black", children: [ { name: get_scenario_labels(true, false), value: (1 - probability_two_random_records_match) * u, colour: scenario_non_match_colour, bordercolour: "black" }, { name: get_scenario_labels(false, false), value: (1 - probability_two_random_records_match) * (1 - u), colour: "white", bordercolour: "black" } ] } ] }; }35:[] 2f:{"title":"Updating a prior simplified","cells":[{"id":0,"value":"# Updating a prior simplified","pinned":false,"hidden":false,"mode":"md"},{"id":388,"value":"viewof prior_probabability = Inputs.range([0, 1], {\n label: \"Prior probability\",\n value: 0.3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"viewof m = Inputs.range([0.01, 0.99], {\n label: \"m probability\",\n value: 0.8\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"viewof u = Inputs.range([0.01, 0.99], {\n label: \"u probability\",\n value: 0.2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"viewof scenario_name = Inputs.text({\n label: \"Scenario name (optional):\",\n placeholder: \"e.g. 'first names are equal'\",\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"function get_scenario_labels(scenario_holds, entities_match) {\n let label;\n\n if (scenario_name !== null && scenario_name !== \"\") {\n if (scenario_holds) {\n label = scenario_name;\n } else {\n label = \"All other scenarios\";\n }\n } else {\n if (scenario_holds) {\n label = `Scenario holds`;\n } else {\n label = `Scenario does not hold`;\n }\n }\n\n if (entities_match) {\n label = `${label} (amongst matching entities)`;\n } else {\n label = `${label} (amongst non-matching entities)`;\n }\n\n return label;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"coloured_formulas = md`\n${tex`\\text{match probability} = \\frac{\\colorbox{${scenario_match_colour}}{\\text{yellow area}}}{\\colorbox{${scenario_match_colour}}{\\text{yellow area}} + \\colorbox{${scenario_non_match_colour}}{\\text{blue area}} } `}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"coloured_formulas_2 = md`We can see that the ${tex`\\colorbox{${scenario_match_colour}}{$\\text{yellow area} = \\lambda m$}`} and the \n${tex`\\colorbox{${scenario_non_match_colour}}{$\\text{blue area} = (1-\\lambda) u$}`}.\n\nSo:\n\n${tex`\\text{match probability} = \\frac{\\colorbox{${scenario_match_colour}}{{$\\lambda m$}}}{\\colorbox{${scenario_match_colour}}{$\\lambda m$} + \\colorbox{${scenario_non_match_colour}}{$(1-\\lambda)u$} } `}\n\nWhich is our original formula.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"formula_with_numbers = {\n let lam = prior_probabability.toFixed(2);\n let u_f = u.toFixed(2);\n let m_f = m.toFixed(2);\n let mp_f = match_probability.toFixed(2);\n return html`\n ${tex`\\text{posterior match probability} = \\frac{${lam} \\times ${m_f}}{${lam} \\times ${m_f} + (1 - ${lam}) \\times ${u_f}} = ${mp_f}`}\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"match_probability = (prior_probabability * m) /\n (prior_probabability * m + (1 - prior_probabability) * u)","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"function findNodeByName(node, targetName) {\n if (node.data.name === targetName) {\n return node;\n }\n\n if (node.children) {\n for (let child of node.children) {\n const result = findNodeByName(child, targetName);\n if (result) {\n return result;\n }\n }\n }\n\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"function pruneTreeInPlace(data, maxDepth, currentDepth = 0) {\n if (currentDepth >= maxDepth) {\n delete data.children;\n return;\n }\n\n if (Array.isArray(data.children)) {\n for (let i = 0; i < data.children.length; i++) {\n pruneTreeInPlace(data.children[i], maxDepth, currentDepth + 1);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"treemap = (data, height, width) =>\n d3\n .treemap()\n .tile(d3.treemapResquarify)\n .size([width, height])\n .paddingOuter(15)\n .paddingTop(30)\n .paddingInner(10)\n .round(true)(d3.hierarchy(data).sum((d) => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"scenario_match_colour = d3.color(\"rgb(255, 255, 34)\").hex()","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"scenario_non_match_colour = \"#35cbff\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}