2b:null 2c:["$","title",null,{"children":"Perceived discrimination and health among migrants in Europe: a systematic review of associations, mechanisms, and protective factors | Harry Biddle | Observable"}] 31:T2533,chart = { const rowHeaderWidth = 200; const format = d3.format(",d"); // column order: "mixed" leads when present, everything else alphabetical by its displayed label const columnOrder = (a, b) => { if (a === "mixed") return -1; if (b === "mixed") return 1; return columnLabel(dataProperty, a).localeCompare( columnLabel(dataProperty, b), undefined, { numeric: true, sensitivity: "base" } ); }; const columns = Array.from( new Set(processedData.map((d) => d[dataProperty])) ).sort(columnOrder); const tableWidth = rowHeaderWidth + columns.length * cellWidth; const totalWidth = tableWidth + 1; // +1 so the closing border isn't half-clipped const totalHeight = layoutRows.totalHeight; // wrap helper const measure = (() => { const ctx = document.createElement("canvas").getContext("2d"); ctx.font = "600 12px system-ui, sans-serif"; // must match the header text style return (s) => ctx.measureText(s).width; })(); const wrapLines = (text, maxWidth) => { const words = String(text).split(/\s+/); const lines = []; let line = ""; for (const w of words) { const test = line ? line + " " + w : w; if (line && measure(test) > maxWidth) { lines.push(line); line = w; } else line = test; } if (line) lines.push(line); return lines; }; // Outer container: anchors the tooltip, never scrolls, never clips const container = d3 .create("div") .style("position", "relative") .style("min-width", "0") .style("max-width", "100%") .style("font-family", "sans-serif"); // Single global tooltip element. // NB: child of `container`, NOT of `scroller` — inside the scroller it would // be clipped by overflow and offset by scrollLeft. const tooltip = container .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("background", "rgba(255, 255, 255, 0.95)") .style("border", "1px solid #333") .style("padding", "8px") .style("border-radius", "4px") .style("pointer-events", "none") .style("font-size", "12px") .style("box-shadow", "0 4px 8px rgba(0,0,0,0.1)"); // The only element that overflows const scroller = container .append("div") .attr("tabindex", 0) .style("overflow-x", "auto") .style("overflow-y", "hidden") .style("min-width", "0") .style("max-width", "100%") .style("-webkit-overflow-scrolling", "touch") .style("scrollbar-width", "thin") .style("scrollbar-color", "#b0b0b0 transparent"); const svg = scroller .append("svg") .attr("width", totalWidth) .attr("height", totalHeight) .attr("viewBox", `0 0 ${totalWidth} ${totalHeight}`) .style("background", "#fff") .style("display", "block"); // --- RENDERING CATEGORY HEADERS (TOP AXIS) --- const headerG = svg.append("g"); headerG .append("text") .attr("x", rowHeaderWidth / 2) .attr("y", layoutRows.columnHeaderHeight / 2) .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("fill", "#333") .text("Outcome Variable"); headerG .append("text") .attr("x", rowHeaderWidth + (columns.length * cellWidth) / 2) .attr("y", layoutRows.columnHeaderHeight / 3) .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", "14px") .attr("fill", "#111") .text(layoutRows.dataHeaderLabel); // Column Labels const headerLineHeight = 13; columns.forEach((col, idx) => { const x = rowHeaderWidth + idx * cellWidth + cellWidth / 2; const lines = wrapLines(columnLabel(dataProperty, col), cellWidth - 12); const label = headerG .append("text") .attr("x", x) .attr( "y", layoutRows.columnHeaderHeight - 8 - (lines.length - 1) * headerLineHeight ) .attr("text-anchor", "middle") .attr("font-weight", "600") .attr("font-size", "12px"); lines.forEach((line, i) => { label .append("tspan") .attr("x", x) .attr("dy", i === 0 ? 0 : headerLineHeight) .text(line); }); }); // --- RENDERING ROWS & CELL CLUSTERS --- layoutRows.rows.forEach((row) => { const rowG = svg.append("g").attr("transform", `translate(0, ${row.y})`); if (row.type === "groupHeader") { // Gray structural row band rowG .append("rect") .attr("width", tableWidth) .attr("height", row.height) .attr("fill", "#f0f0f0"); rowG .append("text") .attr("x", 10) .attr("y", row.height / 2 + 5) .attr("font-weight", "bold") .attr("font-size", "13px") .attr("fill", "#444") .text(`${row.name} (${row.count} outcomes)`); } else if (row.type === "variable") { // Row Divider Line rowG .append("line") .attr("x1", 0) .attr("y1", row.height) .attr("x2", tableWidth) .attr("y2", row.height) .attr("stroke", "#e0e0e0"); // Row label — groups that aren't subdivided carry no sub-label if (row.name) { const labelText = rowG .append("text") .attr("x", 10) .attr("y", 30) .attr("font-size", "13px") .attr("font-weight", "500"); labelText.append("tspan").text(row.name); labelText .append("tspan") .attr("x", 10) .attr("dy", "18px") .attr("fill", "grey") .attr("font-size", "11px") .text(`${row.count} ${row.count > 1 ? "outcomes" : "outcome"}`); } // Grid vertical lines & cell contents columns.forEach((col, colIdx) => { const cellX = rowHeaderWidth + colIdx * cellWidth; // Vertical cell borders rowG .append("line") .attr("x1", cellX) .attr("y1", 0) .attr("x2", cellX) .attr("y2", row.height) .attr("stroke", "#e8e8e8"); // Filter data mapped precisely to this grid intersection const cellData = row.studies.filter((s) => s[dataProperty] === col); if (cellData.length === 0) return; // Establish localized bubble layout sizing const pack = d3 .pack() .size([cellWidth - 16, row.height - 16]) .padding(3) .radius((d) => globalRadiusScale(d.data.sampleSize)); const root = d3 .hierarchy({ children: cellData }) .sum((d) => d.sampleSize); const packedLeaves = pack(root).leaves(); // Target cell canvas workspace group const cellG = rowG .append("g") .attr("transform", `translate(${cellX + 8}, 8)`); cellG .selectAll("circle") .data(packedLeaves) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => d.r) .attr("fill", (d) => color(d.data.effect)) .attr("fill-opacity", 0.75) .style("cursor", "pointer") .on("mouseover", (event, d) => { tooltip.style("visibility", "visible").html(`${ d.data.study }
Sample Size: ${format(d.data.sampleSize)}
Effect: ${d.data.effect}`); }) .on("mousemove", (event) => { const [x, y] = d3.pointer(event, container.node()); tooltip.style("top", y - 15 + "px").style("left", x + 18 + "px"); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); }); }); } }); // Final bounding border line on the far right svg .append("line") .attr("x1", tableWidth - 0.5) .attr("y1", layoutRows.columnHeaderHeight) .attr("x2", tableWidth - 0.5) .attr("y2", totalHeight) .attr("stroke", "#e8e8e8"); // scroll affordance // Edge fades — pinned to the container, so they don't scroll with the content const fadeStops = d3 .range(0, 1.0001, 0.1) .map( (t) => `rgba(255,255,255,${( scrollFade.strength * Math.pow(t, scrollFade.curve) ).toFixed(3)}) ${Math.round(t * 100)}%` ) .join(", "); const fade = (side) => { const el = container .append("div") .style("position", "absolute") .style("top", 0) .style(side, 0) .style("bottom", 0) .style("width", `${scrollFade.width}px`) .style("pointer-events", "none") .style("opacity", 0) .style("transition", "opacity 150ms ease") .style("background", `linear-gradient(to ${side}, ${fadeStops})`); if (scrollFade.shadow) { el.style( "box-shadow", `inset ${side === "right" ? "-" : ""}14px 0 14px -14px rgba(0,0,0,0.45)` ); } return el; }; const fadeLeft = fade("left"); const fadeRight = fade("right"); const updateFades = () => { const el = scroller.node(); const max = el.scrollWidth - el.clientWidth; fadeLeft.style("opacity", el.scrollLeft > 2 ? 1 : 0); fadeRight.style("opacity", el.scrollLeft < max - 2 ? 1 : 0); }; scroller.on("scroll", updateFades); // clientWidth is 0 while the node is still detached, so measure once it's inserted const resizeObserver = new ResizeObserver(updateFades); resizeObserver.observe(scroller.node()); invalidation.then(() => resizeObserver.disconnect()); return container.node(); }32:T4f0,nestedSortedData = { const subdivided = new Set(["mental health", "physical health"]); const subRowOrder = ["self-rated", "clinical/ objective"]; const rank = (v) => { const i = subRowOrder.indexOf(v); return i === -1 ? Infinity : i; // anything unexpected sorts last, not first }; const strip = ({ outcomeGroupAnalysis, outcomeVariables, ...rest }) => rest; return d3 .groups(processedData, (d) => d.outcomeGroupAnalysis) .map(([groupName, groupData]) => ({ outcomeGroupAnalysis: groupName, numberStudies: groupData.length, outcomeVariables: subdivided.has(groupName) ? d3 .groups(groupData, (d) => d.outcomeVariables) .map(([varName, varData]) => ({ outcomeVariable: varName, numberStudies: varData.length, studies: varData.map(strip) })) .sort((a, b) => d3.ascending(rank(a.outcomeVariable), rank(b.outcomeVariable)) ) : [ { outcomeVariable: "", // single, unsubdivided row numberStudies: groupData.length, studies: groupData.map(strip) } ] })) .sort((a, b) => b.numberStudies - a.numberStudies); }33:T651,layoutRows = { const columnHeaderHeight = 72; // room for labels spanning two lines const groupHeaderHeight = 40; const cellPadding = 8; // must match translate(cellX + 8, 8) in `chart` const bubblePadding = 3; // must match pack().padding(3) const minRowHeight = 90; // pack() inflates each radius by padding/2 before packing, then deflates. Mirror that. const blobHeight = (studies) => { const circles = studies.map((d) => ({ r: globalRadiusScale(d.sampleSize) + bubblePadding / 2 })); d3.packSiblings(circles); return d3.max(circles, (c) => c.y + c.r) - d3.min(circles, (c) => c.y - c.r); }; const heightFor = (studies) => { const byColumn = d3.group(studies, (d) => d[dataProperty]); const tallest = d3.max(Array.from(byColumn.values(), blobHeight)) ?? 0; return Math.max(minRowHeight, Math.ceil(tallest) + 2 * cellPadding); }; const rows = []; nestedSortedData.forEach((group) => { rows.push({ type: "groupHeader", name: group.outcomeGroupAnalysis, count: group.numberStudies, height: groupHeaderHeight }); group.outcomeVariables.forEach((v) => { rows.push({ type: "variable", name: v.outcomeVariable, count: v.studies.length, studies: v.studies, height: heightFor(v.studies) }); }); }); let currentY = columnHeaderHeight; const positionedRows = rows.map((row) => { const y = currentY; currentY += row.height; return { ...row, y }; }); return { rows: positionedRows, totalHeight: currentY, columnHeaderHeight, dataHeaderLabel: dataColumnOptions[dataProperty] }; }34:[{"id":"facc226d3508616d2f3fe213b73e063d7400a2730e191bb22968bc20fc53a08115886b6978d719b0a084eb36ded20dbddb529640fb1f3eb719b92a15de391da3","href":"https://static.observableusercontent.com/files/facc226d3508616d2f3fe213b73e063d7400a2730e191bb22968bc20fc53a08115886b6978d719b0a084eb36ded20dbddb529640fb1f3eb719b92a15de391da3","name":"Discr_review_clean_forObservable.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1788269322676.07,"size":75406}] 2f:{"id":"398df15a53f34a38","slug":"perceived-discrimination-and-health-among-migrants","title":"Perceived discrimination and health among migrants in Europe: a systematic review of associations, mechanisms, and protective factors","thumbnail":"75280f22e537bd98b2a99635b39efc3bf2c2a4cc091da54d4c5fde8c9795168f","access_level":"public","create_time":"$D2026-09-01T13:28:42.676Z","update_time":"$D2026-09-04T11:40:58.608Z","view_time":null,"first_public_time":"$D2026-09-01T13:28:42.676Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"698edd1f22e9d4d7","login":"harrybiddle","name":"Harry Biddle","avatar_url":"https://avatars-next.observableusercontent.com/cb2de2eafd016bd637f3f9ddfb40954d06828995d8fd2e21d31a29d494015b09","tier":"starter_2024"},"version":891,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"914ea1886092acdd","login":"harrybiddle","name":"Harry Biddle","avatar_url":"https://avatars-next.observableusercontent.com/cb2de2eafd016bd637f3f9ddfb40954d06828995d8fd2e21d31a29d494015b09","tier":null}],"members":[{"type":"team","id":"698edd1f22e9d4d7","login":"harrybiddle","name":"Harry Biddle","avatar_url":"https://avatars-next.observableusercontent.com/cb2de2eafd016bd637f3f9ddfb40954d06828995d8fd2e21d31a29d494015b09","tier":"starter_2024","role":"editor"},{"type":"individual","id":"914ea1886092acdd","login":"harrybiddle","name":"Harry Biddle","avatar_url":"https://avatars-next.observableusercontent.com/cb2de2eafd016bd637f3f9ddfb40954d06828995d8fd2e21d31a29d494015b09","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Perceived discrimination and health among migrants in Europe: a systematic review of associations, mechanisms, and protective factors","cells":[{"id":0,"value":"intro = md`# Perceived discrimination and health among migrants in Europe: a systematic review of associations, mechanisms, and protective factors\n\n## Interactive version of figure 2: Summary table of outcomes according to region of origin, generational status, discrimination definition, and study design\n\nThis table displays the results of a systematic review on the relationship between perceived discrimination and health outcomes among migrants in Europe. It includes results from 69 publications published since 2000. Estimates of associations were extracted at the level of health outcomes, with some publications reporting more than one outcome. A total of 285 estimates are reported in this table. The size of the bubble represents the sample size while the colour of the bubble represents the direction of the association. A mouseover reveals the authors, year, and sample size of the corresponding publication.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":700,"value":"viewof dataProperty = Inputs.select(\n new Map(\n Object.entries(dataColumnOptions).map(([header, label]) => [label, header])\n ),\n { label: \"Column\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":771,"value":"key = html`

\n Effect:\n ${Swatches(color)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":681,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":804,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":808,"value":"

Implementation details

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":600,"value":"### Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":722,"value":"radiusRange = [2, 10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":730,"value":"cellWidth = 160","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"The scroll-edge fade that signals there is more table off-screen.\n`width` is how far it reaches in from each edge; `curve` controls how\naggressively it bites (below 1 = reaches full white sooner); `strength`\nis the opacity at the very edge; `shadow` adds a hard edge line on top.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":803,"value":"scrollFade = ({\n width: 90, // px the fade reaches in from each edge\n curve: 0.6, // < 1 = more aggressive · 1 = linear · > 1 = gentler\n strength: 1, // opacity at the very edge, 0–1\n shadow: false // adds a hard inner edge shadow as well\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":602,"value":"### Data preparation\n\nThe data comes from `Discr_review_clean_forObservable.xlsx`, one sheet with headers\nin the first row — 285 estimates from 69 publications.\n\nTo update it: go to the Files icon in the right sidebar (the paperclip), click the\ndotted menu next to `Discr_review_clean_forObservable.xlsx`, choose Replace, and\nupload the new version. Everything downstream recomputes automatically.\n\nThe column names are read verbatim, so they must not change. Note that\n` self-rated/ clinical` has a **leading space** in the header — that is intentional\nand matches the spreadsheet.\n\nThere should be a preview of the file contents below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":612,"value":"workbook1 = FileAttachment(\"Discr_review_clean_forObservable.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":620,"value":"rawData = workbook1.sheet(0, {\n headers: true\n // range: \"A1:J10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":615,"value":"rawData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"Now we process this data:\n\n* For each remaining row, create a new object with cleaner field names.\n* Copy across the relevant columns: effect, sample size, outcome group, outcome variable, generation, study ID, region of origin, discrimination category, and study design.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":628,"value":"processedData = {\n const clean = (v) => (v == null ? \"\" : String(v).trim());\n\n return rawData.map((d) => ({\n effect: clean(d[\"Effect\"]), // AB\n sampleSize: d[\"sample size\"], // AC\n outcomeGroupAnalysis: clean(d[\"Outcome group (analysis)\"]), // G\n outcomeVariables: clean(d[\" self-rated/ clinical\"]), // F (leading space!)\n study: clean(d[\"Study\"]), // B (was \"Study ID\")\n regionOfOrigin: clean(d[\"Region of origin\"]), // X\n firstSecondGen: clean(d[\"1st/2nd generation\"]), // AA (was \"1st/2nd gen\")\n discriminationDefinition: clean(d[\"Discrimination definition\"]), // N (replaces category)\n studyDesign: clean(d[\"Study design\"]) // Z (was \"CS/long\")\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":641,"value":"After this processing, the data looks like this","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":639,"value":"processedData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":659,"value":"The final step is to roll up this table into a nested structure. First we group studies by broad health outcome. Then we group again again by the specific outcome measured, such as depression, anxiety, self-rated health, or smoking. It counts how many study records fall into each group and sorts the largest groups first, making it easier to see where the evidence is most concentrated while keeping the individual study details nested underneath.\n\nThe result is a nested structure that looks like this\n\n```javascript\n[\n {\n outcomeGroupAnalysis: \"mental health\",\n numberStudies: 100,\n outcomeVariables: [\n {\n outcomeVariable: \"depression\",\n numberStudies: 25,\n studies: [...]\n }\n ]\n }\n]\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":492,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"### Visualisation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":679,"value":"**Step 1: Flatten and Calculate the Row Layout**\n\nBecause we have hierarchical rows (health outcomes grouped under broad analysis types), we first need to flatten this structure into an array of \"layout instructions.\" This allows us to calculate exactly where every group header and row sits on the vertical (Y) axis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":678,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"**Step 2: Define Global Scales**\n\nNow we define a single global scale for circle radii based on the absolute maximum sample size across the entire dataset, ensuring exact visual comparability.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":676,"value":"globalRadiusScale = d3.scaleSqrt()\n .domain(d3.extent(processedData, (d) => d.sampleSize))\n .range(radiusRange) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"Colour scale for effect:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":432,"value":"color = d3\n .scaleOrdinal()\n .domain([\"negative\", \"no effect\", \"positive\"])\n .range([\"red\", \"grey\", \"green\"])\n .unknown(\"#000\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"numberDataColumns = [...new Set(processedData.map((d) => d[dataProperty]))]\n .length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":702,"value":"dataColumnOptions = ({\n regionOfOrigin: \"Region of origin\",\n firstSecondGen: \"Generation\",\n discriminationDefinition: \"Discrimination definition\",\n studyDesign: \"Study design\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":735,"value":"columnLabels = ({\n studyDesign: {\n \"CS\": \"Cross-sectional\",\n \"long\": \"Longitudinal\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"columnLabel = (property, value) => {\n const overrides = columnLabels[property] ?? {};\n if (value in overrides) return overrides[value];\n return value === \"\" ? \"Not specified\" : value;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"