2b:null 2c:["$","title",null,{"children":"Bayes’ Theorem Visualised | ikesau | Observable"}] 31:T617,texmd`There are two major schools of thought on how to do this, each embodying a different philosophy on what probability *actually is.* The differences are nuanced, and if you're anything like me, will take devoted contemplation to truly understand. No single paragraph or example will robustly embed the definition in your mind, so I'll link to some of the best resources I found in the appendix at the bottom of this page if you wish to delve further. But simply put, if two statisticians took 1000 samples of the circles above: A **frequentist** may say: "If you pick a circle at random, there is a 75% chance it will be blue, although it may actually be 74% or 76%." Whereas a **Bayesian** may say: "I am 99% confident that there are 18 blue circles." The former is tied to the frequency of events, and only makes sense in contexts where you can repeatedly gather data. The latter is fundamentally linked to the person making the claim - they are saying that there is an objective truth, and that they have some amount of confidence that their belief corresponds with reality. Ironically, what this means in practice ends up sounding kind of frequentist: if you survey a Bayesian with a bunch of questions and ask them how confident they are in their answers, for the answers they were 70% confident for, they should be right 70% of the time. (Intentionally undergoing this process is known as confidence calibration, and there are [online tools](http://confidence.success-equation.com/) to help improve your epistemic certainty in this way.) ---`32:T4e2,texmd`## So what is Bayes’ theorem, actually? Okay. Bear with me. The theorem states that the probability of a hypothesis, given an event, is equal to: > the probability of the event given the hypothesis > > multiplied by the prior probability of the hypothesis > > divided by the probability of the event. Which, expressed formulaically, looks like: $ {\displaystyle P(H\mid E)={\frac {P(E\mid H) \times P(H)}{P(E)}}} $ ... *What?* In the same way that the area of a circle is equal to $\pi \times r^2$ - a relationship between pi and the radius - Bayes’ theorem is saying that there is a relationship between probabilities of a certain kind. Specifically, there is a relationship between four probabilities that are known as the **posterior**, the **prior**, the **likelihood**, and the **evidence**. And without repeating myself over and over, the relationship is describing how the probability of a a belief should change, proportionally to how significant new information about that probability is. That is, if you think that it's safe to drive a car, you should reconsider your stance *more* if you hear that one-in-one-hundred people crash their cars each year than if you hear that one-in-one-billion people crash into zebras. `33:T612,texmd`Say a hairdresser meets up with his sister for coffee and his sister begins talking about a person they recently met. The hairdresser, obsessed with his job, begins to wonder if this mysterious person has short hair or long hair. Without knowing anything else about the person, the hairdresser may have some **prior belief** that slightly over half of all people have short hair. Without anything else to go on, they could make a large assumption that the person has short hair: $$ \text{Prior belief} = P(\text{Short hair}) = 0.55 $$ But after some time, his sister uses the pronoun "he" to describe the mysterious person, and the hairdresser knows that 80% of his clients with short hair are male. This allows him to test the **likelihood** of his prior belief: $$ P(\text{Male | Short hair}) = 0.8 $$ If he knows that roughly half of all people identify as male (the **evidence**): $$ P(\text{Male}) = 0.5 $$ The hairdresser can use these three probabilities in Bayes’ theorem to generate a new **posterior probability** $$ \begin{aligned} P(\text{Short hair} \mid \text{Male}) & = P(\text{Short hair}) \times \frac{P(\text{Male} \mid \text{Short hair})}{P(\text{Male})}\\ & = 0.55 \times \frac{0.8}{0.5} \\ & = 0.88 \end{aligned} $$ Thus the hairdresser can now be 88% confident that this mysterious person has short hair. Note that this is higher than both the 55% **prior belief** and the 80% **likelihood**. The hairdresser's confidence has been adjusted proportionately by how much the new information should nudge his beliefs.`34:Tf83,{ const svg = d3.create("svg").attr("viewBox", "0,0,1000,300"); const g = svg.append("g").attr("transform", "translate(30,35)"); // terribly un-DRY TeX-in-D3-should-have-used-a-library T_T if (hairdresserFilter !== "None") { const tg = svg.append("g").attr("transform", "translate(350,100)"); const numerator = tg .append("text") .attr("x", 50) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", 32); const separator = tg .append("line") .attr("x1", 0) .attr("y1", 40) .attr("x2", 100) .attr("y2", 40) .attr("stroke-width", 1) .attr("stroke", "black"); const denominatorLeft = tg .append("text") .attr("x", 6) .attr("y", 70) .attr("text-anchor", "right") .attr("font-size", 32); const plus = tg .append("text") .attr("x", 50) .attr("y", 70) .attr("text-anchor", "middle") .attr("font-size", 32); plus.text("+"); const denominatorRight = tg .append("text") .attr("x", 63) .attr("y", 70) .attr("text-anchor", "left") .attr("font-size", 32); const equals = tg .append("text") .attr("x", 120) .attr("y", 50) .attr("font-size", 32); equals.text("="); const probability = tg .append("text") .attr("x", 160) .attr("y", 50) .attr("font-size", 32); if (hairdresserFilter === "Prior belief") { numerator.text("55"); denominatorRight.text("45"); denominatorRight.attr("fill", "lightgrey"); denominatorLeft.text("55"); probability.text("0.55"); } if (hairdresserFilter === "Likelihood") { numerator.text("44"); numerator.attr("fill", blue); denominatorRight.text("11"); denominatorRight.attr("fill", red); denominatorLeft.text("44"); denominatorLeft.attr("fill", blue); probability.text("0.8"); } if (hairdresserFilter === "Evidence") { numerator.text("50"); numerator.attr("fill", blue); denominatorRight.text("50"); denominatorRight.attr("fill", red); denominatorLeft.text("50"); denominatorLeft.attr("fill", blue); probability.text("0.5"); } if (hairdresserFilter === "Posterior belief") { numerator.text("44"); numerator.attr("fill", blue); denominatorRight.text("6"); denominatorRight.attr("fill", blue.brighter(0.6)); denominatorLeft.text("44"); denominatorLeft.attr("fill", blue); probability.text("0.88"); } } for (let y = 0; y < 10; ++y) { for (let x = 0; x < 10; ++x) { const index = y * 10 + x; let gender = index < 50 ? "male" : "female"; let fill = gender === "male" ? blue : red; let hair = gender === "male" ? index < 44 ? "short" : "long" : index < 89 ? "long" : "short"; if (hairdresserFilter === "Prior belief") { if (hair === "long") { fill = "lightgrey"; } else { fill = "#333"; } } if (hairdresserFilter === "Posterior belief") { if (gender === "female") { fill = "white"; } else if (hair === "long") { fill = blue.brighter(0.65); } } if (hairdresserFilter === "Likelihood") { if (hair === "long") { fill = "white"; } } if (hairdresserFilter === "Evidence") { g.append("rect") .attr("x", x * 25 - 8) .attr("y", y * 25 - 8) .attr("width", 16) .attr("height", 16) .attr("fill", fill); } else if (hair === "short") { g.append("circle") .attr("cx", x * 25) .attr("cy", y * 25) .attr("r", 8) .attr("fill", fill); } else { longhair(g, x * 25, y * 25, fill); } } } return svg.node(); }35:T937,{ if (hairdresserFilter === "None") { return md`In this 10x10 grid, the circles represent short haircuts and the keyholes are long. (It's meant to look like shoulder length hair 😭) Blue is male and red is female. Note that this representation isn't actually "true" in either the real world *or* the hairdresser's hypothetical one. It's a *model* of it based on his specific priors and information. Click the different radio buttons to see how new information affects the hairdresser's model.`; } if (hairdresserFilter === "Prior belief") { return texmd` **The prior**, $P(\text{H})$ Before knowing anything about the gender of the person, the hairdresser could only go off of his **prior belief** that short hair is slightly more common than long. He assumes that the person is one of the black circles and not one of the light grey keyholes.`; } if (hairdresserFilter === "Likelihood") { return texmd` **The likelihood**, $P(\text{E} \mid \text{H})$ After finding out that the person is male, the hairdresser can test the **likelihood** of his original hypothesis. In this case, assuming the person *does* have short hair, how likely they are to be male.`; } if (hairdresserFilter === "Evidence") { return texmd` **The evidence**, $P(\text{E})$ The overall probability of the new piece of information (in this case the probability of a person being male) is how the hairdresser determines how influential this new piece of information should be. By assuming 0.5, the hairdresser is making an estimation, but he could also check official census data if he wanted to know the gender distribution in his country with characteristically obsessive precision.`; } if (hairdresserFilter === "Posterior belief") { return texmd` **The posterior**, $P(\text{H} \mid \text{E})$ Given the person is male, how likely is it that they have short hair. Because his prior hypothesis is still likely given the new information, the hairdresser can adjust his beliefs in the positive direction. This new **posterior belief** is how confident the hairdresser can be in his hypothesis, after adjusting for the new information. Remember, this visualization isn't the "true state of the world". It's a representation of his own model, and how the different segments of it fit together based on his beliefs and information.`; } }36:T4c7,{ const svg = d3.create("svg").attr("viewBox", "0,0,1000,300"); const g = svg.append("g").attr("transform", "translate(30,35)"); const randomIndexes = shuffleArray( new Array(100).fill().map((_, i) => i), diseasePrior ); const numberOfFalsePositives = (diseaseFalsePositive / 100) * (100 - diseasePrior); let falsePositiveIndexes = randomIndexes .filter((x) => x >= diseasePrior) .slice(0, numberOfFalsePositives); for (let y = 0; y < 10; ++y) { for (let x = 0; x < 10; ++x) { const index = y * 10 + x; const positive = index < diseasePrior; const isFalseNegative = index >= diseasePrior - (diseasePrior * diseaseFalseNegative) / 100; const fill = positive ? red : "#333"; if ( (positive && !isFalseNegative) || (!positive && falsePositiveIndexes.includes(index)) ) { g.append("circle") .attr("cx", x * 25) .attr("cy", y * 25) .attr("r", 8) .attr("fill", "none") .attr("stroke", "red"); } g.append("circle") .attr("cx", x * 25) .attr("cy", y * 25) .attr("r", 6) .attr("fill", fill); } } return svg.node(); }37:T45e,## Resources - *Crash Course Statistics* - [You Know I’m All About that Bayes](https://www.youtube.com/watch?v=9TDjifpGj-k) - [Bayes in Science and Everyday Life](https://www.youtube.com/watch?v=51bLRF02b4w) - *Probabilistic World* - [Calculating Coin Bias](https://www.probabilisticworld.com/calculating-coin-bias-bayes-theorem/) - [Frequentist and Bayesian Approaches in Statistics](https://www.probabilisticworld.com/frequentist-bayesian-approaches-inferential-statistics/) - *Jake VanderPlas* - [Frequentism and Bayesianism: A Python-driven Primer](https://arxiv.org/pdf/1411.5018.pdf) - [Frequentism and Bayesianism: What's the Big Deal?](https://www.youtube.com/watch?v=KhAUfqhLakw) - [Bayesian A/B Testing: A Hypothesis Test that Makes Sense](https://www.countbayesie.com/blog/2015/4/25/bayesian-ab-testing) - [An Intuitive Explanation Of Bayes’ Theorem](https://www.readthesequences.com/An-Intuitive-Explanation-Of-Bayess-Theorem) - [Do you know what you know?](http://confidence.success-equation.com/) - [Bayes Billiards with Tom Crawford](https://www.youtube.com/watch?v=rwtDBhD6Mq0) 38:[] 2f:{"id":"d19937d529dcc0e9","slug":"bayes-theorem-visualised","title":"Bayes’ Theorem Visualised","thumbnail":"b716bb4796fa34a514d345a18e254fca8b450bf1ea5b121d6a7218abda273c1a","access_level":"public","create_time":"$D2021-09-04T23:33:32.627Z","update_time":"$D2022-03-01T07:48:33.917Z","view_time":null,"first_public_time":"$D2022-01-31T01:22:32.974Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2299edab1244ee80","login":"ikesau","name":"ikesau","avatar_url":"https://avatars-next.observableusercontent.com/2c9b79e1f724e178262a9c61abb970dde273f055a54014ae9aef6c5c298882aa","tier":"starter_2024"},"version":3945,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b7d57f3cb9c3785b","login":"ikesau","name":"ikesau","avatar_url":"https://avatars-next.observableusercontent.com/2c9b79e1f724e178262a9c61abb970dde273f055a54014ae9aef6c5c298882aa","tier":null}],"members":[{"type":"individual","id":"b7d57f3cb9c3785b","login":"ikesau","name":"ikesau","avatar_url":"https://avatars-next.observableusercontent.com/2c9b79e1f724e178262a9c61abb970dde273f055a54014ae9aef6c5c298882aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"4ce30f2489e1d8c4","slug":"nice-ones","title":"nice ones","owner":{"id":"2299edab1244ee80","login":"ikesau","name":"ikesau"}},"type":"notebook","body":{"title":"Bayes’ Theorem Visualised","cells":[{"id":0,"value":"# Bayes’ Theorem Visualised\n\nHey.\n\nSo there's this thing. \n\nFor Google, it's an algorithm to make their spam filtering the best in the world. \n\nFor medical professionals, it's why positive test results for diseases are often misleading.\n\nFor a certain type of technocrat, it's a philosophy that empowers them to understand how the world works as reliably as possible.\n\nAt its core, it's a statistical identity; a mathematical formula to do with probabilities.\n\nIt's called Bayes’ Theorem, and I'm not being hyperbolic when I say that understanding it can dramatically change your life.\n\nThis article will attempt to build up an intuitive understanding of the theorem, what it is, and why it works. About halfway through, the article will start to involve more code. If you don't know how to code, feel free to skim and move on to the further reading in the resources. \n\nAlternatively, you could close the tab and go on about your life.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3575,"value":"## Classical probability revision\n\nFirst let's review some basic probability concepts that you may have forgotten from school. Try answering the question yourself before revealing the result. Remember, getting things wrong is okay! It means you're learning something!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":624,"value":"texmd`We have 24 circles.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"drawCircles(0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":638,"value":"texmd`What's the probability that a circle selected at random is blue?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3598,"value":"viewof pHalfBlueShowAnswer = Inputs.button(\"Show answer\", {\n value: false,\n reducer: () => true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3582,"value":"{\n if (pHalfBlueShowAnswer) return tex`\\large P(\\text{Blue}) = 0.5`;\n return tex`\\large P(\\text{Blue}) = `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3585,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":646,"value":"drawCircles(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":653,"value":"texmd`What about now?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3607,"value":"viewof pAllBlueShowAnswer = Inputs.button(\"Show answer\", {\n value: false,\n reducer: () => true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3612,"value":"{\n if (pAllBlueShowAnswer) return tex`\\large P(\\text{Blue}) = 1`;\n return tex`\\large P(\\text{Blue}) = `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3617,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":655,"value":"drawCircles(0.25)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":658,"value":"texmd`And now?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3654,"value":"viewof pThreeQuartersBlueShowAnswer = Inputs.button(\"Show answer\", {\n value: false,\n reducer: () => true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3627,"value":"{\n if (pThreeQuartersBlueShowAnswer) return tex`\\large P(\\text{Blue}) = 0.75`;\n return tex`\\large P(\\text{Blue}) = `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3623,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"texmd`Let's put 8 dots inside the circles.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":669,"value":"drawCircles(0.4, 0.6, 0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":675,"value":"texmd`What's the probability that a randomly selected circle has a dot?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3665,"value":"viewof pDotShowAnswer = Inputs.button(\"Show answer\", {\n value: false,\n reducer: () => true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3629,"value":"{\n if (pDotShowAnswer)\n return texmd`$\\large P(\\text{Dot}) = \\Large \\frac{1}{3}$\n\n*There are 24 circles, 8 of them have dots, 8/24 is the same as 1/3.*`;\n return tex`\\large P(\\text{Dot}) = `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3704,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3659,"value":"texmd`And if we randomly pick a red circle? \n\nNote: the $P(\\text{Dot} \\mid \\text{Red})$ notation, means: \"Given that the circle is red, what is the probability that it has a dot?\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3674,"value":"viewof pRedDotShowAnswer = Inputs.button(\"Show answer\", {\n value: false,\n reducer: () => true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3630,"value":"{\n if (pRedDotShowAnswer)\n return texmd`$\\large P(\\text{Dot} \\mid \\text{Red}) = \\Large \\frac{3}{5}$\n\n*There are 10 red circles, 6 of them have dots, 6/10 is the same as 3/5.*`;\n return tex`\\large P(\\text{Dot} \\mid \\text{Red}) = `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3708,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3662,"value":"md`And a blue?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3685,"value":"viewof pBlueDotShowAnswer = Inputs.button(\"Show answer\", {\n value: false,\n reducer: () => true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3632,"value":"{\n if (pBlueDotShowAnswer)\n return texmd`$\\large P(\\text{Dot} \\mid \\text{Blue}) = \\Large \\frac{1}{7}$\n\n*There are 14 blue circles, 2 of them have dots. 2/14 is the same as 1/7.*`;\n return tex`\\large P(\\text{Dot} \\mid \\text{Blue}) = `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3642,"value":"md`---`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3736,"value":"## The philosophy of statistical inference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":894,"value":"texmd`These simple examples give us perfect information, and thus we can evaluate their probabilities in the classical sense.\n\nBut what should we do when we don't have information about the entire set? When we can only take samples and make inferences?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":888,"value":"drawCircles(0, 0, 0, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3753,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3795,"value":"texmd`Let's look at a scenario to see this relationship in action.\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3798,"value":"## The Bayesian Hairdresser","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":901,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1007,"value":"texmd`So far this is all very *\"well, okay, if you say so\"*. Let's actually visualise the scenario to see what's going on.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1009,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1099,"value":"viewof hairdresserFilter = Inputs.radio(\n [\"None\", \"Prior belief\", \"Likelihood\", \"Evidence\", \"Posterior belief\"],\n {\n label: \"Component\",\n value: \"None\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1145,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3876,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3803,"value":"## Bayesian probability in medicine","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2901,"value":"No explanation of Bayes’ theorem would be complete without a false positive test scenario, so let's make one where you can control the parameters.\n\nImagine there's a disease with a certain prevalence (🤫), and a test for the disease. The test sometimes detects false positives, and sometimes doesn't detect actual positives (i.e. false negatives.)\n\nUsing the sliders below you can control the rate of these three variables and see how it affects the implications of receiving a positive test.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2876,"value":"viewof diseasePrior = Inputs.range([0, 100], {\n label: \"Prevalence (%)\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2881,"value":"viewof diseaseFalseNegative = Inputs.range([0, 100], {\n label: \"False negatives (%)\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2878,"value":"viewof diseaseFalsePositive = Inputs.range([0, 100], {\n label: \"False positives (%)\",\n step: 1,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2903,"value":"md`In this scenario, ${diseasePrior} out of 100 people actually have the disease.\n\n${\n diseasePrior - Math.floor((diseaseFalseNegative / 100) * diseasePrior)\n} out of those ${diseasePrior} are correctly diagnosed by the test.\n\n${100 - diseasePrior} out of 100 people don't have the disease.\n\n${Math.floor((diseaseFalsePositive / 100) * (100 - diseasePrior))} of those ${\n 100 - diseasePrior\n} get false positives from their test.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2555,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3241,"value":"md`Here's the bit that even doctors miscalculate: given the rates shown in the grid, if you recieved a positive test, what's the probability that you actually have the disease? Try to work it out beforehand then check your answer by clicking the button below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3383,"value":"viewof showDiseaseAnswer = {\n return Inputs.button(\"Toggle answer\", {\n value: false,\n reduce: (x) => !x\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3247,"value":"{\n if (!showDiseaseAnswer) return md``;\n let prior = diseasePrior / 100;\n let likelihood = Number(prior * (1 - diseaseFalseNegative / 100));\n let unprior = 1 - prior;\n let unlikelihood = Number(\n String((unprior * diseaseFalsePositive) / 100).slice(0, 4)\n );\n\n return tex`\n\\large P(\\text{Disease} \\mid \\text{Positive}) = ${(\n likelihood /\n (likelihood + unlikelihood)\n ).toPrecision(3)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3445,"value":"{\n if (!showDiseaseAnswer) return md``;\n return md`Did you get it right? If not, hide the answer, tweak the values with the slider, and try again. 🙂\n\nRemember, you're trying to find the percentage of people with a positive test that *actually have the disease*. The more false positives there are, the lower this percentage will be.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1351,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1354,"value":"## Bayes’ Theorem in science","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1373,"value":"The hairdresser and test examples are cases of belief updating - a central aspect of Bayesianism.\n\nBut it's not always the case that our prior beliefs are exposed to a new and complete hypothesis.\n\nWhat if we are taking a sample of some data? How do we apply Bayes’ theorem then?\n\nSay we have 24 circles with an unknown distribution of red and blue.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1376,"value":"drawCircles(0, 0, 0, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1379,"value":"texmd`A frequentist would take as many samples as they could, and infer the probabilities of each outcome accordingly. Given enough samples, $P(\\text{Blue})$ will be very close to some integer $x$ divided by 24, where $0 \\leqslant x \\leqslant 24$.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1389,"value":"texmd`On the other hand, a Bayesian would define each of the possible configurations (which I shall refer to as *biases*) and evaluate their specific probabilities given the data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1694,"value":"texmd`In the circle scenario, given $n$ circles, there are $n + 1$ biases, and without anything else to go on, we should assume that any bias has a $\\Large\\frac{1}{n + 1}$ chance of being correct.\n\ne.g.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1698,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", \"0,0,400,75\");\n\n for (let row = 0; row <= 4; ++row) {\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(10, ${row * 15 + 10})`);\n\n g.append(\"text\")\n .text(`= P(Bias = ${row / 4}) = 0.2`)\n .attr(\"x\", 60)\n .attr(\"y\", 2)\n .attr(\"font-size\", 8);\n\n for (let column = 0; column < 4; ++column) {\n g.append(\"circle\")\n .attr(\"cx\", column * 15)\n .attr(\"cy\", 0)\n .attr(\"r\", 4)\n .attr(\"fill\", row <= column ? red : blue);\n }\n }\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1754,"value":"texmd`\nIn our 24-circle case, there are 25 possible biases, from $\\large\\frac{0}{24}$ to $\\large\\frac{24}{24}$ - each with a probability of $\\large\\frac{1}{25}$.\n\nHow do we incorporate this into Bayes’ theorem?\n\n$\\displaystyle P(H\\mid E)={\\frac {P(E\\mid H) \\times P(H)}{P(E)}}$\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2114,"value":"texmd`**The prior**, $P(H)$, is the probability that a certain bias is correct (i.e. there are $x$ blue circles.)\n\n> e.g. $P(\\text{Bias}=\\frac{1}{24})$ , which we initialize at $\\large\\frac{1}{25}$.\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2118,"value":"texmd`**The likelihood**, $P(E \\mid H)$, is the probability of some event given the prior. \n> e.g. $P(\\text{Blue} \\mid \\text{Bias}=\\frac{1}{24})$ — \"If the bias for Blue circles *__is__* $\\large\\frac{1}{24}$, what are the odds of me getting a Blue circle?\"\n\nBecause there are only two possible outcomes, we can use this part of the binomial formula to calculate the probability of either case.\n\n$\\Large P(k \\mid p) = p^k \\times (1-p)^{(1-k)}$\n\n$p = \\text{probability}$\n\n$k = \\text{outcome}$`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2182,"value":"viewof likelihoodBias = Inputs.range([0, 24], {\n label: \"Bias\",\n step: 1,\n value: 8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2186,"value":"viewof likelihoodOutcome = Inputs.radio([\"Blue\", \"Red\"], {\n label: \"Outcome\",\n value: \"Blue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2148,"value":"{\n const p = (likelihoodBias / 24).toPrecision(2);\n const k = likelihoodOutcome === \"Blue\" ? 1 : 0;\n const result = p ** k * (1 - p) ** (1 - k);\n\n return tex`\\begin{aligned}\n\\large P(\\text{${likelihoodOutcome}} \\mid \\text{Bias = }\\frac{${likelihoodBias}}{24}) &= ${p}^${k} \\times (1-${p})^{(1-${k})} \\\\ \\\\\n& = ${(p ** k).toPrecision(2)} \\times ${((1 - p) ** (1 - k)).toPrecision(\n 2\n )} \\\\ \\\\\n& = ${result.toPrecision(2)}\n\n\\end{aligned}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2708,"value":"In code, this formula is implemented like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2478,"value":"function calculateLikelihood(bias, outcome) {\n return bias ** outcome * (1 - bias) ** (1 - outcome);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2193,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2116,"value":"texmd`**The evidence**, $P(E)$, is the overall probability of getting a Blue circle. It's the sum of all 25 **prior** $\\times$ **likelihood** products, and has the same value for all biases.\n\n> e.g. For our intial distribution\n$$\n\\begin{aligned}\nP(E) & = \\sum_{i = 0}^{24} \\frac{i}{24} \\times \\frac{1}{25} \\\\ \\\\\n\n& = \\frac{0}{600} + \\frac{1}{600} + \\frac{2}{600} + \\dots + \\frac{24}{600} \\\\ \\\\\n& = 0.5\n\\end{aligned}\n$$`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2722,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1858,"value":"So where does this leave us?\n\nLet's begin by setting up our initial prior beliefs in code: that of the 25 possible biases, all are equally likely.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1846,"value":"biases = new Array(25).fill(1 / 25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2504,"value":"*In this structure, the __index__ of a value encodes its bias, and the __value__ represents the probability of that bias.*\n\n*e.g.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2510,"value":"biases[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2517,"value":"texmd`*The bias of $\\large\\frac{0}{24}$ (i.e. all circles are red) has a probabilty of $\\large\\frac{1}{25}$ (0.04)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1861,"value":"On a chart, we can see this as a uniform distribution.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1409,"value":"Plot.plot({\n y: {\n grid: true,\n domain: [0, 1],\n label: \"↑ probability\"\n },\n x: {\n grid: true,\n type: \"point\",\n label: \"→ bias (number of blue circles)\"\n },\n marks: [Plot.line(biases, { x: (x, i) => i, y: (x, i) => x })]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2367,"value":"Let's also create our initial evidence, that the odds of selecting a blue circle are 1:1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2560,"value":"function calculateEvidence(biases, outcome) {\n return (\n biases\n .map((prior, i) => {\n // derive the bias (how many circles are blue)\n // e.g. given [0.25, 0.25, 0.25, 0.25]\n // the bias at i == 2 is 2/3 circles are blue\n const bias = i / (biases.length - 1);\n\n // given that bias, how likely was the outcome\n const likelihood = calculateLikelihood(bias, outcome);\n\n // multiply the prior probability by the new likelihood\n // e.g. 0.25 * 2/3\n return prior * likelihood;\n })\n\n // add these products together to get the overall probability of a blue circle\n .reduce(sum)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1983,"value":"innitialEvidence = calculateEvidence(biases, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1449,"value":"md`Now let's imagine we take our first sample and do in fact draw a **Blue** circle\n\nThis should immediately rule out the prior hypothesis that there were 0 blue circles. Let's implement Bayes’ theorem as a function and see if it confirms our intuition.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1872,"value":"function calculatePosterior(prior, bias, outcome, evidence) {\n const likelihood = calculateLikelihood(bias, outcome);\n return (likelihood * prior) / evidence;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2303,"value":"calculatePosterior(\n 1 / 25, // the prior odds of this bias being correct\n 0 / 24, // the bias itself\n 1, // the outcome, 1 for Blue\n 0.5 // the evidence\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2291,"value":"texmd`Indeed it does! In fact, after a single sample, we'll already see all our possible biases change their probabilities in a way that makes sense - with 24/24 blue circles being most probable given the \"100%\" blue rate. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2283,"value":"Plot.plot({\n y: {\n grid: true,\n domain: [0, 1],\n label: \"↑ probability\"\n },\n x: {\n grid: true,\n type: \"point\",\n label: \"→ number of blue circles\"\n },\n marks: [\n Plot.line(\n biases.map((x, index) => calculatePosterior(x, index / 24, 1, 0.5)),\n { x: (x, i) => i, y: (x, i) => x }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2312,"value":"texmd`Now let's take 999 more samples and see what happens.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1965,"value":"samples = new Array(1000)\n .fill()\n .map((x, i) => (i == 0 ? 1 : Number(Math.random() < 6 / 24)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2699,"value":"Charted below we see the total distribution of the data, clearly skewing Red by a factor of around 3:1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2375,"value":"{\n const amountOfBlue = samples.filter((x) => x).length;\n const amountOfRed = samples.length - amountOfBlue;\n return Plot.plot({\n y: {\n grid: true\n },\n x: {\n label: \"\"\n },\n marks: [\n Plot.barY(\n [\n { colour: \"Red\", count: amountOfRed },\n { colour: \"Blue\", count: amountOfBlue }\n ],\n {\n x: \"colour\",\n y: \"count\",\n fill: (d) =>\n d.colour === \"Blue\" ? blue.formatHex() : red.formatHex()\n }\n )\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2735,"value":"But let's go on to investigate this data as a Bayesian would, by finding the __*Maximum a Posteriori*__ (MAP).\n\nWe iterate through our samples, calculating a new posterior probability for each blue or red circle. That *posterior* probability then becomes the *prior* probability as we look at the next sample. Each sample nudges each bias towards being either more or less likely, with one bias eventually becoming the most likely.\n\nThat most-likely bias is our Maximum a Posteriori.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2641,"value":"posteriors = {\n let bs = biases;\n\n samples.slice(0, numberOfSamplesToUse).forEach((outcome) => {\n let likelihoods = bs.map((_, i) => {\n const bias = i / (bs.length - 1);\n return calculateLikelihood(bias, outcome);\n });\n\n let evidence = likelihoods\n .map((likelihood, i) => likelihood * bs[i])\n .reduce(sum);\n\n bs = bs.map((bias, i) => (bias * likelihoods[i]) / evidence);\n });\n\n return bs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1869,"value":"Plot.plot({\n y: {\n grid: true,\n domain: [0, 1],\n label: \"↑ probability\"\n },\n x: {\n grid: true,\n type: \"point\",\n label: \"→ number of blue circles\"\n },\n marks: [Plot.line(posteriors, { x: (x, i) => i, y: (x, i) => x })]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2325,"value":"viewof numberOfSamplesToUse = Inputs.range([1, samples.length], {\n label: \"Samples to use\",\n step: 1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2778,"value":"Use this slider to increase the number of the samples used and see how the most likely bias is found.\n\nNote that with fewer samples, we have less confidence in any particular bias being correct. But that confidence rapidly increases as the improbable biases are eliminated.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2782,"value":"md`Therefore, with ${numberOfSamplesToUse} samples, the MAP bias is ${\n getMAP(posteriors)[1] * 24\n} with a probability of ${getMAP(posteriors)[0].toPrecision(2)} 🙃`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2827,"value":"## Conclusion\n\nWhile this example used data that was discrete – red or blue, some fraction of 24 — you can apply this method to all sorts of continuous data if you simply divide the sample space into evenly sized slices. Bayes himself came up with this method while thinking about how to find the position of a billiard ball on a table. (See *Bayes Billiards with Tom Crawford* for an example of this in action.) \n\nThere is a lot more to learn and explore! Belief networks, likelihood ratios, The Logic of Science, oh my - the entire \"rationalism\" community is built on these concepts. If you enjoyed this article or want to learn more about how to understand the world probabilistically, check out the resources below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3890,"value":"## Extra bits","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3894,"value":"texmd`\n\n#### Where does Bayes' Theorem come from?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3916,"value":"tex`\n\\begin{aligned}\nP(H|E) \t &= \tP(H|E) \\\\ \\\\\nP(H|E) \t &= \t\\frac{P(E,H)}{P(E)} \\\\ \\\\\nP(H|E) \t &= \t\\frac{P(E,H)}{P(E,H) + P(E,¬H)} \\\\ \\\\\nP(H|E) \t &= \t\\frac{P(E|H) \\times P(H)}{P(E|H) \\times P(H) + P(E|¬H) \\times P(¬H)}\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3519,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":915,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3515,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":614,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":620,"value":"import { texmd } from \"@kelleyvanevert/katex-within-markdown\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1033,"value":"red = d3.hsl(\"red\").brighter(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1034,"value":"blue = d3.hsl(\"blue\").brighter(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1050,"value":"function longhair(parent, x, y, fill) {\n const g = parent.append(\"g\");\n g.append(\"circle\")\n .attr(\"cx\", x)\n .attr(\"cy\", y)\n .attr(\"r\", 8)\n .attr(\"fill\", fill);\n g.append(\"rect\")\n .attr(\"x\", x - 8)\n .attr(\"width\", 16)\n .attr(\"y\", y)\n .attr(\"height\", 10)\n .attr(\"fill\", fill);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"function drawCircles(\n pRed = 0.5,\n pRedPearl = 0,\n pBluePearl = 0,\n shouldGreyOut = false,\n singleIndexToReveal\n) {\n const totalCircles = 24;\n\n const svg = d3.create(\"svg\");\n svg.attr(\"viewBox\", `0,0,${totalCircles * 10},10`);\n\n for (let i = 0; i < totalCircles; ++i) {\n const isRed = i / totalCircles < pRed;\n const colour =\n i !== singleIndexToReveal && shouldGreyOut\n ? \"lightgrey\"\n : isRed\n ? red\n : blue;\n const hasPearl = isRed\n ? i >= totalCircles * pRed * (1 - pRedPearl)\n : i < totalCircles * (1 - pRed) * pBluePearl + totalCircles * pRed;\n\n svg\n .append(\"circle\")\n .attr(\"cx\", i * 10 + 5)\n .attr(\"cy\", 5)\n .attr(\"r\", 2)\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke\", colour)\n .attr(\"fill\", hasPearl ? \"white\" : colour);\n }\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2269,"value":"sum = (a = 0, b) => a + b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2984,"value":"function shuffleArray(array, seed = 1) {\n let temp = [...array];\n\n for (let i = 0; i < 1000; ++i) {\n const midpoint = (i + seed) % temp.length;\n\n const a = temp.slice(0, midpoint).reverse();\n const b = temp.slice(midpoint);\n temp = b.concat(a);\n }\n\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3523,"value":"shuffleArray([1, 2, 3, 4, 5, 6], 7)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2794,"value":"function getMAP(posteriors) {\n const MAP = [...posteriors].sort((a, b) => a < b)[0];\n const bias = posteriors.indexOf(MAP) / (posteriors.length - 1);\n return [MAP, bias];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2869,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3941,"value":"// draft WIP","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3870,"value":"/*\ntexmd`The above example is a real (if contrived) example of how Bayesian thinking can help someone form accurate beliefs, but the visualisation may mislead you slightly. It makes it look like the hairdresser already knew the exact distribution of the world and Bayes' theorem is just a matter of selecting the right \"demographic filter\".\n\nWhat's important to understand is that we can talk about all conditional probabilities this way - not just humans divided by gender and hair length.\n\nLet's take a brief detour to an even more abstract representation of probability to try and get a sense of this.\n\nEarlier I mentioned that a person who thought driving was safe should reconsider their beliefs more if they hear that one-in-three people crash their cars annually than if one-in-one-billion people crash into a zebra.`\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3863,"value":"// md`## Bayes factors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"