2f:Te2e,nb_plot = columns({ col1: Inputs.form({ f1head: md`### Feature 1`, f1y0: centerCell(tex`\small{\Pr(X_1 = ${xi1.toFixed(2)} \mid Y = 1) \propto \mathbf{${pr_c1f1.toFixed(2)}}}`), f1plot: Plot.plot({ marginTop: globs.margin.top, marginRight: globs.margin.right, marginBottom: globs.margin.bottom, marginLeft: globs.margin.left, width: globs.width, height: globs.height, color: {legend: true}, facet: {data: data_f1, y: "class"}, marks: [ Plot.ruleY([0]), Plot.lineY(data_f1, {x: "x", y: "y"}), Plot.areaY( data_f1, { x: "x", y2: "y", fill: "#009e73", fillOpacity: data_f1.map(d => d.class == yhat_f1_label ? 0.9 : 0.25) } ), Plot.ruleX([delta_f1], {strokeWidth: 1, strokeDasharray: [3]}), Plot.text(["x₁"], { x: xi1, frameAnchor: "bottom", textAnchor: "middle", lineAnchor: "top", fontSize: 16, }), Plot.ruleX([xi1], {strokeWidth: 2}), ] }), f1y1: centerCell(tex`\small{\Pr(X_1 = ${xi1.toFixed(2)} \mid Y = 2) \propto \mathbf{${pr_c2f1.toFixed(2)}}}`), }), col2: Inputs.form({ f2head: md`### Feature 2`, f2y0: centerCell(tex`\small{\Pr(X_2 = ${xi2.toFixed(2)} \mid Y = 1) \propto \mathbf{${pr_c1f2.toFixed(2)}}}`), f2plot: Plot.plot({ marginTop: globs.margin.top, marginRight: globs.margin.right, marginBottom: globs.margin.bottom, marginLeft: globs.margin.left, width: globs.width, height: globs.height, color: {legend: true}, facet: {data: data_f2, y: "class"}, marks: [ Plot.ruleY([0]), Plot.lineY(data_f2, {x: "x", y: "y"}), Plot.areaY( data_f2, { x: "x", y2: "y", fill: "#56b4e9", fillOpacity: data_f2.map(d => d.class == yhat_f2_label ? 0.9 : 0.25) } ), Plot.ruleX([delta_f2], {strokeWidth: 1, strokeDasharray: [3]}), Plot.text(["x₂"], { x: xi2, frameAnchor: "bottom", textAnchor: "middle", lineAnchor: "top", fontSize: 16, }), Plot.ruleX([xi2], {strokeWidth: 2}), ] }), f2y1: centerCell(tex`\small{\Pr(X_2 = ${xi2.toFixed(2)} \mid Y = 2) \propto \mathbf{${pr_c2f2.toFixed(2)}}}`), }), col3: Inputs.form({ f3head: md`### Feature 3`, f3y0: centerCell(tex`\small{\Pr(X_3 = ${xi3.toFixed(2)} \mid Y = 1) \propto \mathbf{${pr_c1f3.toFixed(2)}}}`), f3plot: Plot.plot({ marginTop: globs.margin.top, marginRight: globs.margin.right, marginBottom: globs.margin.bottom, marginLeft: globs.margin.left, width: globs.width, height: globs.height, color: {legend: true}, facet: {data: data_f3, y: "class"}, marks: [ Plot.ruleY([0]), Plot.lineY(data_f3, {x: "x", y: "y"}), Plot.areaY( data_f3, { x: "x", y2: "y", fill: "#e69f00", fillOpacity: data_f3.map(d => d.class == yhat_f3_label ? 0.9 : 0.25) } ), Plot.ruleX([delta_f3], {strokeWidth: 1, strokeDasharray: [3]}), Plot.text(["x₃"], { x: xi3, frameAnchor: "bottom", textAnchor: "middle", lineAnchor: "top", fontSize: 16, }), Plot.ruleX([xi3], {strokeWidth: 2}), ] }), f3y1: centerCell(tex`\small{\Pr(X_3 = ${xi3.toFixed(2)} \mid Y = 2) \propto \mathbf{${pr_c2f3.toFixed(2)}}}`), }) })30:T48c,function genInputGrid(views, names, args) { const spaceOnLeft = "margin-left: 12px;"; // const spaceOnRight = "margin-right: 20px;"; const cellPadding = "padding-left: 1px; padding-right: 1px;"; const cellBorder = false; const borderStyle = "border: 2px solid darkgrey;"; const widthSettings = `min-width: ${globs.gridCellWidth}; max-width: ${globs.gridCellWidth};`; const form = html`

${views.map( (row, rowIndex) => html`

${row.map( (input, inputIndex) => html`

${input}

` )}

`; form.oninput = () => { const values = views.map(row => row.map(input => input.value)); form.value = values; if (args && args.objOnly) form.value = {}; if (names) { names.forEach((row, i) => row.forEach( (c, j) => values[i][j] != null && (form.value[c] = values[i][j]) ) ); } }; form.oninput(); return form; }31:T424,columns = (args, borders = false) => { const form = html`` form.value = {} let cols = 0 for (const key in args) { let cur_child = args[key]; console.log(Object.keys(args).length); if (Object.keys(args).length > 1) { cur_child.style = `border: 1px solid; padding: 5px;` } else { cur_child.style = `border: 1px solid; padding: 5px; grid-column:1/span 2; width:96%; padding: 2.5px; justify-content:center; align-text: center; display: flex;` } form.appendChild(cur_child); cols++ } //form.style = `display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: dense; width:100%` form.style = `display: grid; grid-gap: 5px 5px; grid-template-columns: repeat(${cols}, 30%); grid-auto-flow: dense; width:100%; height:100%; padding:5px;` form.oninput = () => { form.value = Object.keys(args).reduce((result, key) => { result[key] = args[key].value return result }, Array.isArray(args) ? [] : {}) } form.oninput() return form }32:[] 2d:{"title":"Multinomial Prediction with Naive Bayes","cells":[{"id":370,"value":"# Multinomial Prediction with Naive Bayes","pinned":false,"hidden":false,"mode":"md"},{"id":562,"value":"viewof outputVals = columns({\n col1: Inputs.form({\n xi1slider: viewof xi1,\n }),\n col2: Inputs.form({\n xi2slider: viewof xi2,\n }),\n col3: Inputs.form({\n xi3slider: viewof xi3,\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"nb_prediction_cell = centerCell(\n Inputs.form({\n x_rendered: md`### For ${x_vec}, Naive Bayes predicts`,\n prediction: centerCell(md`### ${nb_prediction}`, true),\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"## d3.js Pieces","pinned":false,"hidden":false,"mode":"md"},{"id":820,"value":"nb_prediction = tex`\\displaystyle\\small{\\begin{array}{c}\\Pr(Y_i = 1) \\propto ${pr_c1.toFixed(4)} \\\\ \\Pr(Y_i = 2) \\propto ${pr_c2.toFixed(4)}\\end{array}} \\Rightarrow \\boxed{\\large{\\widehat{Y}_i = ${yhat}}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"x_vec = tex`\\mathbf{x}_i = \\small{(${xi1.toFixed(2)}, ${xi2.toFixed(2)}, ${xi3.toFixed(2)})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"x_vals = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x))\n .range([globs.margin.left, width - globs.margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"y_vals = d3.scaleLinear()\n .domain([Math.min(d3.min(data, d => d.y),0), Math.max(0.5,d3.max(data, d => d.y))]).nice()\n .range([globs.figHeight - globs.margin.bottom, globs.margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"line = d3.line()\n .x(d => x_vals(d.x))\n .y(d => y_vals(d.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${globs.figHeight - globs.margin.bottom})`)\n .call(\n d3.axisBottom(x_vals)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )\n .call(g => g.append(\"text\")\n .attr(\"x\", width/2) // + globs.margin.right)\n .attr(\"y\", globs.margin.bottom - 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", \"13\")\n .text(\"Feature value (x)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${globs.margin.left},0)`)\n .call(\n d3.axisLeft(y_vals)\n .tickValues(d3.scaleLinear().domain(y_vals.domain()).ticks())\n )\n .call(g => g.append(\"text\")\n .attr(\"x\", -globs.margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-size\", \"13\")\n .text(\"↑ Pr(X = x | Y)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"function normal_pdf (input_value, mu, sigsq) {\n let left_chunk = 1/(Math.sqrt(2*Math.PI*sigsq))\n let right_top = -((input_value-mu)**2)\n let right_bottom = 2*sigsq\n return left_chunk * Math.exp(right_top/right_bottom)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"mu_c1f1 = globs.default_mu_c1f1","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"mu_c2f1 = globs.default_mu_c2f1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"delta_f1 = (mu_c1f1 + mu_c2f1) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"mu_c1f2 = globs.default_mu_c1f2","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"mu_c2f2 = globs.default_mu_c2f2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"delta_f2 = (mu_c1f2 + mu_c2f2) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":857,"value":"mu_c1f3 = globs.default_mu_c1f3","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"mu_c2f3 = globs.default_mu_c2f3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"delta_f3 = (mu_c1f3 + mu_c2f3) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1069,"value":"## Probabilities","pinned":false,"hidden":false,"mode":"md"},{"id":1071,"value":"pr_c1f1 = normal_pdf(xi1, mu_c1f1, globs.default_sigma2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"pr_c2f1 = normal_pdf(xi1, mu_c2f1, globs.default_sigma2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"yhat_f1 = pr_c1f1 > pr_c2f1 ? 1 : 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"yhat_f1_label = \"Y = \" + yhat_f1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"pr_c1f2 = normal_pdf(xi2, mu_c1f2, globs.default_sigma2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"pr_c2f2 = normal_pdf(xi2, mu_c2f2, globs.default_sigma2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"yhat_f2 = pr_c1f2 > pr_c2f2 ? 1 : 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1172,"value":"yhat_f2_label = \"Y = \" + yhat_f2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1080,"value":"pr_c1f3 = normal_pdf(xi3, mu_c1f3, globs.default_sigma2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"pr_c2f3 = normal_pdf(xi3, mu_c2f3, globs.default_sigma2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"yhat_f3 = pr_c1f3 > pr_c2f3 ? 1 : 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1176,"value":"yhat_f3_label = \"Y = \" + yhat_f3","pinned":true,"hidden":false,"mode":"ojs"},{"id":1095,"value":"pr_c1 = pr_c1f1 * pr_c1f2 * pr_c1f3","pinned":true,"hidden":false,"mode":"ojs"},{"id":1097,"value":"pr_c2 = pr_c2f1 * pr_c2f2 * pr_c2f3","pinned":true,"hidden":false,"mode":"ojs"},{"id":1106,"value":"yhat = pr_c1 > pr_c2 ? 1 : 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1157,"value":"yhat_label = \"Y = \" + yhat","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"## Generated Data (For Lines)","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"data = {\n let values = [];\n for (let x = -globs.absXMax; x < globs.absXMax; x=x+0.01) {\n values.push({\"x\":x, \"y\":normal_pdf(x, mu_c1f1, globs.default_sigma2), \"class\":\"Y = 1\", \"p\": \"1\"});\n values.push({\"x\":x, \"y\":normal_pdf(x, mu_c1f2, globs.default_sigma2), \"class\":\"Y = 1\", \"p\": \"2\"});\n values.push({\"x\":x, \"y\":normal_pdf(x, mu_c1f3, globs.default_sigma2), \"class\":\"Y = 1\", \"p\": \"3\"});\n values.push({\"x\":x, \"y\":normal_pdf(x, mu_c2f1, globs.default_sigma2), \"class\":\"Y = 2\", \"p\": \"1\"});\n values.push({\"x\":x, \"y\":normal_pdf(x, mu_c2f2, globs.default_sigma2), \"class\":\"Y = 2\", \"p\": \"2\"});\n values.push({\"x\":x, \"y\":normal_pdf(x, mu_c2f3, globs.default_sigma2), \"class\":\"Y = 2\", \"p\": \"3\"});\n }\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"data_f1 = data.filter(d => d.p == \"1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"data_f2 = data.filter(d => d.p == \"2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"data_f3 = data.filter(d => d.p == \"3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"## Global Variables","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"globs = ({\n // mu11 = mean(class 1, feature 1)\n default_mu_c1f1: 0.0,\n default_mu_c1f2: 2.0,\n default_mu_c1f3: 2.5,\n default_mu_c2f1: -1.75,\n default_mu_c2f2: 0.0,\n default_mu_c2f3: 1.5,\n default_xi1: 0.4,\n default_xi2: 1.5,\n default_xi3: 1.0,\n default_sigma2: 1.0,\n width: \"340\",\n height: \"300\",\n absXMax: 5,\n gridCellWidth: '250px',\n labelWidth: '40px',\n inputWidth: '30px',\n sliderWidth: 50,\n figHeight: 310,\n margin: {\n top: 20, right: 40, bottom: 40, left: 40\n }\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"viewof xi1 = genSlider(tex`\\Large{x_{i1}} =`, [-4.5, 4.5], globs.default_xi1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"viewof xi2 = genSlider(tex`\\Large{x_{i2}} =`, [-5, 5], globs.default_xi2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"viewof xi3 = genSlider(tex`\\Large{x_{i3}} =`, [-5, 5], globs.default_xi3);","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"viewof resetButton = Inputs.button(\"Reset\", {reduce: resetParams});","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"function myRound(orig_val){\n return Math.round((orig_val + Number.EPSILON) * 100) / 100\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"## Global Functions","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"function genSlider(cname, range, defaultVal) {\n var sliderElt = Inputs.range(range, {\n value: defaultVal,\n label: cname,\n width: globs.sliderWidth,\n format: x => x.toFixed(2)\n });\n var styleStr = `--label-width: ${globs.labelWidth}`;\n Object.assign(sliderElt, {style: styleStr});\n return(sliderElt);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"resetParams = () => {\n set(viewof xi1, globs.default_xi1);\n set(viewof xi2, globs.default_xi2);\n set(viewof xi3, globs.default_xi3);\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"function centerCell(orig_cell, full_width=false) {\n let fw_text = full_width ? \"width: 100%;\" : \"\";\n return html`

${orig_cell}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"## CSS","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":463,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}