2b:null 2c:["$","title",null,{"children":"Colliders and Confounders | William Pang | Observable"}] 31:Tea4,// Lightly adapted from Herb Susmann's Plot Function: https://observablehq.com/@herbps10/collider-bias plot = (data, X, Y, Z, options) => { options = Object.assign({ height: width < 600 ? width : width / 2, width: width < 600 ? width : width / 2, margin: { top: 50, right: 90, bottom: 50, left: 50 }, xlab: "", ylab: "", xlim: d3.extent(data.map(d => d[X])), ylim: d3.extent(data.map(d => d[Y])), legend_title: "" }, options); const svg = d3.select(DOM.svg(options.width, options.height)); const x = d3.scaleLinear().domain(options.xlim).range([options.margin.left, options.width - options.margin.right]); const y = d3.scaleLinear().domain(options.ylim).range([options.height - options.margin.bottom, options.margin.top]); const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); if(Z != null) { svg.append("g") .attr("transform", `translate(${options.width - options.margin.left - 20}, ${options.margin.top})`) .html(Legend(colorScale, { title: options.legend_title, width: 75 }).outerHTML); } svg.append("text") .attr("x", options.width - options.margin.right + 10) .attr("y", options.height - options.margin.bottom + 15) .attr("alignment-baseline", "middle") .attr("font-style", "italic") .text(options.xlab); svg.append("g") .attr("transform", `translate(0, ${options.height - options.margin.bottom + 15})`) .call(xAxis); svg.append("text") .attr("x", options.margin.left - 15) .attr("y", options.margin.top - 10) .attr("text-anchor", "left") .attr("font-style", "italic") .text(options.ylab); svg.append("g") .attr("transform", `translate(${options.margin.left - 15}, 0)`) .call(yAxis); if (Z == null){ svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("r", 3) .attr("cx", (d) => x(d[X])) .attr("cy", (d) => y(d[Y])); } else { svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("r", 3) .attr("cx", (d) => x(d[X])) .attr("cy", (d) => y(d[Y])) .attr("fill", (d) => colorScale(d[Z])); } if(options.regression == true) { if (Z == null){ const fit = leastSquares(data.map(d => +d[X]), data.map(d => +d[Y])); console.log(fit); svg.append("line") .attr("x1", x(options.xlim[0])) .attr("y1", y(fit.intercept + options.xlim[0] * fit.slope)) .attr("x2", x(options.xlim[1])) .attr("y2", y(fit.intercept + options.xlim[1] * fit.slope)) .attr("stroke", "red") .attr("stroke-dasharray", "4 4"); } else { let data_0 = {} let xlim_0 = [] data_0 = data.filter((d) => d[Z] == 0) const fit_0 = leastSquares(data_0.map(d => +d[X]), data_0.map(d => +d[Y])); xlim_0 = d3.extent(data_0.map(d => d[X])); svg.append("line") .attr("x1", x(xlim_0[0])) .attr("y1", y(fit_0.intercept + xlim_0[0] * fit_0.slope)) .attr("x2", x(xlim_0[1])) .attr("y2", y(fit_0.intercept + xlim_0[1] * fit_0.slope)) .attr("stroke", "red") .attr("stroke-dasharray", "4 4"); let data_1 = {} let xlim_1 = [] data_1 = data.filter((d) => d[Z] == 1) const fit_1 = leastSquares(data_1.map(d => +d[X]), data_1.map(d => +d[Y])); xlim_1 = d3.extent(data_1.map(d => d[X])); svg.append("line") .attr("x1", x(xlim_1[0])) .attr("y1", y(fit_1.intercept + xlim_1[0] * fit_1.slope)) .attr("x2", x(xlim_1[1])) .attr("y2", y(fit_1.intercept + xlim_1[1] * fit_1.slope)) .attr("stroke", "red") .attr("stroke-dasharray", "4 4"); } } return svg.node(); }32:Td0f,// Heavily Adapted from Herb Susmann's "Collider Dag" Function: https://observablehq.com/@herbps10/collider-bias confounder_dag = (x, y, z, options) => { options = Object.assign({ height: 400, width: width, fontSize: "1.25em", condition: false, backdoorPath: false }, options); const svg = d3.select(DOM.svg(options.width, options.height)); svg.append("defs") .html(` `); const coordinates = [ { x: options.width / 5, y: options.height / 4 }, // Upper left { x: 4 * options.width / 5, y: options.height / 4 }, // Upper right { x: options.width / 2, y: 3 * options.height / 4 } // Bottom center ]; const labels = [x, y, z]; const lines = [ { x1: coordinates[0].x, y1: coordinates[0].y, x2: coordinates[2].x, y2: coordinates[2].y, shortenStart: 30, shortenEnd: 60, arrow: true, dashed: false }, { x1: coordinates[1].x, y1: coordinates[1].y, x2: coordinates[2].x, y2: coordinates[2].y, shortenStart: 30, shortenEnd: 60, arrow: true, dashed: false }, ]; if(options.backdoorPath == true) { lines.push({ x1: coordinates[0].x, y1: coordinates[0].y, x2: coordinates[1].x, y2: coordinates[1].y, arrow: false, dashed: true , shortenStart: 40, shortenEnd: 40, }); } const shorten = (line, start, end) => { const w = line.x2 - line.x1; const h = line.y2 - line.y1; const a = Math.atan(h / w); return { x1: line.x1 + (a >= 0 ? 1 : -1) * start * Math.cos(a), y1: line.y1 + (a >= 0 ? 1 : -1) * start * Math.sin(a), x2: line.x2 + (a >= 0 ? -1 : 1) * end * Math.cos(a), y2: line.y2 + (a >= 0 ? -1 : 1) * end * Math.sin(a) }; } svg.selectAll("text") .data(coordinates) .enter() .append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", options.fontSize) .attr("font-style", "italic") .attr("x", (d) => d.x) .attr("y", (d) => d.y) .text((d, i) => labels[i]); svg.selectAll("line") .data(lines) .enter() .append("line") .attr("x1", (d) => shorten(d, d.shortenStart, d.shortenEnd).x1) .attr("y1", (d) => shorten(d, d.shortenStart, d.shortenEnd).y1) .attr("x2", (d) => shorten(d, d.shortenStart, d.shortenEnd).x2) .attr("y2", (d) => shorten(d, d.shortenStart, d.shortenEnd).y2) .attr("stroke", "rgba(0, 0, 0, 0.8)") .attr("stroke-width", 2) .attr("stroke-dasharray", d => d.dashed ? "4 4" : null) .attr("marker-start", d => d.arrow ? "url(#arrowhead)" : null); if(options.condition == true) { const conditionWidth = 120; const conditionHeight = 40; svg.append("rect") .attr("x", coordinates[2].x - conditionWidth / 2) .attr("y", coordinates[2].y - conditionHeight / 2) .attr("width", conditionWidth) .attr("height", conditionHeight) .attr("fill", "transparent") .attr("stroke", "black"); } return svg.node(); }33:[] 2f:{"id":"b0dd7e38176f7d3c","slug":"colliders-and-confounders","title":"Colliders and Confounders","thumbnail":"9ed0abbcc228d63b2226508ce9610dcd63c697c1f322d7288c39b97891cdcc7c","access_level":"public","create_time":"$D2024-02-26T23:50:00.333Z","update_time":"$D2024-05-26T03:15:56.156Z","view_time":null,"first_public_time":"$D2024-02-27T21:08:55.451Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"88df4b53b2fce8d2","login":"will-pang","name":"William Pang","avatar_url":"https://avatars-next.observableusercontent.com/4e5603477ef111cf1fc74cb0aab0dd58ddab37219e1b2a4e5e9c3d082c5532a0","tier":"starter_2024"},"version":562,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"30424cd7adf510bb","login":"williampangbest1","name":"William Pang","avatar_url":"https://avatars-next.observableusercontent.com/4e5603477ef111cf1fc74cb0aab0dd58ddab37219e1b2a4e5e9c3d082c5532a0","tier":null}],"members":[{"type":"individual","id":"30424cd7adf510bb","login":"williampangbest1","name":"William Pang","avatar_url":"https://avatars-next.observableusercontent.com/4e5603477ef111cf1fc74cb0aab0dd58ddab37219e1b2a4e5e9c3d082c5532a0","tier":null,"role":"editor"},{"type":"team","id":"88df4b53b2fce8d2","login":"will-pang","name":"William Pang","avatar_url":"https://avatars-next.observableusercontent.com/4e5603477ef111cf1fc74cb0aab0dd58ddab37219e1b2a4e5e9c3d082c5532a0","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Colliders and Confounders","cells":[{"id":0,"value":"# Colliders and Confounders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":145,"value":"In observational data, we're often interested in understanding whether certain populations are different from another in the same dataset. For example, imagine that we designed an app where users self-report their pain-assessment when having a migraine, and we would like to understand if there's any an association between age and migraine severity. \n\nThe data might look something like this (*Note: This is fictional data *):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":314,"value":"viewof n_collider = Inputs.range([1000, 5000], {value: 1000, step: 100, label: \"Sample Size\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"plot(collider_data, \"X\", \"Y\", null, {xlab: \"Pain Score\", ylab: \"Age\", legend: true, regression: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"As far as we know, there doesn't seem to be any association between age and pain score. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":251,"value":"Given that there might be millions of records to go through, it might seem like a reasonable assumption to only look at users who frequently log their measurements. Let's see what happens when we condition our analysis on app usage frequency:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":423,"value":"plot(collider_data, \"X\", \"Y\", \"Z\", {xlab: \"Pain Score\", ylab: \"Age\", legend: true, legend_title: \"Frequent User\", regression: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":431,"value":"By subsetting our data to look at frequent and non-frequent users, we see a relationship between age and pain score, seemingly suggesting that a lower age might result in a higher pain score. Why might this be the case?\n\nSuppose that there are two things going on that can contribute to app-usage: (1) Younger adults are more likely to use the app to record their data (2) People who have more pronounced migraines might be more likely to record their data. Both of these factors are likely to result in an increase in app usage, as outlined in the causal diagram below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":165,"value":"collider_dag(\"Age\", \"Migraine\", \"App Usage\", { width: width < 600 ? width : width / 3, height: 300, condition: false, backdoorPath: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":440,"value":"If we decided to subset or condition our data and only look at those with high app usage, we are creating a spurious association between age and migraine, even when there's no causal relationship between both variables.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":203,"value":"collider_dag(\"Age\", \"Migraine\", \"App Usage\", { width: width < 600 ? width : width / 3, height: 300, condition: true, backdoorPath: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"Sometimes, however, conditioning might be necessary. Say we want to study the association between smoking cigarettes and alcohol consumption, and see if we can infer any patterns among the elderly population.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":449,"value":"viewof n_confounder = Inputs.range([1000, 5000], {value: 1000, step: 100, label: \"Sample Size\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"plot(confounder_data, \"X\", \"Y\", null, {xlab: \"Alcohol Level\", ylab: \"Number of Cigarettes smoked per day\", legend: true, regression: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"Here we see that there's a positive association between number of cigarettes smoked per day and blood alcohol levels, which doesn't quite make sense. Let's draw our causal diagram:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":488,"value":"confounder_dag(\"Smoking\", \"Alcohol\", \"Age\", { width: width < 600 ? width : width / 3, height: 300, condition: false, backdoorPath: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"Older adults are more likely to smoke, and are also more likely to consume larger quantities of alcohol. In causal inference lingo, age acts as a confounder because it influences both the dependent variable (smoking) as well as the independent variable (alcohol consumption). In this case, it is necessary that we subset our data to look at the younger population and elderly population separately:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":503,"value":"plot(confounder_data, \"X\", \"Y\", \"Z\", {xlab: \"Alcohol Level\", ylab: \"Number of Cigarettes smoked per day\", legend: true, legend_title: \"Senior\", regression: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"By conditioning on age, we can eliminate the spurious association that might be drawn from cigarette smoking and alcohol consumption.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":515,"value":"confounder_dag(\"Smoking\", \"Alcohol\", \"Age\", { width: width < 600 ? width : width / 3, height: 300, condition: true, backdoorPath: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":523,"value":"## Notes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":525,"value":"[1] The foundation of this work is built from Herb Susmann's notebook on [Yes Yes No: Collider Bias](https://observablehq.com/@herbps10/collider-bias). Much of the plotting tools, DAG diagram generator, as well as implementation of least square regression were based on his code. \n\n[2] Examples for confounder and collider biases are all fictional but were inspired by various online resources. The Boston School of Public Health has an excellent explanation on [confounding](https://sphweb.bumc.bu.edu/otlt/MPH-Modules/PH717-QuantCore/PH717-Module11-Confounding-EMM/PH717-Module11-Confounding-EMM2.html), and this [research paper](https://www.nature.com/articles/s41467-020-19478-2) by Griffth et. al. offers a highly relevant example on the risks of collider bias in observational studies on COVID-19 disease risk and severity.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":336,"value":"*Stats*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":258,"value":"// Generated by ChatGPT\nfunction randn_bm() {\n let u = 0, v = 0;\n while(u === 0) u = Math.random(); // Converting [0,1) to (0,1)\n while(v === 0) v = Math.random();\n return Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"// Generated by ChatGPT\n// Function to generate normally distributed random numbers with mean 'mean' and standard deviation 'stdDev'\nfunction rnorm(mean, stdDev, n) {\n let result = [];\n\n if (n == 1){\n return mean + stdDev * randn_bm()\n }\n else {\n for (let i = 0; i < n; i++) {\n result.push(mean + stdDev * randn_bm());\n }\n return result;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"leastSquares = (x,y) => {\n // Knowledge Reference:\n // https://www.mathsisfun.com/data/least-squares-regression.html\n // https://learnche.org/pid/least-squares-modelling/least-squares-models-with-a-single-x-variable\n // Multiple correlation: https://real-statistics.com/correlation/multiple-correlation/\n \n // Implementation by Herb Susmann (https://observablehq.com/@herbps10/collider-bias)\n\n const n = y.length;\n let sum_x = 0;\n let sum_y = 0;\n let sum_xx = 0;\n let sum_xy = 0;\n\n for (var i = 0; i < n; i++){\n sum_x += x[i];\n sum_y += y[i];\n sum_xx += (x[i]*x[i]);\n sum_xy += (x[i]*y[i]);\n }\n\n const slope = (n * sum_xy - sum_x * sum_y) / (n * sum_xx - sum_x * sum_x);\n const intercept = (sum_y - slope * sum_x)/n;\n\n return {slope, intercept}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"*Mathematical Helper Functions*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":341,"value":"// Written by ChatGPT\nfunction addArrays(array1, array2) {\n if (array1.length != array2.length) {\n throw new Error (\"Arrays must have the same length!\");\n }\n\n let result = [];\n\n for (let i = 0; i < array1.length; i++) {\n result.push(array1[i] + array2[i])\n }\n\n return result\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"function ifelseGreaterThanArray(array, value){\n\n let result = [];\n\n for (let i = 0; i < array.length; i++){\n if (array[i] > value){\n result.push(1)\n }\n else {\n result.push(0)\n }\n }\n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"*Visualization*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":37,"value":"colorScale = d3.scaleOrdinal([0, 1], [\"#7f8c8d\", \"#d35400\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":311,"value":"*Collider Example*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":365,"value":"collider_simulater = (N) => {\n\n const data = [];\n let i = 0;\n while (i < N) {\n const X = rnorm(70, 10, 1) // Migraine_Pain_Score\n const Y = rnorm(40, 5, 1) // Age_Collider\n const Z = (X + Y) < 110 ? 1:0\n\n i += 1;\n data.push({X, Y, Z});\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"collider_data = collider_simulater(n_collider)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"*Confounder Example*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":456,"value":"confounder_simulater = (N) => {\n\n const data = [];\n let i = 0;\n while (i < N) {\n const A = rnorm(65, 10, 1) // Age_years\n const Z = A > 65 ? 1:0 // is_senior ?\n const Y = rnorm(8, 2, 1) + 4*Z // Ciagrettes Smoked\n const X = rnorm(100, 10, 1) + 20*Z\n\n i += 1;\n data.push({X, Y, Z});\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"confounder_data = confounder_simulater(n_confounder)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":33,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"import {collider_dag} from \"@herbps10/collider-bias\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"