2a:null 2b:["$","title",null,{"children":"Sketches for a simple LogReg Example | Max Ott | Observable"}] 30:T52f,mkChart = (data, model) => { const yModel = x => model.d + model.k * x; const svg = d3.select(DOM.svg(size.width, size.height)); const xScale = d3.scaleLinear() .domain(xyDomain) .range([margin.left, size.width - margin.right]); const yScale = d3.scaleLinear() .domain(xyDomain) .range([size.height - margin.bottom, margin.top]); const fillScale = d3.scaleSequential(chroma.interpolateRdYlBu); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); svg.append('g') .attr('transform', `translate(0, ${size.height - margin.bottom})`) .call(xAxis); svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(yAxis); svg.append("g").append("line") .attr("stroke", "black") .attr("stroke-width", 2) //.attr("stroke-opacity", 0.2) .attr("x1", xScale(xyDomain[0])) .attr("y1", yScale(yModel(xyDomain[0]))) .attr("x2", xScale(xyDomain[1])) .attr("y2", yScale(yModel(xyDomain[1]))) svg.append("g") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .selectAll("circle") .data(data) .enter().append("circle") .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr('fill', d => fillScale(d.p)) .attr("r", 10); return svg.node(); }31:[] 2e:{"id":"e097c49837a8c474","slug":"sketches-for-a-simple-logreg-example","title":"Sketches for a simple LogReg Example","thumbnail":"fabc77db77ac85fcdeba6f4afb931d700d43add208a1a5508fe07b650282a0ac","access_level":"public","create_time":"$D2018-10-06T05:31:39.753Z","update_time":"$D2018-10-08T03:39:02.535Z","view_time":null,"first_public_time":"$D2020-03-07T03:10:29.376Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7e620f674d45e3eb","login":"maxott","name":"Max Ott","avatar_url":"https://avatars-next.observableusercontent.com/dc5f3355ae49c8cbb820fc5d6a1b5a28463761ffe7cd58042d52c1d875890554","tier":"starter_2024"},"version":373,"publish_version":373,"role":null,"authored":false,"authors":[{"type":"individual","id":"5944e85cfceb3119","login":"maxott","name":"Max Ott","avatar_url":"https://avatars-next.observableusercontent.com/dc5f3355ae49c8cbb820fc5d6a1b5a28463761ffe7cd58042d52c1d875890554","tier":null}],"members":[{"type":"individual","id":"5944e85cfceb3119","login":"maxott","name":"Max Ott","avatar_url":"https://avatars-next.observableusercontent.com/dc5f3355ae49c8cbb820fc5d6a1b5a28463761ffe7cd58042d52c1d875890554","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Sketches for a simple LogReg Example","cells":[{"id":0,"value":"md`# Sketches for a simple LogReg Example\n\nThis notebook holds a collections of ideas in search of a simple, but \nbut not too simple example of a LogReg classifier I could use as a tutorial\nfor N1.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`## Basics\n\nWe are going to use [Logistic regression](https://en.wikipedia.org/wiki/Logistic_regression) as linear classification algorithm for a two-class problem. As stated in the referenced Wikipedia article, we are\ngoing to use a logistic function to model a binary dependent variable.\n\nWithout repeating the theory, we are using the [logit](https://en.wikipedia.org/wiki/Logit) function to \ncalculate the probability that a particular\nobservation ${tex`\\mathbf{x_i}`} for a model ${tex`\\mathbf{w}`} belongs to one of the two classes.\n\n${tex.block`\n p(\\mathbf{x_i}, \\mathbf{w})={\\frac {1}{1 + e^{-\\mathbf{x_i'} \\mathbf{w^{T}}}}}\n`}\n\n\n\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"md`### Learning the Model\n\nTo learn the model ${tex`\\mathbf{w}`} we assume that we have a set of observations where we also know the associated class, which means that, :\n${tex.block`\n p(\\mathbf{x_i}, \\mathbf{w}) = m_i = \n \\begin{cases}\n 1 & \\text{if } \\mathbf{x_i} \\text{ is member of class}\\\\\n 0 & \\text{otherwise}\n \\end{cases}\n`}\nAs the above equation will, for any bound domain, only return a number between 0 and 1, we define a _loss_ function ${tex`l`} to account for the difference.\n\n${tex.block`\n l(\\mathbf{x}, \\mathbf{w}) = \\sum_{i} m_i (1 - p(\\mathbf{x_i}, \\mathbf{w})) \n - (m_i - 1) p(\\mathbf{x_i}, \\mathbf{w})\n`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"md`### Scratchpad\n\n${tex.block`\n \\frac{\\mathrm d}{\\mathrm d x} \n \\left(\n log \\left(\n \\frac {1}\n {1 + e^{-\\mathbf{x} \\mathbf{w^{T}}}}\n \\right) \n \\right)\n =\n \\frac {w_x e^{-\\mathbf{x} \\mathbf{w^{T}}}}\n {1 + e^{-\\mathbf{x} \\mathbf{w^{T}}}}\n`}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"md`## Worked Example\n\nFor a dataset with 2 features, we can visualise the samples in 2D space\nwith one feature mapped to the X axis and the other to the Y axis. And with \nthat, we define ${tex`\\mathbf{w}`} and ${tex`\\mathbf{x_i}`} as:\n\n${tex.block`\n \\begin{aligned}\n \\mathbf{w} &= [ w_0, w_x, w_y ] \\\\\n \\mathbf{x_i} &= [ 1, x_i, y_i ]\n \\end{aligned}\n`}\n\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"md`### Exercise 1\nAs a first visualisation exercise, we create a few random 2D points in\nthe domain \"${JSON.stringify(xyDomain)}\", create few sliders to interactively set the model\nand visualize them in a scatter plot with the fill color of each sample mapped\nto ${tex`p(x,y)`} with a color scale ranging from ${colorBox(chroma.interpolateRdYlBu(0))} (0)\nto ${colorBox(chroma.interpolateRdYlBu(1))} (1).\n\nFinally we also add the \"decision boundary\" where ${tex`p(x) = 0.5`} which resolves to:\n${tex.block`\n y = - \\frac {w_x} {w_y} x - \\frac {w_0} {w_y}\n`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"viewof w0 = slider3({\n message:'w₀',\n min: -1.0, \n max: 10.0,\n start: -0.4,\n step: .01,\n precision: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"viewof wx = slider3({\n message:'w_x',\n min: -1.0, \n max: 1.0,\n start: -0.08,\n step: .01,\n precision: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"viewof wy = slider3({\n message:'w_y',\n min: -1.0, \n max: 1.0,\n start: 0.15,\n step: .01,\n precision: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"viewof rgb = {\n const form = html``;\n form.oninput = () => form.value = {\n r: form.r.valueAsNumber, \n g: form.g.valueAsNumber, \n b: form.b.valueAsNumber,\n foo: form.foo.valueAsNumber\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":365,"value":"x = rgb","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"{\n return dataToMarkdown(data.slice(0, 7), (v) => v.toPrecision(3));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"viewof reSample = button({\n value: \"ReSample\", \n description: \"Press button to calculate a new random dataset.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"{\n return mkChart(data, model);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":317,"value":"viewof sampleSize = slider3({\n message:'Sample size',\n min: 1, \n max: 100,\n start: 20,\n step: 1,\n int: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"viewof domainWidth = slider3({\n message:'Domain width',\n min: 10, \n max: 100,\n start: 10,\n step: 5,\n int: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"model = ({ w0, wx, wy, d: -1 * w0 / wy, k: -1 * wx / wy })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"data = samples.map(e => {\n const t = model.w0 + e.x * model.wx + e.y * model.wy;\n const p = 1.0 / (Math.exp(-1 * t) + 1);\n return {x: e.x, y: e.y, p, wx: t};\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"xyDomain = [0, domainWidth]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"samples = {\n reSample;\n return mkSamples(sampleSize, xyDomain);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"mkSamples = (len, domain) => {\n const span = domain[1] - domain[0];\n const offset = domain[0];\n return Array.from(Array(len), () => {\n const x = offset + span * Math.random();\n const y = offset + span * Math.random();\n return {x, y};\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"size = ({height: 400, width: 400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"md`${colorBox(chroma.interpolateRdYlBu(1\n ))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"dataToMarkdown = (data, rowMap) => {\n const keys = Object.keys(data[0]);\n const rm = rowMap ? rowMap : (col, key) => col;\n const mds = [\n keys.join('|'),\n keys.map(k => '-'.repeat(k.length)).join('|')\n ].concat(data\n .map(row => keys.map(k => rm(row[k], k)).join('|')))\n .join('\\n');\n return md([mds]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"colorBox = color => '▩'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"// Copied from @nstrayer/t-sne-explained-in-plain-javascript\nfunction slider3({\n message = 'Set your value', \n min = 0, max = 1, start = 0.5, step = 0.1,\n precision = 3, int = false,\n}){\n \n min = min/step;\n max = max/step;\n start = start/step;\n \n const div = html`\n\t${message}\n \n ${start*step}\n `;\n const range = div.querySelector(\"[type=range]\");\n const value_disp = div.querySelector('span');\n div.value = value_disp.innerHTML = start*step;\n\n \n range.addEventListener(\"input\", () => {\n const newValue = range.valueAsNumber*step; \n div.value = newValue;\n value_disp.innerHTML = int ? Math.round(newValue) : newValue.toPrecision(precision); \n });\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"chroma = require('d3-scale-chromatic')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"