31: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; }32: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 }33:[] 2f:{"title":"Linear Discriminant Analysis (LDA)","cells":[{"id":370,"value":"# Linear Discriminant Analysis (LDA)","pinned":false,"hidden":false,"mode":"md"},{"id":562,"value":"viewof outputVals = columns({\n col1: Inputs.form({\n header: md`### If the observations ${tex`i`} with ${tex`Y_i = 0`} have mean...`,\n // blank: html`
`,\n mu0slider: viewof mu0,\n }),\n col2: Inputs.form({\n header: md`### And the observations ${tex`i`} with ${tex`Y_i = 1`} have mean...`,\n // blank: html`
`,\n mu1slider: viewof mu1\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"lda_prediction_cell = centerCell(md`### ...LDA predicts ${lda_prediction}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"lda_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\", stroke: \"k\"}),\n Plot.areaY(data, {x: \"x\", y2: \"y\", stroke: \"k\", fill: \"k\", fillOpacity: 0.6}),\n Plot.ruleX([mu0], {stroke: \"blue\"}),\n Plot.ruleX([mu1], {stroke: \"orange\"}),\n Plot.ruleX([delta], {\n stroke: \"black\",\n strokeDasharray: [3],\n }),\n Plot.text([\" Predict Y = 1 →\"], {\n x: delta,\n textAnchor: \"start\",\n lineAnchor: \"top\",\n frameAnchor: \"top\",\n }),\n Plot.text([\"← Predict Y = 0 \"], {\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":820,"value":"lda_prediction = tex`\\displaystyle Y = \\begin{cases}1 &\\text{if }x > \\frac{\\mu_0 + \\mu_1}{2} = ${deltar} \\\\ 0 &\\text{otherwise}\\end{cases}`","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":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, mu0, 1.0), \"k\":\"Y = 0\"});\n values.push({\"x\":x, \"y\":normal_pdf(x, mu1, 1.0), \"k\":\"Y = 1\"});\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_mu0: -2.0,\n default_mu1: 2.0,\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 mu0 = genSlider(tex`\\Large{\\purple{\\mu_0}} =`, [-4.5, 4.5], globs.default_mu0);","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"viewof mu1 = genSlider(tex`\\Large{\\purple{\\mu_1}} =`, [-5, 5], globs.default_mu1);","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":"mu0r = Math.round((mu0 + Number.EPSILON) * 100) / 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"mu1r = Math.round((mu1 + Number.EPSILON) * 100) / 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"delta = (mu0 + mu1)/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"deltar = myRound(delta)","pinned":true,"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":"$31","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 mu0, globs.default_mu0);\n set(viewof mu1, globs.default_mu1);\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":"$32","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":"$W33","stdlib":"1","titling":"auto"}