2b:null 2c:["$","title",null,{"children":"Drawing decision boundaries | Stanford CRAFT | Observable"}] 31:T927,svg_plot = { if (color_class != "Select feature to categorize data" && shape_class != "Select feature to categorize data"){ const clip = DOM.uid("datamax_plot"); return Plot.plot({ className: "datamax_plot", grid: true, symbol: { legend: true, }, color: { legend: true, }, marks: [ Plot.dot(data, { x: x, y: y, stroke: color_class, fill: color_class, symbol: shape_class, title: (d) => datapoint(d) //`${d.island} \n bill depth: ${d.sat} \n bill length: ${d.bill_length}` // \n makes a new line }) ], marginLeft: 90, marginBottom: 35 }) } else if (color_class != "Select feature to categorize data") { const clip = DOM.uid("datamax_plot"); return Plot.plot({ className: "datamax_plot", grid: true, color: { legend: true, }, marks: [ Plot.dot(data, { x: x, y: y, stroke: color_class, fill: color_class, title: (d) => datapoint(d) //`${d.island} \n bill depth: ${d.sat} \n bill length: ${d.bill_length}` // \n makes a new line }) ], marginLeft: 90, marginBottom: 35 }) } else if (shape_class != "Select feature to categorize data") { const clip = DOM.uid("datamax_plot"); return Plot.plot({ className: "datamax_plot", grid: true, symbol: { legend: true, }, marks: [ Plot.dot(data, { x: x, y: y, symbol: shape_class, title: (d) => datapoint(d) //`${d.island} \n bill depth: ${d.sat} \n bill length: ${d.bill_length}` // \n makes a new line }) ], marginLeft: 90, marginBottom: 35 }) } else { const clip = DOM.uid("datamax_plot"); return Plot.plot({ className: "datamax_plot", grid: true, marks: [ Plot.dot(data, { x: x, y: y, title: (d) => datapoint(d) //`${d.island} \n bill depth: ${d.sat} \n bill length: ${d.bill_length}` // \n makes a new line }) ], marginLeft: 90, marginBottom: 35 }) } } // 32:Tbc5,function Drawer({ width = 640, height = 480, curve: Curve = d3.curveBasis, stroke = "black", strokeWidth = 1.5, lineCap = "round", lineJoin = "round", } = {}) { const context = DOM.context2d(width, height); const strokes = context.canvas.value = []; const curve = Curve(context); const redo = []; context.lineJoin = lineJoin; context.lineCap = lineCap; // Render and report the new value. function render() { context.clearRect(0, 0, width, height); //displaygraph if (color_class == "Select feature to categorize data" && shape_class == "Select feature to categorize data") { const serializer = new XMLSerializer(); const svgString = serializer.serializeToString(svg_plot); const img = new Image(); img.src = 'data:image/svg+xml,' + encodeURIComponent(svgString); // limit by height // // limit by width // let hwratio = img.height/img.width; // // multiply whratio by prefered height to get wdith // new_height = hwratio * new_width; context.drawImage(img, 0, 0); } else { // limit by height let new_width = width; let new_height = height; // limit by width let hwratio = htmlcanvas.height/htmlcanvas.width; // multiply whratio by prefered height to get wdith new_height = hwratio * new_width; context.drawImage(htmlcanvas, 0, 0, new_width, new_height); } for (const stroke of strokes) { context.strokeStyle = stroke.stroke; context.lineWidth = stroke.strokeWidth; context.beginPath(); curve.lineStart(); for (const point of stroke) { curve.point(...point); } if (stroke.length === 1) curve.point(...stroke[0]); curve.lineEnd(); context.stroke(); } //context.drawImage(canvasB, 0, 0); context.canvas.value = strokes; context.canvas.dispatchEvent(new CustomEvent("input")); } d3.select(context.canvas).call(d3.drag() .container(context.canvas) .subject(dragsubject) .on("start drag", dragged) .on("start.render drag.render", render)); context.canvas.undo = () => { if (strokes.length === 0) return; redo.push(strokes.pop()); render(); }; context.canvas.redo = stroke => { if (redo.length === 0) return; strokes.push(redo.pop()); render(); }; // Create a new empty stroke at the start of a drag gesture. function dragsubject() { const currentStroke = []; currentStroke.stroke = typeof stroke === "function" ? stroke() : stroke; currentStroke.strokeWidth = typeof strokeWidth === "function" ? strokeWidth() : strokeWidth; strokes.push(currentStroke); redo.length = 0; return currentStroke; } // Add to the stroke when dragging. function dragged({subject, x, y}) { if (pen_style == "straight line"){ if (subject.length > 1){ subject.pop(); } } subject.push([x, y]); } return context.canvas; }33:[] 2f:{"id":"021fd59ef42a475a","slug":null,"title":"Drawing decision boundaries","thumbnail":"f19b7d7f118ee32eb6ea4be499490689cc390447e3cbb52c71b5871a7b376da4","access_level":"public","create_time":"$D2023-04-19T04:22:34.413Z","update_time":"$D2023-05-08T18:42:42.691Z","view_time":null,"first_public_time":"$D2023-04-19T04:22:34.413Z","has_unpublished_edits":null,"fork":{"id":"5582c951f04cafdc","slug":null,"title":"Exploring our data","owner":{"id":"67e3dd27e9592d47","login":"isabel-s","name":"Isabel Sieh"}},"stars":0,"starred":false,"owner":{"type":"team","id":"536eaf41f0bc4e61","login":"craft","name":"Stanford CRAFT","avatar_url":"https://avatars-next.observableusercontent.com/e673d31841ecb3856e8fb35c7f2c737ed94bcc06c936e2645649b5e0148d0d01","tier":"starter_2024"},"version":511,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bfa5ae34f56bc85f","login":"parthsarin","name":"Parth Sarin","avatar_url":"https://avatars-next.observableusercontent.com/bd45437f85901a34e4ddc3dd0905a256e0e6563ff9fd992401ba315df4cbce5f","tier":null}],"members":[{"type":"team","id":"536eaf41f0bc4e61","login":"craft","name":"Stanford CRAFT","avatar_url":"https://avatars-next.observableusercontent.com/e673d31841ecb3856e8fb35c7f2c737ed94bcc06c936e2645649b5e0148d0d01","tier":"starter_2024","role":"editor"},{"type":"individual","id":"bfa5ae34f56bc85f","login":"parthsarin","name":"Parth Sarin","avatar_url":"https://avatars-next.observableusercontent.com/bd45437f85901a34e4ddc3dd0905a256e0e6563ff9fd992401ba315df4cbce5f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Drawing decision boundaries","cells":[{"id":0,"value":"# Drawing decision boundaries\nLet's explore our data together!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"## Upload\n_First upload a CSV file of data_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"viewof csvfile = Inputs.file({label: \"CSV file\", accept: \".csv\", required: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"## All the data a computer sees\n_See the table generated below from the CSV file you uploaded_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"When we give a computer our data a computer interprets it as entries of numerical or categorial values. How might this be different from how we think of the information?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"## Finding Patterns\nWhen a computer tries to understand data, it tries to find patterns. Let's try to graph what patterns a computer might explore. Pick features to explore on a graph as X-Axis, Y-Axis and (optional) Colors and Symbols.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"viewof x = Inputs.select(col, {label: \"X-Axis\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof y = Inputs.select(col, {label: \"Y-Axis\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"viewof color_class = Inputs.select(categories, {label: \"Color (Optional)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"viewof shape_class = Inputs.select(categories, {label: \"Symbol (Optional)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"## Drawing a Decision Boundary\nA classification problem asks: given some observations of a thing, what is the best way to assign that thing to a class based on some of its features? Let's say we wanted to classify our observations (our data!)\n\nA solution to the classification problem is a rule that partitions the observations into these \"classes\" based on the features. This is called a **decision boundary**. The decision boundary can be a straight line, a curved line, or even a more complex shape, depending on the complexity of the data and the algorithm used. Let's try to draw a decision boundary:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"viewof strokeWidth = Inputs.range([0.5, 20], {value: 1.5, step: 0.5, label: \"Stroke width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"viewof stroke = Inputs.color({label: \"Color\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"undo = {\n const keydowned = event => {\n if (event.keyCode === 90 && event.metaKey && !event.altKey) {\n if (event.shiftKey) viewof strokes.redo();\n else viewof strokes.undo();\n event.preventDefault();\n }\n };\n const form = html``;\n form.redo.onclick = () => viewof strokes.redo();\n form.undo.onclick = () => viewof strokes.undo();\n addEventListener(\"keydown\", keydowned);\n invalidation.then(() => removeEventListener(\"keydown\", keydowned));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"viewof pen_style = Inputs.radio([\"scribble\", \"straight line\"], {value: \"scribble\", label: html`Pen Style`, format: x => html`${x}`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"_Click the space below to see the graph!_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"viewof strokes = Drawer({\n width,\n height: 500,\n stroke: () => viewof stroke.value,\n strokeWidth: () => viewof strokeWidth.value\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":496,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"# Appendix\nAll the special code that makes us able to explore this data!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"html2canvas = (await import(\"https://esm.sh/html2canvas@1.4.1\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"data = csvfile.csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"function datapoint(d) {\n let tooltip = 'Datapoint info: \\n'\n\n for (const val in d) {\n if (d[val] != null){\n if (val == 'name') {\n tooltip += `labeler: ${d[val]}\\n` ;\n } else {\n tooltip += `${val}: ${d[val]}\\n` ;\n }\n }\n }\n \n return tooltip\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// get numerical types of data to put into an array\ncol = data.columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"htmlcanvas = {if (color_class == \"Select feature to categorize data\" && shape_class == \"Select feature to categorize data\") {\n return null\n} else {\n return html2canvas(svg_plot)\n}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"// TODO: get the numerical ones\n// \nres = {\n let text = \"\"\n for (let r = 0; r < data.length; r++) {\n for (let c = 0; c < col.length; c++) {\n text += col[c] + \"
\";\n }\n }\n return text\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"categories = [\"Select feature to categorize data\"].concat(col)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"strokes // It’s a view!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"