2f:T737,logistic_plot = columns({ lPlot: centerCell( Plot.plot({ marginTop: globs.margin.top, marginRight: globs.margin.right, marginBottom: globs.margin.bottom, marginLeft: globs.margin.left, width: "380", height: "380", color: { legend: true, scheme: "viridis", label: "Pr(Y = 1 | X₁ = x₁, X₂ = x₂)", width: 130, className: "move-legend", // ticks: [0, 0.5, 1], }, aspectRatio: 1, x: { domain: [-globs.absXMax,globs.absXMax], label: `x₁`, }, y: { domain: [-globs.absYMax,globs.absYMax], label: `x₂`, }, marks: [ Plot.contour({ fill: (x,y) => sigmoid2D(x,y,b0,b1,b2), x1: -globs.absXMax, x2: globs.absXMax, y1: -globs.absYMax, y2: globs.absYMax, // interval: 0.05, // stroke: "black", // fillOpacity: 0.9, }), Plot.line( boundary, { stroke: "white", strokeWidth: 6, clip: true, } ), Plot.line( boundary, { stroke: "black", strokeWidth: 1.5, strokeDasharray: [3], clip: true, } ), // RenderFunction: https://github.com/observablehq/plot/blob/v0.6.17/src/mark.d.ts#L42-L60 // (index, scales, values, dims, context) => { // // Specify width or height separately if you want to position the legend // // relative to the right or bottom edge. // const width = 100; // default: 240 // const height = 60; // default: 50 // return d3.select(Plot.legend({...scales.scales, width, height, label: "Body mass (g)"})) // .attr("text-anchor", "start") // defaults to "center" // .attr("x", dims.width - dims.marginRight - width) // .attr("y", -50) // arbitrary offset // .node(); // } // Plot.lineY({ // y: delta(x) // }) ] }) ), })30:T505,function genInputGrid(views, names, args) { // const spaceOnLeft = "margin-left: 12px;"; const spaceOnLeft = "margin-left: 3px;"; // const spaceOnRight = "margin-right: 20px;"; const cellPadding = "padding-left: 2px; padding-right: 2px;"; const cellBorder = false; const borderStyle = "border: 2px solid darkgrey;"; // const widthSettings = `min-width: ${globs.gridCellWidth}; max-width: ${globs.gridCellWidth};`; const widthSettings = ``; 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:T469,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 = borders ? `border: 1px solid; padding: 5px;` : `padding: 5px;`; } else { cur_child.style = `border: ${borders ? "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}, 48%); grid-auto-flow: dense; width:100%; height:100%; padding:5px; margin-bottom: 0px;` 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":"Logistic Regression → Linear Boundary? (2D)","cells":[{"id":370,"value":"# Logistic Regression → Linear Boundary? (2D)","pinned":false,"hidden":false,"mode":"md"},{"id":562,"value":"viewof outputVals = columns({\n col1: Inputs.form({\n // header: md`### Linear-in-Log-Odds Form`,\n // blank: html`
`,\n lineq: centerCell(tex`\\displaystyle\\small{\\log\\mkern-3mu\\left[ \\frac{\\Pr(Y = 1 \\mid X = x)}{\\Pr(Y = 0 \\mid X = x)} \\right] = ${lin_comb}}`),\n }),\n col2: Inputs.form({\n // header: md`### Modeling Pr(Y) Form`,\n // blank: html`
`,\n expform: centerCell(tex`\\displaystyle\\small{\\Pr(Y = 1 \\mid X = x) = \\frac{e^{${lin_comb}}}{1 + e^{${lin_comb}}}}`),\n })\n}, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"lda_prediction_cell = {\n let lda_prediction = tex`\\displaystyle\\small{Y = \\begin{cases}1 &\\text{if }x_2 > -\\frac{\\beta_0}{\\beta_2} - \\frac{\\beta_1}{\\beta_2}x_1 = ${(-b0/b2).toFixed(2)} + ${(-b1/b2).toFixed(2)}x_1 \\\\ 0 &\\text{otherwise}\\end{cases}}`\n return centerCell(md`### ...LDA predicts ${lda_prediction}`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"paramGrid = genInputGrid(\n [\n [viewof b0, viewof b1, viewof b2, viewof resetButton],\n ],\n [\n ['b0', 'b1', 'b2', 'resetButton'],\n ],\n { objOnly: true }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"applyStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"boundary = build_samples(\n (x) => (-b0/b2) + (-b1/b2)*x, -globs.absXMax, globs.absXMax\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"## d3.js Pieces","pinned":false,"hidden":false,"mode":"md"},{"id":438,"value":"## Global Variables","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"globs = ({\n default_b0: 0,\n default_b1: 3,\n default_b2: 4,\n absXMax: 5,\n absYMax: 5,\n gridCellWidth: '250px',\n labelWidth: '40px',\n inputWidth: '25px',\n sliderWidth: 35,\n figHeight: 310,\n margin: {\n top: 20, right: 30, bottom: 20, left: 30\n }\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"viewof b0 = genSlider(tex`\\Large{\\purple{\\beta_0}} =`, [-4.5, 4.5], globs.default_b0);","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"viewof b1 = genSlider(tex`\\Large{\\purple{\\beta_1}} =`, [-5, 5], globs.default_b1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"viewof b2 = genSlider(tex`\\Large{\\purple{\\beta_2}} =`, [-5, 5], globs.default_b2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"// viewof resetButton = Inputs.button({label: \"Reset\", reduce: resetParams})\nviewof resetButton = genButton(\"Reset\", resetParams)","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"delta = (x) => -(b0/b2) - (b1/b2)*x","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"lin_comb = `${b0.toFixed(1)} + ${b1.toFixed(1)}x_1 + ${b2.toFixed(1)}x_2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"## Global Functions","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"function sigmoid2D(x1, x2, b0, b1, b2) {\n let exp_term = Math.exp(b0 + b1 * x1 + b2 * x2)\n return exp_term / (1 + exp_term)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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":1204,"value":"function genButton(bLabel, reduceFn) {\n var buttonElt = Inputs.button(bLabel, {\n reduce: reduceFn,\n });\n var styleStr = `--label-width: 0`;\n Object.assign(buttonElt, {style: styleStr});\n return(buttonElt);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"resetParams = () => {\n set(viewof b0, globs.default_b0);\n set(viewof b1, globs.default_b1);\n set(viewof b2, globs.default_b2);\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) {\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":974,"value":"import { build_samples } from '@mcmcclur/adaptive-plotter'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}