2f:T4a1,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; }30: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}, 48%); 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 }31:[] 2d:{"title":"Logistic Regression → Linear Boundary? (1D)","cells":[{"id":370,"value":"# Logistic Regression → Linear Boundary? (1D)","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] = ${b0.toFixed(2)} + ${b1.toFixed(2)}x}`),\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^{${b0.toFixed(2)} + ${b1.toFixed(2)}x}}{1 + e^{${b0.toFixed(2)} + ${b1.toFixed(2)}x}}}`),\n })\n})","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 > -\\frac{\\beta_0}{\\beta_1} = ${delta.toFixed(2)} \\\\ 0 &\\text{otherwise}\\end{cases}}`\n return centerCell(md`### Logistic Regression predicts ${lda_prediction}`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"paramGrid = genInputGrid(\n [\n [viewof b0, viewof b1, viewof resetButton],\n ],\n [\n ['b0', 'b1', 'resetButton'],\n ],\n { objOnly: true }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"logistic_plot = Plot.plot({\n marginTop: globs.margin.top,\n marginRight: globs.margin.right,\n marginBottom: globs.margin.bottom,\n marginLeft: globs.margin.left,\n width: \"1000\",\n height: \"300\",\n color: {legend: true},\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(data, {x: \"x\", y: \"y\"}),\n Plot.ruleX([delta], {\n stroke: \"black\",\n strokeDasharray: [3],\n }),\n Plot.text([` Predict Y = ${b1 > 0 ? 1 : 0} →`], {\n x: delta,\n textAnchor: \"start\",\n lineAnchor: \"top\",\n frameAnchor: \"top\",\n }),\n Plot.text([`← Predict Y = ${b1 > 0 ? 0 : 1} `], {\n x: delta,\n textAnchor: \"end\",\n lineAnchor: \"top\",\n frameAnchor: \"top\",\n }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"## d3.js Pieces","pinned":false,"hidden":false,"mode":"md"},{"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 sigmoid(input_value, b0, b1) {\n let exp_term = Math.exp(b0 + b1 * input_value)\n return exp_term / (1 + exp_term)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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\": sigmoid(x, b0, b1)});\n }\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"## Global Variables","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"globs = ({\n default_b0: 2,\n default_b1: 3,\n absXMax: 5,\n gridCellWidth: '250px',\n labelWidth: '40px',\n inputWidth: '30px',\n sliderWidth: 50,\n figHeight: 310,\n margin: {\n top: 20, right: 30, bottom: 40, left: 40\n }\n});","pinned":false,"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":390,"value":"viewof resetButton = Inputs.button(\"Reset\", {reduce: resetParams});","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"delta = -b0/b1","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"## Global Functions","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"$2f","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 b0, globs.default_b0);\n set(viewof b1, globs.default_b1);\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":"$30","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":5,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}