33:T219e,fig1 = { const container = html`${style}

`; var overlay = d3.select(container).select(".overlay"); var svg = d3 .select(container) .select("svg") .append("g") .attr( "transform", `translate(${_width / 2 - w / 2}, ${height / 2 - h / 2})` ); var label = svg .selectAll("text.label") .data(variables) .enter() .append("text") .classed("label", true); var line = svg .selectAll("line.varline") .data(variables) .enter() .append("line") .classed("varline", true); var line2 = svg .selectAll("line.line2") .data(variables.filter(d => d.level == 0)) .enter() .append("line") .classed("line2", true); var areaLabel = svg .selectAll("g.area") .data(areas) .enter() .append("g") .classed("area", true); areaLabel .append("text") .classed("name", true) .attr("y", "-.25em"); areaLabel .append("text") .classed("value", true) .attr("y", ".75em"); var rect = svg.append("rect"); function renderLine(selection) { selection.each(function(d) { var sel = d3.select(this).classed("derived", d.derived); if (d.axis === 0) { // P(A), y-axis (horizontal lines, moving along vertical axis) sel .attr("x1", x(d.level ? -0.1 : d.side ? mutable p_b : 0)) .attr("x2", x(d.level ? 1.1 : d.side ? 1 : mutable p_b)) .attr("y1", y(d.value())) .attr("y2", y(d.value())); } else if (d.axis === 1) { // P(B), x-axis (vertical lines, moving along horizontal axis) sel .attr("x1", x(d.value())) .attr("x2", x(d.value())) .attr("y1", y(d.level ? -0.1 : d.side ? mutable p_a : 0)) .attr("y2", y(d.level ? 1.1 : d.side ? 1 : mutable p_a)); } }); } function renderLineFragment(context) { const selection = context.selection ? context.selection() : context; selection.each(function(d) { var sel = d3.select(this); if (context !== selection) { sel = sel.transition(context); } if (d.axis === 0) { // P(A), y-axis (horizontal lines, moving along vertical axis) sel .attr("x1", x(d.side ? mutable p_b : 0)) .attr("x2", x(d.side ? 1 : mutable p_b)) .attr("y1", y(d.value())) .attr("y2", y(d.value())); } else if (d.axis === 1) { // P(B), x-axis (vertical lines, moving along horizontal axis) sel .attr("x1", x(d.value())) .attr("x2", x(d.value())) .attr("y1", y(d.side ? mutable p_a : 0)) .attr("y2", y(d.side ? 1 : mutable p_a)); } }); } function renderLineJoined(context) { const selection = context.selection ? context.selection() : context; selection.each(function(d) { var sel = d3.select(this); if (context !== selection) { sel = sel.transition(context); } if (d.axis === 0) { // P(A), y-axis (horizontal lines, moving along vertical axis) sel .attr("x1", x(d.side ? mutable p_b : 0)) .attr("x2", x(d.side ? 1 : mutable p_b)) .attr("y1", y(mutable p_a)) .attr("y2", y(mutable p_a)); } else if (d.axis === 1) { // P(B), x-axis (vertical lines, moving along horizontal axis) sel .attr("x1", x(mutable p_b)) .attr("x2", x(mutable p_b)) .attr("y1", y(d.side ? mutable p_a : 0)) .attr("y2", y(d.side ? 1 : mutable p_a)); } }); } function renderLineDiagonal(context) { const selection = context.selection ? context.selection() : context; selection.each(function(d) { var sel = d3.select(this); if (context !== selection) { sel = sel.transition(context); } if (d.axis === 0) { // P(A), y-axis (horizontal lines, moving along vertical axis) var lineEq = getLineFunctionFromPoints( [mutable p_b / 2, mutable p_a_given_b], [(mutable p_b + 1) / 2, mutable p_a_given_not_b] ); sel .attr("x1", x(d.side ? mutable p_b : 0)) .attr("x2", x(d.side ? 1 : mutable p_b)) .attr("y1", y(lineEq(d.side ? mutable p_b : 0))) .attr("y2", y(lineEq(d.side ? 1 : mutable p_b))); } else if (d.axis === 1) { // P(B), x-axis (vertical lines, moving along horizontal axis) var lineEq = getLineFunctionFromPoints( [mutable p_a / 2, mutable p_b_given_a], [(mutable p_a + 1) / 2, mutable p_b_given_not_a] ); sel .attr("x1", x(lineEq(d.side ? mutable p_a : 0))) .attr("x2", x(lineEq(d.side ? 1 : mutable p_a))) .attr("y1", y(d.side ? mutable p_a : 0)) .attr("y2", y(d.side ? 1 : mutable p_a)); } }); } function renderLabel(selection) { selection.each(function(d) { var sel = d3 .select(this) .text(`${d.name} = ${d.value().toFixed(2)}`) .classed("derived", d.derived); if (d.derived) { sel.style("cursor", "pointer").on("click", () => { overlay.style("pointer-events", "all"); variables.forEach(d => (d.derived = !d.derived)); line2 .filter(d => d.derived) .transition() .duration(500) .call(renderLineDiagonal) .transition() .duration(500) .call(renderLineJoined); line2 .filter(d => !d.derived) .transition() .delay(500) .duration(500) .call(renderLineDiagonal) .transition() .duration(500) .call(renderLineFragment) .on("end", () => { overlay.style("pointer-events", null); render(); }); areaLabel .transition() .delay(500) .duration(500) .attr( "transform", d => `translate(${x(d.coords()[0])}, ${y(d.coords()[1])})` ); label .transition() .delay(500) .duration(500) .style("fill", d => (d.derived ? "#ddd" : "#000")); }); } else { sel.on("click", null); } if (d.axis === 0) { // P(A), y-axis (vertical) sel .style("text-anchor", d.side ? "start" : "end") .attr("x", d.side ? x(1) : 0) .attr("y", y(d.value())) .attr("dx", (d.side ? 1 : -1) * (2 * d.level + 1) + "em") .attr("dy", ".25em"); if (!d.derived) { sel.style("cursor", "ns-resize").call( d3.drag().on("drag", function(d, i) { var val = Math.max(Math.min(y.invert(d3.event.y), 1), 0); d.value(val); d3.select(this).attr("y", y(d.value())); render(); }) ); } } else if (d.axis === 1) { // P(B), x-axis (horizontal) sel .style("text-anchor", "middle") .attr("x", x(d.value())) .attr("y", d.side ? y(1) : 0) .attr("dx", 0) .attr("dy", .4 + (d.side ? 1 : -1) * (2 * d.level + 1) + "em"); if (!d.derived) { sel.style("cursor", "ew-resize").call( d3.drag().on("drag", function(d, i) { var val = Math.max(Math.min(x.invert(d3.event.x), 1), 0); d.value(val); d3.select(this).attr("x", x(d.value())); render(); }) ); } } }); } render(); function render() { label .data() .filter(d => d.derived) .forEach(d => d.value(d.derivation())); // cov(X, Y) = E[XY] - E[X]E[Y] var covariance = mutable p_a * mutable p_b_given_a - mutable p_a * mutable p_b; rect.attr("width", w).attr("height", h); label.call(renderLabel); line.call(renderLine); line2.filter(d => d.derived).call(renderLineJoined); line2.filter(d => !d.derived).call(renderLineFragment); areaLabel .attr( "transform", d => `translate(${x(d.coords()[0])}, ${y(d.coords()[1])})` ) .call(renderAreaLabel); } function renderAreaLabel(selection) { selection.each(function(d) { var sel = d3.select(this); sel.select(".name").text(d.name); sel.select(".value").text(`= ${d.value().toFixed(2)}`); }); } return container; }34:T6e2,md`Note that when you click the gray labels, the transition holds the areas’ areas constant, so that it’s a correct visualization at each instant of the transition. I always get all mixed up with the arithmetic to get from one expression of conditional probability to another, and I find this pretty helpful. For example, you can multiply two edges to get the area of one of the many visible rectangles, or divide the area by one of the edges, or divide one area by the sum of two areas… I gotta come back to this and lay those all out visually step by step. Lately sensitivity and specificity have been in the news, and Katharine and John got antibody tests, and Katharine said “this was the chart that finally got me to understand all the numbers John was throwing out there”; it’s [by Feandoe on Wikipedia](https://commons.wikimedia.org/wiki/File:Sensitivity_and_specificity.svg), modified from [Walber’s](https://commons.wikimedia.org/wiki/File:Precisionrecall.svg):

So I wanted to adapt my graphic. The interactions are the same, but it has been relabeled such that ${tex`A`} is the event that you are sick and ${tex`B`} is the event that you test positive. ${tex.block`\begin{aligned} \text{sick} &\coloneqq P(A) \\ \text{test positive} &\coloneqq P(B) \\ \text{sensitivity} &\coloneqq P(B|A) \\ \text{specificity} &\coloneqq P(\neg B| \neg A) \end{aligned}`} I want to stress that the specific numbers here are totally random, and I have hidden them; the only truth here is in the nature of the relationships _among_ those meaningless numbers. `35:T26f1,fig2 = { const container = html`${style}

SENSITIVITY

SPECIFICITY

`; var overlay = d3.select(container).select(".overlay"); const sensitivity = d3.select(container).select(".sensitivity"); const specificity = d3.select(container).select(".specificity"); var svg = d3 .select(container) .select("svg") .append("g") .attr( "transform", `translate(${_width / 2 - w / 2}, ${height / 2 - h / 2})` ); var areaPath = svg .selectAll("path.area-path") .data(areas) .enter() .append("path") .attr("fill", d => d.color) .classed("area-path", true); var label = svg .selectAll("text.label") .data(variables) .enter() .append("text") .classed("label", true); var line = svg .selectAll("line.varline") .data(variables) .enter() .append("line") .classed("varline", true); var line2 = svg .selectAll("line.line2") .data(variables.filter(d => d.level == 0)) .enter() .append("line") .classed("line2", true); var areaLabel = svg .selectAll("g.area") .data(areas) .enter() .append("g") .classed("area", true); areaLabel .append("text") .classed("name", true) .attr("fill", d => d.textColor) .attr("y", ".3em"); var rect = svg.append("rect"); function renderLine(selection) { selection.each(function(d) { var sel = d3.select(this).classed("derived", d.derived); if (d.axis === 0) { // P(A), y-axis (horizontal lines, moving along vertical axis) sel .attr("x1", x(d.level ? -0.1 : d.side ? mutable p_b : 0)) .attr("x2", x(d.level ? 1.1 : d.side ? 1 : mutable p_b)) .attr("y1", y(d.value())) .attr("y2", y(d.value())); } else if (d.axis === 1) { // P(B), x-axis (vertical lines, moving along horizontal axis) sel .attr("x1", x(d.value())) .attr("x2", x(d.value())) .attr("y1", y(d.level ? -0.1 : d.side ? mutable p_a : 0)) .attr("y2", y(d.level ? 1.1 : d.side ? 1 : mutable p_a)); } }); } function renderLineFragment(context) { const selection = context.selection ? context.selection() : context; selection.each(function(d) { var sel = d3.select(this); if (context !== selection) { sel = sel.transition(context); } if (d.axis === 0) { // P(A), y-axis (horizontal lines, moving along vertical axis) sel .attr("x1", x(d.side ? mutable p_b : 0)) .attr("x2", x(d.side ? 1 : mutable p_b)) .attr("y1", y(d.value())) .attr("y2", y(d.value())); } else if (d.axis === 1) { // P(B), x-axis (vertical lines, moving along horizontal axis) sel .attr("x1", x(d.value())) .attr("x2", x(d.value())) .attr("y1", y(d.side ? mutable p_a : 0)) .attr("y2", y(d.side ? 1 : mutable p_a)); } }); } function renderLineJoined(context) { const selection = context.selection ? context.selection() : context; selection.each(function(d) { var sel = d3.select(this); if (context !== selection) { sel = sel.transition(context); } if (d.axis === 0) { // P(A), y-axis (horizontal lines, moving along vertical axis) sel .attr("x1", x(d.side ? mutable p_b : 0)) .attr("x2", x(d.side ? 1 : mutable p_b)) .attr("y1", y(mutable p_a)) .attr("y2", y(mutable p_a)); } else if (d.axis === 1) { // P(B), x-axis (vertical lines, moving along horizontal axis) sel .attr("x1", x(mutable p_b)) .attr("x2", x(mutable p_b)) .attr("y1", y(d.side ? mutable p_a : 0)) .attr("y2", y(d.side ? 1 : mutable p_a)); } }); } function renderLineDiagonal(context) { const selection = context.selection ? context.selection() : context; selection.each(function(d) { var sel = d3.select(this); if (context !== selection) { sel = sel.transition(context); } if (d.axis === 0) { // P(A), y-axis (horizontal lines, moving along vertical axis) var lineEq = getLineFunctionFromPoints( [mutable p_b / 2, mutable p_a_given_b], [(mutable p_b + 1) / 2, mutable p_a_given_not_b] ); sel .attr("x1", x(d.side ? mutable p_b : 0)) .attr("x2", x(d.side ? 1 : mutable p_b)) .attr("y1", y(lineEq(d.side ? mutable p_b : 0))) .attr("y2", y(lineEq(d.side ? 1 : mutable p_b))); } else if (d.axis === 1) { // P(B), x-axis (vertical lines, moving along horizontal axis) var lineEq = getLineFunctionFromPoints( [mutable p_a / 2, mutable p_b_given_a], [(mutable p_a + 1) / 2, mutable p_b_given_not_a] ); sel .attr("x1", x(lineEq(d.side ? mutable p_a : 0))) .attr("x2", x(lineEq(d.side ? 1 : mutable p_a))) .attr("y1", y(d.side ? mutable p_a : 0)) .attr("y2", y(d.side ? 1 : mutable p_a)); } }); } function renderLabel(selection) { selection.each(function(d) { var sel = d3 .select(this) .text(d.concrete) .classed("derived", d.derived); if (d.derived) { sel.style("cursor", "pointer").on("click", () => { // overlay.style("pointer-events", "all"); variables.forEach(d => (d.derived = !d.derived)); line2 .filter(d => d.derived) // .transition() // .duration(500) // .call(renderLineDiagonal) // .transition() // .duration(500) .call(renderLineJoined); line2 .filter(d => !d.derived) // .transition() // .delay(500) // .duration(500) // .call(renderLineDiagonal) // .transition() // .duration(500) .call(renderLineFragment); // .on("end", () => { // overlay.style("pointer-events", null); // render(); // }); areaLabel // .transition() // .delay(500) // .duration(500) .attr( "transform", d => `translate(${x(d.coords()[0])}, ${y(d.coords()[1])})` ); areaPath // .transition() // .duration(1000) .attr("d", d => cornersToPath(d.corners())); label // .transition() // .delay(500) // .duration(500) .style("fill", d => (d.derived ? "#ddd" : "#000")); }); } else { sel.on("click", null); } if (d.axis === 0) { // P(A), y-axis (vertical) sel .style("text-anchor", d.side ? "start" : "end") .attr("x", d.side ? x(1) : 0) .attr("y", y(d.value())) .attr("dx", (d.side ? 1 : -1) * (2 * d.level + 1) + "em") .attr("dy", ".25em"); if (!d.derived) { sel.style("cursor", "ns-resize").call( d3.drag().on("drag", function(d, i) { var val = Math.max(Math.min(y.invert(d3.event.y), 1), 0); d.value(val); d3.select(this).attr("y", y(d.value())); render(); }) ); } } else if (d.axis === 1) { // P(B), x-axis (horizontal) sel .style("text-anchor", "middle") .attr("x", x(d.value())) .attr("y", d.side ? y(1) : 0) .attr("dx", 0) .attr("dy", .4 + (d.side ? 1 : -1) * (2 * d.level + 1) + "em"); if (!d.derived) { sel.style("cursor", "ew-resize").call( d3.drag().on("drag", function(d, i) { var val = Math.max(Math.min(x.invert(d3.event.x), 1), 0); d.value(val); d3.select(this).attr("x", x(d.value())); render(); }) ); } } }); } render(); function render() { label .data() .filter(d => d.derived) .forEach(d => d.value(d.derivation())); // cov(X, Y) = E[XY] - E[X]E[Y] var covariance = mutable p_a * mutable p_b_given_a - mutable p_a * mutable p_b; rect.attr("width", w).attr("height", h); label.call(renderLabel); line.call(renderLine); line2.filter(d => d.derived).call(renderLineJoined); line2.filter(d => !d.derived).call(renderLineFragment); areaPath.call(renderAreaPath); areaLabel .attr( "transform", d => `translate(${x(d.coords()[0])}, ${y(d.coords()[1])})` ) .call(renderAreaLabel); sensitivity.attr("value", mutable p_b_given_a); specificity.attr("value", 1 - mutable p_b_given_not_a); } function renderAreaPath(selection) { selection.each(function(d) { var sel = d3.select(this); sel.attr("d", cornersToPath(d.corners())); }); } function renderAreaLabel(selection) { selection.each(function(d) { var sel = d3.select(this); sel.select(".name").text(d.concrete); }); } return container; }36:Tb93,md`--- ## Updates **May 29** — Josh Horowitz [writes](https://twitter.com/qualmist/status/1266576136131055617): > I saw you were desperate for better patterns, and I had a better pattern, and then I saw you drew a picture of it right above that paragraph. Do the interlinked parallel representations already! (Your animation is extremely beautiful and provides, tragically, no insight at all.) > (Hmmmmm I see you already have the parallel representations a bit, with the grayed-out version. I suspect that's not salient (?) enough to do the trick. Something like that. But I'm less sure now.) > (Since I'm already backtracking: The anim. does provide some insight about the mechanical relnship between the two reps, and that's important, but it doesn't provide insight about how to predict changes in one rep from changes in the other. (And area-preserving isn't obvious.)) I totally agree, except for his backtracking. No backtracking Josh! You’re right! : ) **June 1** — I’d missed Adam Pearce’s post on fairness from May, with some great similar illustrations. I like the foreground/background coloring, the edge dragging, the triple bind of ratios: https://pair.withgoogle.com/explorables/measuring-fairness/. **June 23** — Ricky Reusser made a version of this kind of visualization using the g9 library, which lets you set some constraints and draw some things and get interactive dragging “for free”, both on the borders between areas and on the areas themselves: https://observablehq.com/@rreusser/hello-g9. **June 26** — Eventually I wanna try a visual explanation of Bayes (no matter how well-trodden the territory), per Visnu’s comment at top. My initial attempt at a kind of plain description that doesn’t say “conditional” or use any notation: >Let's say A and B are two things that may be true or false, with some probability. If A and B are not independent, then the probability of A is changed by knowing B, and vice versa. The probability of A, if you know B, is not the same as the probability of B, if you know A; to get from one to the other, multiply it by the ratio of the probabilities of the thing given to the thing unknown. The ratio of the probability of A given B to that of B given A equals the ratio of the probability of A to that of B. When A and B are similarly probable, the probabilities of each given the other will be similar. But when A is much more probable than B, then the probability of A given B is much greater than the probability of B given A. So even if A and B are correlated, then knowing A is true shouldn't give you much confidence that B is also true. **July 7** — Morgan says that for the main test (of if you currently have coronavirus) you want high sensitivity because false negatives is the bad thing, whereas for the _antibody_ test you want high specificity because false positives is the bad thing. Such a good point! I hadn’t thought about that. Thanks Morgan.`37:T7c3,variables = [ { name: "P(A)", concrete: "Sick", axis: 0, side: 0, level: 1, derived: false, derivation: () => mutable p_b * mutable p_a_given_b + (1 - mutable p_b) * mutable p_a_given_not_b, value: function(_) { return arguments.length ? (mutable p_a = _) : mutable p_a; } }, { name: "P(B|A)", concrete: "If sick, positive", axis: 1, side: 0, level: 0, derived: false, derivation: () => (mutable p_a_given_b * mutable p_b) / mutable p_a, value: function(_) { return arguments.length ? (mutable p_b_given_a = _) : mutable p_b_given_a; } }, { name: "P(B|¬A)", concrete: "If healthy, positive", axis: 1, side: 1, level: 0, derived: false, derivation: () => ((1 - mutable p_a_given_b) * mutable p_b) / (1 - mutable p_a), value: function(_) { return arguments.length ? (mutable p_b_given_not_a = _) : mutable p_b_given_not_a; } }, { name: "P(B)", concrete: "Test positive", axis: 1, side: 0, level: 1, derived: true, derivation: () => mutable p_a * mutable p_b_given_a + (1 - mutable p_a) * mutable p_b_given_not_a, value: function(_) { return arguments.length ? (mutable p_b = _) : mutable p_b; } }, { name: "P(A|B)", concrete: "If positive, sick", axis: 0, side: 0, level: 0, derived: true, derivation: () => (mutable p_b_given_a * mutable p_a) / mutable p_b, value: function(_) { return arguments.length ? (mutable p_a_given_b = _) : mutable p_a_given_b; } }, { name: "P(A|¬B)", concrete: "If negative, sick", axis: 0, side: 1, level: 0, derived: true, derivation: () => ((1 - mutable p_b_given_a) * mutable p_a) / (1 - mutable p_b), value: function(_) { return arguments.length ? (mutable p_a_given_not_b = _) : mutable p_a_given_not_b; } } ]38:T7e8,areas = [ { name: "P(A ⋀ B)", concrete: "True positives", color: "#c9f6ab", textColor: "#3e6b21", value: () => mutable p_a * mutable p_b_given_a, corners: () => variables[0].derived ? [[0, 0], [mutable p_b, mutable p_a_given_b]] : [[0, 0], [mutable p_b_given_a, mutable p_a]], coords: () => variables[0].derived ? [mutable p_b / 2, mutable p_a_given_b / 2] : [mutable p_b_given_a / 2, mutable p_a / 2] }, { name: "P(A ⋀ ¬B)", concrete: "False negatives", color: "#d1dbc9", textColor: "#435438", value: () => mutable p_a * (1 - mutable p_b_given_a), corners: () => variables[0].derived ? [[1, 0], [mutable p_b, mutable p_a_given_not_b]] : [[1, 0], [mutable p_b_given_a, mutable p_a]], coords: () => variables[0].derived ? [(mutable p_b + 1) / 2, mutable p_a_given_not_b / 2] : [(mutable p_b_given_a + 1) / 2, mutable p_a / 2] }, { name: "P(¬A ⋀ B)", concrete: "False positives", color: "#ffb2ac", textColor: "#882620", value: () => (1 - mutable p_a) * mutable p_b_given_not_a, corners: () => variables[0].derived ? [[0, 1], [mutable p_b, mutable p_a_given_b]] : [[0, 1], [mutable p_b_given_not_a, mutable p_a]], coords: () => variables[0].derived ? [mutable p_b / 2, (mutable p_a_given_b + 1) / 2] : [mutable p_b_given_not_a / 2, (mutable p_a + 1) / 2] }, { name: "P(¬A ⋀ ¬B)", concrete: "True negatives", color: "#f1f1f1", textColor: "#333333", value: () => (1 - mutable p_a) * (1 - mutable p_b_given_not_a), corners: () => variables[0].derived ? [[1, 1], [mutable p_b, mutable p_a_given_not_b]] : [[1, 1], [mutable p_b_given_not_a, mutable p_a]], coords: () => variables[0].derived ? [(mutable p_b + 1) / 2, (mutable p_a_given_not_b + 1) / 2] : [(mutable p_b_given_not_a + 1) / 2, (mutable p_a + 1) / 2] } ]39:[{"id":"e6c573c431920c82472c52868d7b535d60a13c908f8fa8b8f09abb1fd38f33ef626cbafe47fb1cda772bd7ab7eb34e17aba1ee7b206784a6dde37ea7c6f71c41","href":"https://static.observableusercontent.com/files/e6c573c431920c82472c52868d7b535d60a13c908f8fa8b8f09abb1fd38f33ef626cbafe47fb1cda772bd7ab7eb34e17aba1ee7b206784a6dde37ea7c6f71c41","name":"1000px-Sensitivity_and_specificity.svg.png","type":"image/png","lastModified":1590783566477.142,"size":120814},{"id":"239f6ae9c155fffd7f9190d04bc46d82a25145bd54655995b3b3d841f05eac1d1c3c3d0c413f0c9da39e0b12d4e6fb085a20adc342ecc9cbe999c91c0fd939aa","href":"https://static.observableusercontent.com/files/239f6ae9c155fffd7f9190d04bc46d82a25145bd54655995b3b3d841f05eac1d1c3c3d0c413f0c9da39e0b12d4e6fb085a20adc342ecc9cbe999c91c0fd939aa","name":"IMG_4623.jpg","type":"image/jpeg","lastModified":1590787854763.489,"size":3591526}] 31:{"title":"Sensitivity and Specificity (sketch)","cells":[{"id":0,"value":"md`# Sensitivity and Specificity (sketch)\nIn September 2017, inspired by Claire’s business school homework, I made this perennially work-in-progress [illustration of conditional probabilities](https://bl.ocks.org/tophtucker/3497751d1ae936f92f3fbf00e17e4a54). \n\nThis kind of thing is a popular subject for visual explanations; two of my old favorites are [Victor Powell’s](http://setosa.io/conditional/) and\n[Eliezer Yudkowsky’s](http://yudkowsky.net/rational/bayes), which are better introductions to Bayes than I can give right now.\n\nBelow, you can click and drag ${tex`P(A)`}, ${tex`P(B|A)`}, and ${tex`P(B|\\neg A)`}, which are independent of each other, and see how ${tex`P(B)`}, ${tex`P(A|B)`}, and ${tex`P(A|\\neg B)`} change; click one of the latter group (grayed-out) to flip-flop which is driving which.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`I took the beautiful transition out because I couldn’t (take the time to) get it to work with the colored areas because my code from 2017 was already a mess and then I rushed to cram it into Observable. I want to come back and clean up the label positioning and interaction affordances. Like labeling ranges instead of points.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`By the way — this thing where a UI can “solve for” one set of variables or the other, and flip-flop which is driving which — I am desperate for better patterns for both showing and implementing it. Please DM me [@tophtucker](https://twitter.com/tophtucker) (or email that @gmail.com) if you think of or know anything about that. Thank you.\n\nAlso I gotta come back to this and show sensitivities of each variable to every other…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"height = 450","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"w = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"h = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"x = d3.scaleLinear().range([0, w])","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"y = d3.scaleLinear().range([0, h])","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"mutable p_a = Math.random()","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"mutable p_b_given_a = Math.random()","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"mutable p_b_given_not_a = Math.random()","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"mutable p_b = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"mutable p_a_given_b = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"mutable p_a_given_not_b = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"cornersToPath = ([[x0, y0], [x1, y1]]) =>\n `M ${x(x0)} ${y(y0)} H ${x(x1)} V ${y(y1)} H ${x(x0)} Z`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"function getLineFunctionFromPoints(a, b) {\n var m = (b[1] - a[1]) / (b[0] - a[0]);\n return x => m * (x - a[0]) + a[1];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"_width = Math.min(640, width)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}