25:null 26:["$","title",null,{"children":"Bayes Playground for SYMSYS1 | Jenny Han | Observable"}] 2b:T1a62,area_chart = { // const node = DOM.svg(width, 200); const WIDTH = width; const HEIGHT = 500; const node = DOM.svg(WIDTH, HEIGHT); const svg = d3.select(node); const base = svg .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', WIDTH) .attr('height', HEIGHT) .attr('fill', '#f0f0f0'); const info = svg .append("text") .text("") .attr("x", 52*WIDTH/100) .attr("y", HEIGHT - 25) .attr('text-anchor', 'middle') .attr("font-family", "Helvetica") .attr("font-size", 18); const round = (n, p = 4) => Math.round(n * Math.pow(10, p)) / Math.pow(10, p); function writeInfo(name, prob) { info.text(`P(${name}) = ${round(prob)*100}%`); } function clearInfo() { info.text(""); } const AREA = { x: width/3, y: 100, width: 350, height: 350 }; const area_bg = svg .append('rect') .attr('x', AREA.x) .attr('y', AREA.y) .attr('width', AREA.width) .attr('height', AREA.height) .attr('fill', '#323232'); const probs = { event_A: { a1: 1 - farmer_to_librarian / 10000, a2: farmer_to_librarian / 10000 }, event_B: { b1: 1 - farmer_shyness / 10000, b2: 1 - librarian_shyness / 10000 } }; const events = { d: data, h: hypothesis, notd: not_data, noth: not_hypothesis } if (data == ""){ events.d = "D"; } if (not_data == ""){ events.notd = "Not D" } if (hypothesis == ""){ events.h = "H"; } if (not_hypothesis == ""){ events.noth = "Not H" } const positions = { shy_libr: { x: AREA.x + 0, y: AREA.y + 0, w: AREA.width * probs.event_A.a2, h: AREA.height * probs.event_B.b2 }, not_libr: { x: AREA.x + 0, y: AREA.y + AREA.height * probs.event_B.b2, w: AREA.width * probs.event_A.a2, h: AREA.height * (1 - probs.event_B.b2) }, shy_farm: { x: AREA.x + AREA.width * probs.event_A.a2, y: AREA.y + 0, w: AREA.width * probs.event_A.a1, h: AREA.height * probs.event_B.b1 }, not_farm: { x: AREA.x + AREA.width * probs.event_A.a2, y: AREA.y + AREA.height * probs.event_B.b1, w: AREA.width * probs.event_A.a1, h: AREA.height * (1 - probs.event_B.b1) } }; const COLOR = { farm: { shy: '#80e866', not: '#3b9425' }, libr: { shy: '#66bfe8', not: '#257194' } }; // WIDTH: event_A (farmer or librarian) // HEIGHT: event_B (shyness) /*************************** *** Draw the Rectangles *** ***************************/ // Shy-librarian svg .append('rect') .attr('x', positions.shy_libr.x) .attr('y', positions.shy_libr.y) .attr('width', positions.shy_libr.w) .attr('height', positions.shy_libr.h) .attr('fill', COLOR.libr.shy) .on('mouseover', () => writeInfo( events.h + " & " + events.notd, probs.event_A.a2 * probs.event_B.b2 ) ) .on('mouseout', clearInfo); // Not-shy-librarian svg .append('rect') .attr('x', positions.not_libr.x) .attr('y', positions.not_libr.y) .attr('width', positions.not_libr.w) .attr('height', positions.not_libr.h) .attr('fill', COLOR.libr.not) .on('mouseover', () => writeInfo( events.h + " & " + events.d, probs.event_A.a2 * (1 - probs.event_B.b2) ) ) .on('mouseout', clearInfo); // Shy-farmer svg .append('rect') .attr('x', positions.shy_farm.x) .attr('y', positions.shy_farm.y) .attr('width', positions.shy_farm.w) .attr('height', positions.shy_farm.h) .attr('fill', COLOR.farm.shy) .on('mouseover', () => writeInfo( events.noth +" & " + events.notd, probs.event_A.a1 * probs.event_B.b1) ) .on('mouseout', clearInfo); // Not-shy-farmer svg .append('rect') .attr('x', positions.not_farm.x) .attr('y', positions.not_farm.y) .attr('width', positions.not_farm.w) .attr('height', positions.not_farm.h) .attr('fill', COLOR.farm.not) .on('mouseover', () => writeInfo( events.noth + " & " + events.d, probs.event_A.a1 * (1 - probs.event_B.b1) ) ) .on('mouseout', clearInfo); /*********************** *** Draw the Titles *** ***********************/ svg .append('text') .text("Visualizing the Probabilities as Areas") .attr('x', 20) .attr('y', 40) .attr('font-family', 'Helvetica') .attr('font-size', '30') .attr('font-weight', 'bold'); const hU = AREA.height / 3; // H // D svg .append('text') .text("P(" + events.h +" & " + events.d + ")") .attr('x', AREA.x - 80) .attr('y', AREA.y + 2* hU) .attr('alignment-baseline', 'middle') .attr('text-anchor', 'end') .attr('font-family', 'Helvetica') .attr('font-size', '12'); svg .append('line') .attr('x1', 250) .attr('y1', AREA.y + hU) .attr('x2', AREA.x - 5) .attr('y2', positions.shy_libr.y + positions.shy_libr.h / 2) .attr('stroke', 'black') .attr('stroke-width', 1); // Not D svg .append('text') .text("P(" + events.h + " & " + events.notd + ")") .attr('x', AREA.x - 80) .attr('y', AREA.y + hU) .attr('text-anchor', 'end') .attr('alignment-baseline', 'middle') .attr('font-style', 'oblique') .attr('font-family', 'Helvetica') .attr('font-size', '12'); svg .append('line') .attr('x1', 250) .attr('y1', AREA.y + hU * 2) .attr('x2', AREA.x - 5) .attr('y2', positions.not_libr.y + positions.not_libr.h / 2) .attr('stroke', 'black') .attr('stroke-width', 1); // Not H // D svg .append('text') .text("P(" + events.noth + " & " + events.notd + ")") .attr('x', AREA.x + AREA.width + 40) .attr('y', AREA.y + hU) .attr('alignment-baseline', 'middle') .attr('font-family', 'Helvetica') .attr('font-size', '12'); svg .append('line') .attr('x1', AREA.x + AREA.width + 35) .attr('y1', AREA.y + hU) .attr('x2', AREA.x + AREA.width + 5) .attr('y2', positions.shy_farm.y + positions.shy_farm.h / 2) .attr('stroke', 'black') .attr('stroke-width', 1); // Not D svg .append('text') .text("P(" + events.noth + " & " + events.d + ")") .attr('x', AREA.x + AREA.width + 40) .attr('y', AREA.y + hU * 2) .attr('alignment-baseline', 'middle') .attr('font-style', 'oblique') .attr('font-family', 'Helvetica') .attr('font-size', '12'); svg .append('line') .attr('x1', AREA.x + AREA.width + 35) .attr('y1', AREA.y + hU * 2) .attr('x2', AREA.x + AREA.width + 5) .attr('y2', positions.not_farm.y + positions.not_farm.h / 2) .attr('stroke', 'black') .attr('stroke-width', 1); return svg; }2c:[] 29:{"id":"734abb1f0d30ab78","slug":"bayes-playground-for-symsys1/2","title":"Bayes Playground for SYMSYS1","thumbnail":"a97d9f02dbeecbc7ae5276c373a4b9e473d70578719833aea019c10a44e76262","access_level":"public","create_time":"$D2020-10-25T22:10:38.727Z","update_time":"$D2022-02-10T10:06:42.457Z","view_time":null,"first_public_time":"$D2020-10-25T22:14:42.257Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"cb49c0ecbc9c7210","login":"jennylihan","name":"Jenny Han","avatar_url":"https://avatars-next.observableusercontent.com/e2029faa3fc9c8ffe86bb4b2b54cb5324020d1e9fb1700ddb6a5c2c30d5d7ba6","tier":"starter_2024"},"version":1515,"publish_version":1515,"role":null,"authored":false,"authors":[{"type":"individual","id":"39808c2da236b54f","login":"jennylihan","name":"Jenny Han","avatar_url":"https://avatars-next.observableusercontent.com/e2029faa3fc9c8ffe86bb4b2b54cb5324020d1e9fb1700ddb6a5c2c30d5d7ba6","tier":null}],"members":[{"type":"individual","id":"39808c2da236b54f","login":"jennylihan","name":"Jenny Han","avatar_url":"https://avatars-next.observableusercontent.com/e2029faa3fc9c8ffe86bb4b2b54cb5324020d1e9fb1700ddb6a5c2c30d5d7ba6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Bayes Playground for SYMSYS1","cells":[{"id":0,"value":"md`# Bayes Playground for SYMSYS1\n#### Adapted from Austin Poor's visualization [here](https://observablehq.com/@a-poor/visualizing-bayesian-thinking).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"md`\n## 1. To use this visualization, fill out the following:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"viewof hypothesis = text({title: \"H, or hypothesis\", value: \"\", placeholder: \"(ex) Tom is...\", description: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1269,"value":"viewof not_hypothesis = text({title: \"NOT H, or the opposite of H\",value: \"\", placeholder: \"(ex) Tom is...\", description: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"viewof data = text({title: \"D, or observed data\", value: \"\", placeholder: \"(ex) Tom is...\", description: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"viewof not_data = text({title: \"NOT D, or the opposite of D\", value: \"\", placeholder: \"(ex) Tom is\", description: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1428,"value":"md`\nGreat! Note -- You're about to visualize the probabilities for a simplified world in which there are only four possibilities: \n\n1. ${hypothesis} AND ${data}\n2. ${hypothesis} AND ${not_data}\n3. ${not_hypothesis} AND ${data}\n4. ${not_hypothesis} AND ${not_data}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"## 2. Now you'll need to provide some information: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"md`_ Prior aka P(H) aka P(${hypothesis}):_ ${farmer_to_librarian/100}%`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"// viewof farmer_to_librarian = Inputs.range([0, 100], {step: 1})\nviewof farmer_to_librarian = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`_Likelihood aka P(D|H) aka the probability of ${data} given ${hypothesis}:_ ${librarian_shyness /\n 100}%`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"viewof librarian_shyness = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"md`_P(D| NOT H) aka the probability of ${data} if ${not_hypothesis}:_ ${farmer_shyness /\n 100}%`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"viewof farmer_shyness = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"{\n const reset_button = html``;\n reset_button.onclick = () => {\n viewof farmer_to_librarian.value =\n default_probs.farmer_to_librarian * 10000;\n viewof farmer_to_librarian.dispatchEvent(new CustomEvent(\"input\"));\n\n viewof farmer_shyness.value = default_probs.farmer_shyness * 10000;\n viewof farmer_shyness.dispatchEvent(new CustomEvent(\"input\"));\n\n viewof librarian_shyness.value = default_probs.librarian_shyness * 10000;\n viewof librarian_shyness.dispatchEvent(new CustomEvent(\"input\"));\n };\n return reset_button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"## 3. Here's the visualization of the probability space: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"area_chart.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"## 4. But you're not done yet if you want P(H|D).\n\nNote: P(H | D) is NOT the same as P(H and D). \n\nIn other words, the percentage you get when you hover over the dark blue area by itself is not the answer. \n\nIn fact... if you'd like to figure out P(H | D), you have to calculate...\n\n***the dark blue OVER both the dark blue and dark green areas***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"html`

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`## Appendix\nWhat follows is code that powers the interactive content above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"function slider(config) {\n let { title, description, min, max, init, step } = config;\n\n const div = html`\n \n \n `;\n div.prepend(\n html`

${title}

`\n );\n div.append(\n html`

${description}

`\n );\n const range = div.querySelector(\"[type=range]\");\n const number = div.querySelector(\"[type=number]\");\n div.value = range.value = number.value = init;\n range.oninput = () => (number.value = div.value = range.valueAsNumber);\n number.oninput = () => (range.value = div.value = number.valueAsNumber);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"num_dec_places = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import { number, select, text } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"//for the part 1:\ndefault_probs = ({\n farmer_to_librarian: 0.5,\n farmer_shyness: .5,\n librarian_shyness: .5,\n occupation: {\n farmer: 0.5,\n librarian: 0.5\n },\n shy: {\n farmer: 0.5,\n librarian: 0.5\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 2a:"$29:body"