29:null 2a:["$","title",null,{"children":"Untitled | SynoSys | Observable"}] 2f:T6c9,BarChart1 = { const pct = 0.047; const W = Math.min(700, width); const H = 40; const r = 6; const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("width", W) .attr("height", H) .attr("aria-label", "10 percent filled bar") .attr("role", "img"); // Pattern for the gray (90%) area const defs = svg.append("defs"); const pat = defs.append("pattern") .attr("id", "diagHatch") .attr("patternUnits", "userSpaceOnUse") .attr("width", 8) .attr("height", 8) .attr("patternTransform", "rotate(45)"); // light gray background for the hatch tile pat.append("rect") .attr("width", 8) .attr("height", 8) .attr("fill", "#E5E7EB"); // gray-200 // repeating stripe pat.append("line") .attr("x1", 0).attr("y1", 0) .attr("x2", 0).attr("y2", 8) .attr("stroke", "#9ca3af") // gray-400 .attr("stroke-width", 2); // Full bar (patterned gray) svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", W) .attr("height", H) .attr("rx", r).attr("ry", r) .attr("fill", "url(#diagHatch)"); // Blue 10% segment svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", W * pct) .attr("height", H) .attr("rx", r).attr("ry", r) .attr("fill", "#D55E00"); // crimson 600 // Label "10 %" svg.append("text") //.text(`${(pct * 100).toFixed(1)} %`) .attr("x", (W * pct) / 2) .attr("y", H / 2 + 4) // optical centering tweak .attr("text-anchor", "middle") .attr("font-family", "system-ui, -apple-system, Segoe UI, Roboto, sans-serif") .attr("font-size", 18) .attr("font-weight", 600) .attr("fill", "white"); return svg.node(); } 30:T6c7,BarChart2 = { const pct = 0.9176; const W = Math.min(700, width); const H = 40; const r = 6; const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("width", W) .attr("height", H) .attr("aria-label", "10 percent filled bar") .attr("role", "img"); // Pattern for the gray (90%) area const defs = svg.append("defs"); const pat = defs.append("pattern") .attr("id", "diagHatch") .attr("patternUnits", "userSpaceOnUse") .attr("width", 8) .attr("height", 8) .attr("patternTransform", "rotate(45)"); // light gray background for the hatch tile pat.append("rect") .attr("width", 8) .attr("height", 8) .attr("fill", "#E5E7EB"); // gray-200 // repeating stripe pat.append("line") .attr("x1", 0).attr("y1", 0) .attr("x2", 0).attr("y2", 8) .attr("stroke", "#9ca3af") // gray-400 .attr("stroke-width", 2); // Full bar (patterned gray) svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", W) .attr("height", H) .attr("rx", r).attr("ry", r) .attr("fill", "url(#diagHatch)"); // Blue 80% segment svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", W * pct) .attr("height", H) .attr("rx", r).attr("ry", r) .attr("fill", "#0072B2"); // blue-500 // Label "80 %" svg.append("text") //.text(`${(pct * 100).toFixed(2)} %`) .attr("x", (W * pct) / 2) .attr("y", H / 2 + 6) // optical centering tweak .attr("text-anchor", "middle") .attr("font-family", "system-ui, -apple-system, Segoe UI, Roboto, sans-serif") .attr("font-size", 18) .attr("font-weight", 600) .attr("fill", "white"); return svg.node(); } 31:T17c5,chart = { const counts = [ { sets: ["Fact-checks"], value: 1820 }, { sets: ["Community Notes"], value: 4016 }, { sets: ["Domain-Level"], value: 604 }, { sets: ["Fact-checks","Community Notes"], value: 91 }, { sets: ["Fact-checks","Domain-Level"], value: 15 }, { sets: ["Community Notes","Domain-Level"], value: 7 }, { sets: ["Fact-checks","Community Notes","Domain-Level"], value: 1 } ]; const baseSets = ["Fact-checks","Community Notes","Domain-Level"]; const sizeOf = target => counts .filter(d => target.every(s => d.sets.includes(s))) .reduce((a, d) => a + d.value, 0); const areas = [ ...baseSets.map(s => ({ sets: [s], size: sizeOf([s]) })), ...[[baseSets[0],baseSets[1]],[baseSets[0],baseSets[2]],[baseSets[1],baseSets[2]]] .map(pair => ({ sets: pair, size: sizeOf(pair) })), { sets: baseSets, size: sizeOf(baseSets) } ]; const W = width, H = Math.round(width * 0.68); const targetFill = 0.82, boost = 0.8; const { venn: layout, scaleSolution, computeTextCentres } = venn; const solution = layout(areas); scaleSolution(solution, W, H, 0); const singles = baseSets.map(n => solution[n]); let minX = d3.min(singles, c => c.x - c.radius), maxX = d3.max(singles, c => c.x + c.radius), minY = d3.min(singles, c => c.y - c.radius), maxY = d3.max(singles, c => c.y + c.radius); const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2; const s = boost * targetFill * Math.min(W / (maxX - minX), H / (maxY - minY)); Object.values(solution).forEach(c => { c.x = (c.x - cx) * s + W / 2; c.y = (c.y - cy) * s + H / 2; c.radius *= s; }); const centres = computeTextCentres(solution, areas); const key = sets => sets.slice().sort().join("&"); const avgCentre = sets => { const pts = sets.map(s => solution[s]); return { x: d3.mean(pts, p => p.x), y: d3.mean(pts, p => p.y) }; }; function exclusiveRegionCentre(sets) { const include = sets; const exclude = baseSets.filter(n => !include.includes(n)); let minX = -Infinity, minY = -Infinity, maxX = Infinity, maxY = Infinity; include.forEach(n => { const c = solution[n]; minX = Math.max(minX, c.x - c.radius); maxX = Math.min(maxX, c.x + c.radius); minY = Math.max(minY, c.y - c.radius); maxY = Math.min(maxY, c.y + c.radius); }); if (!(isFinite(minX) && isFinite(maxX) && minX < maxX && minY < maxY)) { minX = d3.min(baseSets, n => solution[n].x - solution[n].radius); maxX = d3.max(baseSets, n => solution[n].x + solution[n].radius); minY = d3.min(baseSets, n => solution[n].y - solution[n].radius); maxY = d3.max(baseSets, n => solution[n].y + solution[n].radius); } const inside = (x, y, c) => { const dx = x - c.x, dy = y - c.y; return dx*dx + dy*dy <= c.radius*c.radius; }; function sample(res) { let sx = 0, sy = 0, cnt = 0; for (let i = 0; i <= res; i++) { const x = minX + (i / res) * (maxX - minX); for (let j = 0; j <= res; j++) { const y = minY + (j / res) * (maxY - minY); if (!include.every(n => inside(x, y, solution[n]))) continue; if (!exclude.every(n => !inside(x, y, solution[n]))) continue; sx += x; sy += y; cnt++; } } return cnt ? { x: sx / cnt, y: sy / cnt } : null; } for (const res of [80,160,320,640,1280]) { const p = sample(res); if (p) return p; } return centres[key(include)] || avgCentre(include); } // --- MANUAL OVERRIDE FOR THE TRIPLE OVERLAP ("1") --- const fc = solution["Fact-checks"]; const cn = solution["Community Notes"]; const dl = solution["Domain-Level"]; const tripleKey = key(baseSets); const OVERRIDES = { // (A) Relative to a reference circle (easy to tweak): [tripleKey]: { ref: "Community Notes", dx: -cn.radius * 0.95, dy: -cn.radius * -0.44 } // (B) Absolute coordinates (uncomment and use instead of A): // [tripleKey]: { x: W * 0.58, y: H * 0.54 } }; function resolveOverride(k) { const o = OVERRIDES[k]; if (!o) return null; if ("x" in o && "y" in o) return { x: o.x, y: o.y }; const r = solution[o.ref]; return { x: r.x + (o.dx || 0), y: r.y + (o.dy || 0) }; } const labelPos = Object.fromEntries( counts.map(d => { const k = key(d.sets); return [k, resolveOverride(k) || centres[k] || exclusiveRegionCentre(d.sets)]; }) ); const svg = d3.create("svg") .attr("viewBox", [0, 0, W, H]) .attr("width", W) .attr("height", H) .style("font-family", "system-ui, -apple-system, Segoe UI, Roboto, sans-serif") .style("background", "white"); svg.append("g") .selectAll("circle") .data(baseSets.map(name => ({ name, ...solution[name] }))) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.radius) .attr("fill", d => palette.get(d.name)) .attr("fill-opacity", 0.7) .attr("stroke", d => palette.get(d.name)) .attr("stroke-width", 2); svg.append("g") .attr("font-size", 28) .attr("font-weight", 700) .attr("fill", "#111") .selectAll("text.count") .data(counts) .join("text") .attr("x", d => labelPos[key(d.sets)].x) .attr("y", d => labelPos[key(d.sets)].y) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("stroke", "white").attr("stroke-width", 3).attr("paint-order", "stroke") .text(d => d.value); svg.append("text") .attr("x", fc.x - fc.radius - 140).attr("y", fc.y - fc.radius * 0.95) .attr("font-size", 28).attr("font-weight", 700).text("Fact-checks"); svg.append("text") .attr("x", cn.x + cn.radius * 0.18).attr("y", cn.y - cn.radius * 1.05) .attr("font-size", 28).attr("font-weight", 700).text("Community Notes"); svg.append("text") .attr("x", dl.x - dl.radius * 0.9).attr("y", dl.y + dl.radius + 36) .attr("font-size", 28).attr("font-weight", 700).text("Domain-level"); return svg.node(); } 32:T235b,chart2 = { const counts = [ { sets: ["Fact-checks"], value: 1820 }, { sets: ["Community Notes"], value: 4016 }, { sets: ["Domain-Level"], value: 604 }, { sets: ["Fact-checks", "Community Notes"], value: 91 }, { sets: ["Fact-checks", "Domain-Level"], value: 15 }, { sets: ["Community Notes", "Domain-Level"], value: 7 }, { sets: ["Fact-checks", "Community Notes", "Domain-Level"], value: 1 } ]; const baseSets = ["Fact-checks", "Community Notes", "Domain-Level"]; const sizeOf = (target) => counts.filter(d => target.every(s => d.sets.includes(s))) .reduce((a, d) => a + d.value, 0); const areas = [ ...baseSets.map(s => ({ sets: [s], size: sizeOf([s]) })), ...[[baseSets[0],baseSets[1]],[baseSets[0],baseSets[2]],[baseSets[1],baseSets[2]]] .map(pair => ({ sets: pair, size: sizeOf(pair) })), { sets: baseSets, size: sizeOf(baseSets) } ]; const W = width, H = Math.round(width * 0.68); const targetFill = 0.82, boost = 0.8; const { venn: layout, scaleSolution, computeTextCentres } = venn; const solution = layout(areas); scaleSolution(solution, W, H, 0); const singles = baseSets.map(n => solution[n]); let minX = d3.min(singles, c => c.x - c.radius), maxX = d3.max(singles, c => c.x + c.radius), minY = d3.min(singles, c => c.y - c.radius), maxY = d3.max(singles, c => c.y + c.radius); const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2; const s = boost * targetFill * Math.min(W / (maxX - minX), H / (maxY - minY)); Object.values(solution).forEach(c => { c.x = (c.x - cx) * s + W / 2; c.y = (c.y - cy) * s + H / 2; c.radius *= s; }); const centres = computeTextCentres(solution, areas); const key = sets => sets.slice().sort().join("&"); const avgCentre = sets => { const pts = sets.map(s => solution[s]); return { x: d3.mean(pts, p => p.x), y: d3.mean(pts, p => p.y) }; }; function exclusiveRegionCentre(sets) { const include = sets; const exclude = baseSets.filter(n => !include.includes(n)); let minX = -Infinity, minY = -Infinity, maxX = Infinity, maxY = Infinity; include.forEach(n => { const c = solution[n]; minX = Math.max(minX, c.x - c.radius); maxX = Math.min(maxX, c.x + c.radius); minY = Math.max(minY, c.y - c.radius); maxY = Math.min(maxY, c.y + c.radius); }); if (!(isFinite(minX) && isFinite(maxX) && minX < maxX && isFinite(minY) && isFinite(maxY) && minY < maxY)) { minX = d3.min(baseSets, n => solution[n].x - solution[n].radius); maxX = d3.max(baseSets, n => solution[n].x + solution[n].radius); minY = d3.min(baseSets, n => solution[n].y - solution[n].radius); maxY = d3.max(baseSets, n => solution[n].y + solution[n].radius); } const inside = (x, y, c) => { const dx = x - c.x, dy = y - c.y; return dx*dx + dy*dy <= c.radius*c.radius; }; function sample(res) { let sx = 0, sy = 0, cnt = 0; for (let i = 0; i <= res; i++) { const x = minX + (i / res) * (maxX - minX); for (let j = 0; j <= res; j++) { const y = minY + (j / res) * (maxY - minY); if (!include.every(n => inside(x, y, solution[n]))) continue; if (!exclude.every(n => !inside(x, y, solution[n]))) continue; sx += x; sy += y; cnt++; } } return cnt ? { x: sx / cnt, y: sy / cnt } : null; } for (const res of [80,160,320,640,1280]) { const p = sample(res); if (p) return p; } return centres[key(include)] || avgCentre(include); } const fc = solution["Fact-checks"]; const cn = solution["Community Notes"]; const dl = solution["Domain-Level"]; const tripleKey = key(baseSets); const OVERRIDES = { [tripleKey]: { ref: "Community Notes", dx: -cn.radius * 0.95, dy: -cn.radius * -0.44 } }; function resolveOverride(k) { const o = OVERRIDES[k]; if (!o) return null; if ("x" in o && "y" in o) return { x: o.x, y: o.y }; const r = solution[o.ref]; return { x: r.x + (o.dx || 0), y: r.y + (o.dy || 0) }; } const labelPos = Object.fromEntries( counts.map(d => { const k = key(d.sets); return [k, resolveOverride(k) || centres[k] || exclusiveRegionCentre(d.sets)]; }) ); const svg = d3.create("svg") .attr("viewBox", [0, 0, W, H]) .attr("width", W) .attr("height", H) .style("font-family", "system-ui, -apple-system, Segoe UI, Roboto, sans-serif") .style("background", "white"); svg.append("g") .selectAll("circle") .data(baseSets.map(name => ({ name, ...solution[name] }))) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.radius) .attr("fill", d => palette3.get(d.name)) // .attr("fill-opacity", 0.7) .attr("stroke", d => palette3.get(d.name)) .attr("stroke-width", 2); const { intersectionAreaPath, intersectionArea } = venn; const circlesOf = sets => sets.map(n => { const c = solution[n]; return { x: c.x, y: c.y, radius: c.radius }; }); // pairwise overlaps const pairwise = [ ["Fact-checks","Community Notes"], ["Fact-checks","Domain-Level"], ["Community Notes","Domain-Level"] ]; svg.append("g") .attr("class", "overlaps") .selectAll("path.overlap") .data(pairwise) .join("path") .attr("class", "overlap") .attr("d", sets => intersectionAreaPath(circlesOf(sets))) .attr("fill", "#C7CCD5") .attr("fill-opacity", 0.95) .attr("stroke", "#C7CCD5") .attr("stroke-width", 3) .attr("vector-effect", "non-scaling-stroke") .style("pointer-events", "none"); const tripleSets = ["Fact-checks","Community Notes","Domain-Level"]; const tripleCircles = circlesOf(tripleSets); const tripleArea = intersectionArea(tripleCircles); function circlesOfInflated(sets, eps = 0.008) { return sets.map(n => { const c = solution[n]; return { x: c.x, y: c.y, radius: c.radius * (1 + eps) }; }); } if (tripleArea > 1e-4) { svg.append("path") .attr("d", intersectionAreaPath(tripleCircles)) .attr("fill", "#C7CCD5") .attr("fill-opacity", 0.75) .attr("stroke", "none") .style("pointer-events", "none"); } else { const inflated = circlesOfInflated(tripleSets); svg.append("path") .attr("d", intersectionAreaPath(inflated)) .attr("fill", "#C7CCD5") .attr("fill-opacity", 0.75) .attr("stroke", "none") .style("pointer-events", "none"); } { const triplePos = labelPos[tripleKey]; // where the "1" goes const rMaxInside = d3.min(baseSets, n => { const c = solution[n]; const d = Math.hypot(triplePos.x - c.x, triplePos.y - c.y); return Math.max(0, c.radius - d); }); const desired = 22; // visual target (~0.8 * 28px font) const margin = 2; // safety buffer from edges const rSafe = Math.max(0, Math.min(desired, rMaxInside - margin)); if (rSafe >= 2) { svg.append("g").attr("class", "label-underlay") .append("circle") .attr("cx", triplePos.x) .attr("cy", triplePos.y) .attr("r", rSafe) .attr("fill", "#C7CCD5") .attr("fill-opacity", 0.9) .attr("stroke", "none") .style("pointer-events", "none"); } else { const clipId = "triple-clip-" + Math.random().toString(36).slice(2); const inflated = circlesOfInflated(tripleSets, 0.03); svg.append("clipPath").attr("id", clipId) .append("path").attr("d", intersectionAreaPath(inflated)); svg.append("g").attr("class", "label-underlay") .append("circle") .attr("cx", triplePos.x) .attr("cy", triplePos.y) .attr("r", desired) .attr("fill", "#C7CCD5") .attr("fill-opacity", 0.9) .attr("stroke", "none") .attr("clip-path", `url(#${clipId})`) .style("pointer-events", "none"); } } svg.append("g") .attr("font-size", 32) .attr("font-weight", 700) .attr("fill", "white") //.attr("fill", "#111") .selectAll("text.count") .data(counts) .join("text") .attr("x", d => labelPos[key(d.sets)].x) .attr("y", d => labelPos[key(d.sets)].y) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") //.attr("stroke", "white") //.attr("stroke-width", 3) //.attr("paint-order", "stroke") .text(d => d.value); svg.append("text") .attr("x", fc.x - fc.radius - 140).attr("y", fc.y - fc.radius * 0.95) .attr("font-size", 28).attr("font-weight", 700).text("Fact-checks"); svg.append("text") .attr("x", cn.x + cn.radius * 0.18).attr("y", cn.y - cn.radius * 1.05) .attr("font-size", 28).attr("font-weight", 700).text("Community Notes"); svg.append("text") .attr("x", dl.x - dl.radius * 0.9).attr("y", dl.y + dl.radius + 36) .attr("font-size", 28).attr("font-weight", 700).text("Domain-level"); return svg.node(); } 33:T21db,chart3 = { const counts = [ { sets: ["Fact-checks"], value: 1820 }, { sets: ["Community Notes"], value: 4016 }, { sets: ["Domain-Level"], value: 604 }, { sets: ["Fact-checks", "Community Notes"], value: 91 }, { sets: ["Fact-checks", "Domain-Level"], value: 15 }, { sets: ["Community Notes", "Domain-Level"], value: 7 }, { sets: ["Fact-checks", "Community Notes", "Domain-Level"], value: 1 } ]; const baseSets = ["Fact-checks", "Community Notes", "Domain-Level"]; const sizeOf = (target) => counts.filter(d => target.every(s => d.sets.includes(s))) .reduce((a, d) => a + d.value, 0); const areas = [ ...baseSets.map(s => ({ sets: [s], size: sizeOf([s]) })), ...[[baseSets[0],baseSets[1]],[baseSets[0],baseSets[2]],[baseSets[1],baseSets[2]]] .map(pair => ({ sets: pair, size: sizeOf(pair) })), { sets: baseSets, size: sizeOf(baseSets) } ]; const W = width, H = Math.round(width * 0.68); const targetFill = 0.82, boost = 0.8; const { venn: layout, scaleSolution, computeTextCentres } = venn; const solution = layout(areas); scaleSolution(solution, W, H, 0); const singles = baseSets.map(n => solution[n]); let minX = d3.min(singles, c => c.x - c.radius), maxX = d3.max(singles, c => c.x + c.radius), minY = d3.min(singles, c => c.y - c.radius), maxY = d3.max(singles, c => c.y + c.radius); const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2; const s = boost * targetFill * Math.min(W / (maxX - minX), H / (maxY - minY)); Object.values(solution).forEach(c => { c.x = (c.x - cx) * s + W / 2; c.y = (c.y - cy) * s + H / 2; c.radius *= s; }); const centres = computeTextCentres(solution, areas); const key = sets => sets.slice().sort().join("&"); const avgCentre = sets => { const pts = sets.map(s => solution[s]); return { x: d3.mean(pts, p => p.x), y: d3.mean(pts, p => p.y) }; }; function exclusiveRegionCentre(sets) { const include = sets; const exclude = baseSets.filter(n => !include.includes(n)); let minX = -Infinity, minY = -Infinity, maxX = Infinity, maxY = Infinity; include.forEach(n => { const c = solution[n]; minX = Math.max(minX, c.x - c.radius); maxX = Math.min(maxX, c.x + c.radius); minY = Math.max(minY, c.y - c.radius); maxY = Math.min(maxY, c.y + c.radius); }); if (!(isFinite(minX) && isFinite(maxX) && minX < maxX && isFinite(minY) && isFinite(maxY) && minY < maxY)) { minX = d3.min(baseSets, n => solution[n].x - solution[n].radius); maxX = d3.max(baseSets, n => solution[n].x + solution[n].radius); minY = d3.min(baseSets, n => solution[n].y - solution[n].radius); maxY = d3.max(baseSets, n => solution[n].y + solution[n].radius); } const inside = (x, y, c) => { const dx = x - c.x, dy = y - c.y; return dx*dx + dy*dy <= c.radius*c.radius; }; function sample(res) { let sx = 0, sy = 0, cnt = 0; for (let i = 0; i <= res; i++) { const x = minX + (i / res) * (maxX - minX); for (let j = 0; j <= res; j++) { const y = minY + (j / res) * (maxY - minY); if (!include.every(n => inside(x, y, solution[n]))) continue; if (!exclude.every(n => !inside(x, y, solution[n]))) continue; sx += x; sy += y; cnt++; } } return cnt ? { x: sx / cnt, y: sy / cnt } : null; } for (const res of [80,160,320,640,1280]) { const p = sample(res); if (p) return p; } return centres[key(include)] || avgCentre(include); } const fc = solution["Fact-checks"]; const cn = solution["Community Notes"]; const dl = solution["Domain-Level"]; const tripleKey = key(baseSets); const OVERRIDES = { [tripleKey]: { ref: "Community Notes", dx: -cn.radius * 0.95, dy: -cn.radius * -0.44 } }; function resolveOverride(k) { const o = OVERRIDES[k]; if (!o) return null; if ("x" in o && "y" in o) return { x: o.x, y: o.y }; const r = solution[o.ref]; return { x: r.x + (o.dx || 0), y: r.y + (o.dy || 0) }; } const labelPos = Object.fromEntries( counts.map(d => { const k = key(d.sets); return [k, resolveOverride(k) || centres[k] || exclusiveRegionCentre(d.sets)]; }) ); const svg = d3.create("svg") .attr("viewBox", [0, 0, W, H]) .attr("width", W) .attr("height", H) .style("font-family", "system-ui, -apple-system, Segoe UI, Roboto, sans-serif") .style("background", "white"); // Colors const BASE_GREEN = "#1B7F6B"; const DOMAIN_RED = "#C0392B"; const GREEN_UNDERLAY = "rgba(27,127,107,0.10)"; const OVERLAP_NEUTRAL = "#C7CCD5"; // Patterns const defs = svg.append("defs"); // Fact-checks: diagonal 45° hatch defs.append("pattern") .attr("id", "fill-fc") .attr("patternUnits", "userSpaceOnUse") .attr("width", 8) .attr("height", 8) .append("path") .attr("d", "M-2,2 L2,-2 M0,8 L8,0 M6,10 L10,6") .attr("stroke", BASE_GREEN) .attr("stroke-width", 1.25) .attr("stroke-linecap", "round"); // Community Notes: horizontal hatch defs.append("pattern") .attr("id", "fill-cn") .attr("patternUnits", "userSpaceOnUse") .attr("width", 8) .attr("height", 8) .append("path") .attr("d", "M0,0 L8,0") .attr("stroke", BASE_GREEN) .attr("stroke-width", 1.25) .attr("stroke-linecap", "round"); const palette2 = new Map([ ["Fact-checks", "url(#fill-fc)"], ["Community Notes", "url(#fill-cn)"], ["Domain-Level", DOMAIN_RED] ]); // Circles svg.append("g") .selectAll("circle") .data(baseSets.map(name => ({ name, ...solution[name] }))) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.radius) .attr("fill", d => palette2.get(d.name)) .attr("stroke", d => d.name === "Domain-Level" ? DOMAIN_RED : BASE_GREEN) .attr("stroke-width", 2); const { intersectionAreaPath, intersectionArea } = venn; const circlesOf = sets => sets.map(n => { const c = solution[n]; return { x: c.x, y: c.y, radius: c.radius }; }); // Pairwise overlaps const pairwise = [ ["Fact-checks","Community Notes"], ["Fact-checks","Domain-Level"], ["Community Notes","Domain-Level"] ]; svg.append("g") .attr("class", "overlaps") .selectAll("path.overlap") .data(pairwise) .join("path") .attr("class", "overlap") .attr("d", sets => intersectionAreaPath(circlesOf(sets))) .attr("fill", OVERLAP_NEUTRAL) .attr("fill-opacity", 0.95) .attr("stroke", OVERLAP_NEUTRAL) .attr("stroke-width", 3) .attr("vector-effect", "non-scaling-stroke") .style("pointer-events", "none"); const tripleSets = ["Fact-checks","Community Notes","Domain-Level"]; const tripleCircles = circlesOf(tripleSets); const tripleArea = intersectionArea(tripleCircles); function circlesOfInflated(sets, eps = 0.008) { return sets.map(n => { const c = solution[n]; return { x: c.x, y: c.y, radius: c.radius * (1 + eps) }; }); } if (tripleArea > 1e-4) { svg.append("path") .attr("d", intersectionAreaPath(tripleCircles)) .attr("fill", OVERLAP_NEUTRAL) .attr("fill-opacity", 0.75) .attr("stroke", "none") .style("pointer-events", "none"); } else { const inflated = circlesOfInflated(tripleSets); svg.append("path") .attr("d", intersectionAreaPath(inflated)) .attr("fill", OVERLAP_NEUTRAL) .attr("fill-opacity", 0.75) .attr("stroke", "none") .style("pointer-events", "none"); } // Labels svg.append("g") .attr("font-size", 28) .attr("font-weight", 700) .attr("fill", "#111") .selectAll("text.count") .data(counts) .join("text") .attr("x", d => labelPos[key(d.sets)].x) .attr("y", d => labelPos[key(d.sets)].y) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("stroke", "white") .attr("stroke-width", 3) .attr("paint-order", "stroke") .text(d => d.value); svg.append("text") .attr("x", fc.x - fc.radius - 140).attr("y", fc.y - fc.radius * 0.95) .attr("font-size", 28).attr("font-weight", 700).text("Fact-checks"); svg.append("text") .attr("x", cn.x + cn.radius * 0.18).attr("y", cn.y - cn.radius * 1.05) .attr("font-size", 28).attr("font-weight", 700).text("Community Notes"); svg.append("text") .attr("x", dl.x - dl.radius * 0.9).attr("y", dl.y + dl.radius + 36) .attr("font-size", 28).attr("font-weight", 700).text("Domain-level"); return svg.node(); } 34:Teb0,BarChartPlatforms = { const margin = { top: 30, right: 20, bottom: 40, left: 100 }; const h = 480, w = Math.min(width, 740); const tickFontSize = 14; const labelFontSize = 16; const yAxisTitleFontSize = 18; const fontWeight = 700; const data = [ { platform: "Facebook", teal: 0.9, orange: 0.4, red: 0.1, leftover: 0.1 }, { platform: "TikTok", teal: 0.7, orange: 0.7, red: 0.0, leftover: 0.02 }, { platform: "X", teal: 0.4, orange: 0.2, red: 0.3, leftover: 0.02 }, { platform: "Instagram", teal: 0.7, orange: 0.2, red: 0.0, leftover: 0.01 } ]; const svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", w) .attr("height", h) .attr("font-family", "Open Sans, system-ui, sans-serif"); const filled = data.map((d) => ({ ...d, leftover: d.leftover ?? 0 })); const keys = ["leftover", "teal", "orange", "red"]; const color = d3 .scaleOrdinal() .domain(keys) .range(["#C7CCD5", "#009E73", "#E69F00", "#C0392B"]); // gray, teal, orange, red const x = d3 .scaleBand() .domain(filled.map((d) => d.platform)) .range([margin.left, w - margin.right]) .padding(0.3); const ymax = d3.max(filled, (d) => keys.reduce((s, k) => s + (d[k] ?? 0), 0)); const y = d3 .scaleLinear() .domain([0, ymax]) .nice() .range([h - margin.bottom, margin.top]); svg .append("g") .attr("transform", `translate(0,${h - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call((g) => g .selectAll(".tick text") .attr("font-size", tickFontSize) .attr("font-weight", fontWeight) .attr("fill", "#111") ); const plotCenterY = (h - margin.bottom + margin.top) / 2; const labelOffset = 70; // left of axis line const yAxis = svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(6) .tickFormat((d) => `${d.toFixed(1)}%`) ) .call((g) => g .selectAll(".tick text") .attr("font-size", tickFontSize) .attr("font-weight", fontWeight) .attr("fill", "#111") ); // keep domain line visible yAxis.select(".domain").attr("stroke", "#444"); yAxis .append("text") .attr("fill", "#111") .attr("font-weight", fontWeight) .attr("font-size", yAxisTitleFontSize) .attr("text-anchor", "middle") .attr("transform", `translate(${-labelOffset}, ${plotCenterY}) rotate(-90)`) .text("Share (%)"); const stack = d3.stack().keys(keys); const series = stack(filled); svg .append("g") .selectAll("g") .data(series) .join("g") .attr("class", (d) => `layer ${d.key}`) .attr("fill", (d) => color(d.key)) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => x(d.data.platform)) .attr("y", (d) => y(d[1])) .attr("height", (d) => Math.max(0, y(d[0]) - y(d[1]))) .attr("width", x.bandwidth()); // Value labels (skip leftover gray) const labelSeries = series.filter((s) => s.key !== "leftover"); const labels = svg .append("g") .selectAll("g") .data(labelSeries) .join("g") .attr("fill", "white") .attr("font-weight", fontWeight) .attr("font-size", labelFontSize) .attr("text-anchor", "middle") .selectAll("text") .data((s) => s.map((d) => ({ ...d, key: s.key }))) .join("text") .text((d) => { const v = d.data[d.key] ?? 0; return v > 0 ? `${v.toFixed(1)}%` : ""; }) .attr("x", (d) => x(d.data.platform) + x.bandwidth() / 2) .attr("y", (d) => (y(d[1]) + y(d[0])) / 2 + 4); // Hide labels if the segment is too small labels.filter((d) => y(d[0]) - y(d[1]) < 16).remove(); return svg.node(); }35:Teb1,BarChartPlatforms2 = { const margin = { top: 30, right: 20, bottom: 40, left: 100 }; const h = 480, w = Math.min(width, 740); const tickFontSize = 20; const labelFontSize = 22; const yAxisTitleFontSize = 28; const fontWeight = 700; const data = [ { platform: "Facebook", teal: 0.9, orange: 0.4, red: 0.1, leftover: 0.1 }, { platform: "TikTok", teal: 0.7, orange: 0.7, red: 0.0, leftover: 0.02 }, { platform: "X", teal: 0.4, orange: 0.2, red: 0.3, leftover: 0.02 }, { platform: "Instagram", teal: 0.7, orange: 0.2, red: 0.0, leftover: 0.01 } ]; const svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", w) .attr("height", h) .attr("font-family", "Open Sans, system-ui, sans-serif"); const filled = data.map((d) => ({ ...d, leftover: d.leftover ?? 0 })); const keys = ["leftover", "teal", "orange", "red"]; const color = d3 .scaleOrdinal() .domain(keys) .range(["#C7CCD5", "#56b4e9", "#0072b2", "#D55E00"]); // gray, teal, orange, red const x = d3 .scaleBand() .domain(filled.map((d) => d.platform)) .range([margin.left, w - margin.right]) .padding(0.3); const ymax = d3.max(filled, (d) => keys.reduce((s, k) => s + (d[k] ?? 0), 0)); const y = d3 .scaleLinear() .domain([0, ymax]) .nice() .range([h - margin.bottom, margin.top]); svg .append("g") .attr("transform", `translate(0,${h - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call((g) => g .selectAll(".tick text") .attr("font-size", tickFontSize) .attr("font-weight", fontWeight) .attr("fill", "#111") ); const plotCenterY = (h - margin.bottom + margin.top) / 2; const labelOffset = 70; // left of axis line const yAxis = svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(6) .tickFormat((d) => `${d.toFixed(1)}%`) ) .call((g) => g .selectAll(".tick text") .attr("font-size", tickFontSize) .attr("font-weight", fontWeight) .attr("fill", "#111") ); // keep domain line visible yAxis.select(".domain").attr("stroke", "#444"); yAxis .append("text") .attr("fill", "#111") .attr("font-weight", fontWeight) .attr("font-size", yAxisTitleFontSize) .attr("text-anchor", "middle") .attr("transform", `translate(${-labelOffset}, ${plotCenterY}) rotate(-90)`) .text("Share (%)"); const stack = d3.stack().keys(keys); const series = stack(filled); svg .append("g") .selectAll("g") .data(series) .join("g") .attr("class", (d) => `layer ${d.key}`) .attr("fill", (d) => color(d.key)) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => x(d.data.platform)) .attr("y", (d) => y(d[1])) .attr("height", (d) => Math.max(0, y(d[0]) - y(d[1]))) .attr("width", x.bandwidth()); // Value labels (skip leftover gray) const labelSeries = series.filter((s) => s.key !== "leftover"); const labels = svg .append("g") .selectAll("g") .data(labelSeries) .join("g") .attr("fill", "white") .attr("font-weight", fontWeight) .attr("font-size", labelFontSize) .attr("text-anchor", "middle") .selectAll("text") .data((s) => s.map((d) => ({ ...d, key: s.key }))) .join("text") .text((d) => { const v = d.data[d.key] ?? 0; return v > 0 ? `${v.toFixed(1)}%` : ""; }) .attr("x", (d) => x(d.data.platform) + x.bandwidth() / 2) .attr("y", (d) => (y(d[1]) + y(d[0])) / 2 + 4); // Hide labels if the segment is too small labels.filter((d) => y(d[0]) - y(d[1]) < 16).remove(); return svg.node(); }36:Tea7,BarChartParties = { const margin = {top: 30, right: 24, bottom: 60, left: 90}; const h = 520, w = Math.min(width, 760); const tickFontSize = 14; const labelFontSize = 16; const yAxisTitleFontSize = 18; const fontWeight = 700 const data = [ {platform: "BSW", teal: 2.4, orange: 1.3, red: 0.1, total: 4.0}, {platform: "AfD", teal: 0.9, orange: 1.2, red: 0.6, total: 2.8}, {platform: "CSU", teal: 1.7, orange: 0.2, red: 0.0, total: 1.9}, {platform: "CDU", teal: 1.3, orange: 0.2, red: 0.05, total: 1.55}, {platform: "Linke", teal: 0.4, orange: 0.1, red: 0.0, total: 0.5}, {platform: "FDP", teal: 0.3, orange: 0.1, red: 0.0, total: 0.4}, {platform: "SPD", teal: 0.3, orange: 0.05, red: 0.0, total: 0.35}, {platform: "Grüne", teal: 0.1, orange: 0.1, red: 0.0, total: 0.2} ]; const svg = d3.create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", w).attr("height", h) .attr("font-family", "Open Sans, system-ui, sans-serif"); const withLeftover = data.map(d => { const sum = (d.teal ?? 0) + (d.orange ?? 0) + (d.red ?? 0); const target = Math.max(sum, d.total ?? sum); return {...d, leftover: Math.max(0, target - sum), _target: target}; }); const keys = ["leftover", "teal", "orange", "red"]; const color = d3.scaleOrdinal().domain(keys) .range(["#C7CCD5", "#009E73", "#E69F00", "#C0392B"]); const x = d3.scaleBand() .domain(withLeftover.map(d => d.platform)) .range([margin.left, w - margin.right]) .padding(0.35); const ymax = d3.max(withLeftover, d => d._target); const y = d3.scaleLinear() .domain([0, ymax]).nice() .range([h - margin.bottom, margin.top]); svg.append("g") .attr("transform", `translate(0,${h - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g.selectAll(".tick text") .attr("font-size", tickFontSize) .attr("font-weight", fontWeight) .attr("fill", "#111")) const plotCenterY = (h - margin.bottom + margin.top) / 2; const labelOffset = 70; svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6).tickFormat(d => `${d.toFixed(1)}%`)) .call(g => g.selectAll(".tick text") .attr("font-size", tickFontSize) .attr("font-weight", 700) .attr("fill", "#111")) //.call(g => g.select(".domain").remove()) .append("text") .attr("fill", "#111") .attr("font-weight", 700) .attr("font-size", yAxisTitleFontSize) .attr("text-anchor", "middle") .attr("transform", `translate(${-labelOffset}, ${plotCenterY}) rotate(-90)`) .text("Share (%)"); const stack = d3.stack().keys(keys); const series = stack(withLeftover); svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d.data.platform)) .attr("y", d => y(d[1])) .attr("height", d => Math.max(0, y(d[0]) - y(d[1]))) .attr("width", x.bandwidth()); const labelSeries = series.filter(s => s.key !== "leftover"); const labels = svg.append("g") .attr("fill", "white").attr("font-weight", 700).attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("g") .data(labelSeries) .join("g") .selectAll("text") .data(s => s.map(d => ({...d, key: s.key}))) .join("text") .text(d => { const v = d.data[d.key] ?? 0; return v > 0 ? `${v.toFixed(1)}%` : ""; }) .attr("x", d => x(d.data.platform) + x.bandwidth()/2) .attr("y", d => (y(d[1]) + y(d[0])) / 2 + 4); labels.filter(d => (y(d[0]) - y(d[1])) < 16).remove(); return svg.node(); } 37:Tea8,BarChartParties2 = { const margin = {top: 30, right: 24, bottom: 60, left: 90}; const h = 520, w = Math.min(width, 760); const tickFontSize = 14; const labelFontSize = 16; const yAxisTitleFontSize = 18; const fontWeight = 700 const data = [ {platform: "BSW", teal: 2.4, orange: 1.3, red: 0.1, total: 4.0}, {platform: "AfD", teal: 0.9, orange: 1.2, red: 0.6, total: 2.8}, {platform: "CSU", teal: 1.7, orange: 0.2, red: 0.0, total: 1.9}, {platform: "CDU", teal: 1.3, orange: 0.2, red: 0.05, total: 1.55}, {platform: "Linke", teal: 0.4, orange: 0.1, red: 0.0, total: 0.5}, {platform: "FDP", teal: 0.3, orange: 0.1, red: 0.0, total: 0.4}, {platform: "SPD", teal: 0.3, orange: 0.05, red: 0.0, total: 0.35}, {platform: "Grüne", teal: 0.1, orange: 0.1, red: 0.0, total: 0.2} ]; const svg = d3.create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", w).attr("height", h) .attr("font-family", "Open Sans, system-ui, sans-serif"); const withLeftover = data.map(d => { const sum = (d.teal ?? 0) + (d.orange ?? 0) + (d.red ?? 0); const target = Math.max(sum, d.total ?? sum); return {...d, leftover: Math.max(0, target - sum), _target: target}; }); const keys = ["leftover", "teal", "orange", "red"]; const color = d3.scaleOrdinal().domain(keys) .range(["#C7CCD5", "#6dd56c", "#34b233", "#C0392B"]); const x = d3.scaleBand() .domain(withLeftover.map(d => d.platform)) .range([margin.left, w - margin.right]) .padding(0.35); const ymax = d3.max(withLeftover, d => d._target); const y = d3.scaleLinear() .domain([0, ymax]).nice() .range([h - margin.bottom, margin.top]); svg.append("g") .attr("transform", `translate(0,${h - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g.selectAll(".tick text") .attr("font-size", tickFontSize) .attr("font-weight", fontWeight) .attr("fill", "#111")) const plotCenterY = (h - margin.bottom + margin.top) / 2; const labelOffset = 70; svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6).tickFormat(d => `${d.toFixed(1)}%`)) .call(g => g.selectAll(".tick text") .attr("font-size", tickFontSize) .attr("font-weight", 700) .attr("fill", "#111")) //.call(g => g.select(".domain").remove()) .append("text") .attr("fill", "#111") .attr("font-weight", 700) .attr("font-size", yAxisTitleFontSize) .attr("text-anchor", "middle") .attr("transform", `translate(${-labelOffset}, ${plotCenterY}) rotate(-90)`) .text("Share (%)"); const stack = d3.stack().keys(keys); const series = stack(withLeftover); svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d.data.platform)) .attr("y", d => y(d[1])) .attr("height", d => Math.max(0, y(d[0]) - y(d[1]))) .attr("width", x.bandwidth()); const labelSeries = series.filter(s => s.key !== "leftover"); const labels = svg.append("g") .attr("fill", "white").attr("font-weight", 700).attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("g") .data(labelSeries) .join("g") .selectAll("text") .data(s => s.map(d => ({...d, key: s.key}))) .join("text") .text(d => { const v = d.data[d.key] ?? 0; return v > 0 ? `${v.toFixed(1)}%` : ""; }) .attr("x", d => x(d.data.platform) + x.bandwidth()/2) .attr("y", d => (y(d[1]) + y(d[0])) / 2 + 4); labels.filter(d => (y(d[0]) - y(d[1])) < 16).remove(); return svg.node(); } 38:[{"id":"6dea8a4d89b1c3c1b2e18adf3175ab5d393aa91280544d37cf63ebfb64112f936b4e787b66fd41345724e3004a7081c3fc85bc3761b5a1aeedb6e7f25cbc6552","href":"https://static.observableusercontent.com/files/6dea8a4d89b1c3c1b2e18adf3175ab5d393aa91280544d37cf63ebfb64112f936b4e787b66fd41345724e3004a7081c3fc85bc3761b5a1aeedb6e7f25cbc6552","name":"image.png","type":"image/png","lastModified":1757513666047.993,"size":110462}] 2d:{"id":"d3ead4d5f02f0ae8","slug":null,"title":"","thumbnail":"0970e8fc285bb0defe009ab9c2c2773a982f92a065fe40fcf8ac9a59866d8f82","access_level":"public","create_time":"$D2025-08-20T00:57:57.441Z","update_time":"$D2025-10-13T09:59:55.740Z","view_time":null,"first_public_time":"$D2025-08-20T06:23:49.285Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"768b0b1650cff748","login":"synosys","name":"SynoSys","avatar_url":"https://avatars-next.observableusercontent.com/a1e17aaf043ef2dde071b60a281dddb515f8d4fca1b826935b9d22371e66e5dd","tier":"starter_2024"},"version":299,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e7aeeb92f6534769","login":"isinkosemen","name":"Isin Kosemen","avatar_url":"https://avatars-next.observableusercontent.com/eba1875f048d3ca949846e25fa68a07e302128a50076b24d7fbb281190817fbf","tier":null}],"members":[{"type":"individual","id":"e7aeeb92f6534769","login":"isinkosemen","name":"Isin Kosemen","avatar_url":"https://avatars-next.observableusercontent.com/eba1875f048d3ca949846e25fa68a07e302128a50076b24d7fbb281190817fbf","tier":null,"role":"editor"},{"type":"team","id":"768b0b1650cff748","login":"synosys","name":"SynoSys","avatar_url":"https://avatars-next.observableusercontent.com/a1e17aaf043ef2dde071b60a281dddb515f8d4fca1b826935b9d22371e66e5dd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":0,"value":"## Social Media Misinformation Fact Checking","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":194,"value":"Domain level method (posts with url links only)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":171,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"RAC (Retrieval Augmented Classification)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":175,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"function drawIntersections(svg, solution, areas) {\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(areas.filter(d => d.sets.length > 1)) // only overlaps\n .join(\"path\")\n .attr(\"d\", d => venn.intersectionAreaPath(d.sets.map(s => solution[s])))\n .attr(\"fill\", \"#999\") // gray\n .attr(\"fill-opacity\", 0.4)\n .attr(\"stroke\", \"none\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"BASE_GREEN = \"#1B7F6B\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"DOMAIN_RED = \"#C0392B\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"palette3 = new Map([\n [\"Fact-checks\", '#0072b2'], // warm: \"#e9b15b\"\n [\"Community Notes\", '#56b4e9'], // teal: \"#2b8c91\"\n [\"Domain-Level\", \"#D55E00\"] // rose: \"#cf6d74\"\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"palette2 = new Map([\n [\"Fact-checks\", '#1B7F6B'], // warm: \"#e9b15b\"\n [\"Community Notes\", '#7FD3BF'], // teal: \"#2b8c91\"\n [\"Domain-Level\", \"#C0392B\"] // rose: \"#cf6d74\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"palette = new Map([\n [\"Fact-checks\", \"#E69F00\"], // warm: \"#e9b15b\"\n [\"Community Notes\", \"#009E73\"], // teal: \"#2b8c91\"\n [\"Domain-Level\", \"#C0392B\"] // rose: \"#cf6d74\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"areas = [\n { sets: [\"Fact-checks\"], size: 1820 + 91 + 15 + 1 },\n { sets: [\"Community Notes\"], size: 4016 + 91 + 7 + 1 },\n { sets: [\"Domain-Level\"], size: 604 + 15 + 7 + 1 },\n { sets: [\"Fact-checks\",\"Community Notes\"], size: 91 + 1 },\n { sets: [\"Fact-checks\",\"Domain-Level\"], size: 15 + 1 },\n { sets: [\"Community Notes\",\"Domain-Level\"], size: 7 + 1 },\n { sets: [\"Fact-checks\",\"Community Notes\",\"Domain-Level\"], size: 1 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"counts = [\n { sets: [\"Fact-checks\"], value: 1820 },\n { sets: [\"Community Notes\"], value: 4016 },\n { sets: [\"Domain-Level\"], value: 604 },\n { sets: [\"Fact-checks\",\"Community Notes\"], value: 91 },\n { sets: [\"Fact-checks\",\"Domain-Level\"], value: 15 },\n { sets: [\"Community Notes\",\"Domain-Level\"], value: 7 },\n { sets: [\"Fact-checks\",\"Community Notes\",\"Domain-Level\"], value: 1 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"venn = require(\"venn.js@0.2.20\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"OpenSans = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2e:"$2d:body"