2f: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; }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 Parameters","cells":[{"id":370,"value":"# Logistic Regression Parameters","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\\log\\mkern-3mu\\left[ \\frac{\\Pr(Y = 1 \\mid X = x)}{\\Pr(Y = 0 \\mid X = x)} \\right] = ${b0r} + ${b1r}x`),\n }),\n col2: Inputs.form({\n header: md`### Modeling Pr(Y) Form`,\n blank: html`
`,\n expform: centerCell(tex`\\displaystyle\\Pr(Y = 1 \\mid X = x) = \\frac{e^{${b0r} + ${b1r}x}}{1 + e^{${b0r} + ${b1r}x}}`),\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"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":"chart = {\n const svg = d3.select(DOM.svg(width, globs.figHeight));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"## d3.js Pieces","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"x_values = 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_values = 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_values(d.x))\n .y(d => y_values(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_values)\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":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${globs.margin.left},0)`)\n .call(\n d3.axisLeft(y_values)\n .tickValues(d3.scaleLinear().domain(y_values.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(Y = 1 | x)\")\n )","pinned":true,"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) values.push({\"x\":x, \"y\":sigmoid(x, b0, b1)});\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 defaultb0: 2,\n defaultb1: 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":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"viewof b0 = genSlider(tex`\\Large{\\purple{\\beta_0}} =`, [-4.5, 4.5], globs.defaultb0);","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"viewof b1 = genSlider(tex`\\Large{\\purple{\\beta_1}} =`, [-5, 5], globs.defaultb1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"viewof resetButton = Inputs.button(\"Reset\", {reduce: resetParams});","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"b0r = Math.round((b0 + Number.EPSILON) * 100) / 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"b1r = Math.round((b1 + Number.EPSILON) * 100) / 100","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.defaultb0);\n set(viewof b1, globs.defaultb1);\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":true,"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"}