2f:Tf2f,viewof chart = { let display_lines = true; const svg = d3.create("svg") .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", [size.pad / 2, size.pad / 2, size.width - size.pad, size.height - size.pad]) .style("max-width", "580px"); svg.append("g").attr("id", "contour").style("filter", "blur(0px)"); svg.append("g").attr("id", "nearest"); svg.on("mousemove", function (event, d) { if (!display_lines) { svg.selectAll("line").remove(); return; } const pointer = d3.pointer(event); const nearests = findKNearest({x: pointer[0], y: pointer[1]}, dataset, k); const lines = svg.select("#nearest").selectAll("line").data(nearests); lines.enter() .append("line") .style("stroke-opacity", 1) .merge(lines) .style("stroke", d => d3.schemeCategory10[dataset[d.ind].label]) .attr("x1", pointer[0]) .attr("y1", pointer[1]) .attr("x2", d => dataset[d.ind].x) .attr("y2", d => dataset[d.ind].y); }); function display_updated_background_cells() { svg.select("#contour") .selectAll("rect") .data(background_cells) .filter(function(d) { return d.score != d3.select(this).property("score") // filter out unchanged data }) .property("score", d => d.score) .attr("fill", d => color_level(d.score)) .transition() .duration(250) .attr("opacity", 0.6) .transition() .duration(250) .attr("opacity", 0.3); } const scatter = svg.append("g") .attr("id", "data") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("r", radius) .attr("fill", d => d3.schemeCategory10[d.label]) .attr("opacity", 0.65) .attr("cx", d => d.x) .attr("cy", d => d.y) .on("mouseover", (e, d) => { display_lines = false; d3.select(e.currentTarget) .attr("stroke", "black") .attr("opacity", null) .style("cursor", "move"); }) .on("mouseout", (e, d) => { display_lines = true; d3.select(e.currentTarget) .attr("stroke", null) .attr("opacity", 0.75) .style("cursor", "default"); }) .on("click", (e, d) => { const index = scatter.nodes().indexOf(this); d.label = (d.label + 1) % 2; d3.select(e.currentTarget).attr("fill", d => d3.schemeCategory10[d.label]); update_background(d, index); display_updated_background_cells(); }) .call( d3.drag() .on("start", function (e, d) { console.log("start drag"); svg.select("#data").style("cursor", "move"); }) .on("drag", function (e, d) { const index = scatter.nodes().indexOf(this); d3.select(this).raise().attr("cx", d.x = e.x).attr("cy", d.y = e.y); update_background(d, index); display_updated_background_cells(); }) .on("end", function (e, d) { svg.style("cursor", "default"); svg.select("#data").style("cursor", "default"); }) ); svg.select("#contour") .selectAll("rect") .data(background_cells) .enter() .append("rect") .property("score", d => d.score) .attr("x", d => d.x - boundary_cell_size / 2) .attr("y", d => d.y - boundary_cell_size / 2) .attr("width", boundary_cell_size) .attr("height", boundary_cell_size) .attr("fill", d => color_level(d.score)) .attr("opacity", 0.3) var xscale = d3.scaleLinear().domain([datarange.minx, datarange.maxx]).range([0, size.width]); svg.append("g").attr("transform", "translate(0, 450)").call(d3.axisBottom(xscale)); var yscale = d3.scaleLinear().domain([datarange.miny, datarange.maxy]).range([0, size.height]); svg.append("g").attr("transform", "translate(30, 0)").call(d3.axisLeft(yscale)); return svg.node(); } 30:T10b9,viewof chartWithTestData = { let display_lines = true; const svg2 = d3.create("svg") .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", [size.pad / 2, size.pad / 2, size.width - size.pad, size.height - size.pad]) .style("max-width", "580px"); svg2.append("g").attr("id", "contour").style("filter", "blur(0px)"); svg2.append("g").attr("id", "nearest"); svg2.on("mousemove", function (event, d) { if (!display_lines) { svg2.selectAll("line").remove(); return; } const pointer = d3.pointer(event); const nearests = findKNearest({x: pointer[0], y: pointer[1]}, dataset, k); const lines = svg2.select("#nearest").selectAll("line").data(nearests); lines.enter() .append("line") .style("stroke-opacity", 1) .merge(lines) .style("stroke", d => d3.schemeCategory10[dataset[d.ind].label]) .attr("x1", pointer[0]) .attr("y1", pointer[1]) .attr("x2", d => dataset[d.ind].x) .attr("y2", d => dataset[d.ind].y); }); function display_updated_background_cells() { svg2.select("#contour") .selectAll("rect") .data(background_cells) .filter(function(d) { return d.score != d3.select(this).property("score") // filter out unchanged data }) .property("score", d => d.score) .attr("fill", d => color_level(d.score)) .transition() .duration(250) .attr("opacity", 0.6) .transition() .duration(250) .attr("opacity", 0.3); } let scatter2 = svg2.append("g") .attr("id", "testdata") .selectAll("circle") .data(displayTestData) .enter() .append("circle") .attr("r", radius-2) .attr("fill", d => d3.schemeCategory10[d.label]) .attr("stroke", 'red') .attr("stroke-width", 2) .attr("opacity", 0.75) .attr("cx", d => d.x) .attr("cy", d => d.y); scatter2 = svg2.append("g") .attr("id", "data") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("r", radius) .attr("fill", d => d3.schemeCategory10[d.label]) .attr("opacity", 0.65) .attr("cx", d => d.x) .attr("cy", d => d.y) .on("mouseover", (e, d) => { display_lines = false; d3.select(e.currentTarget) .attr("stroke", "black") .attr("opacity", null) .style("cursor", "move"); }) .on("mouseout", (e, d) => { display_lines = true; d3.select(e.currentTarget) .attr("stroke", null) .attr("opacity", 0.75) .style("cursor", "default"); }) .on("click", (e, d) => { const index = scatter2.nodes().indexOf(this); d.label = (d.label + 1) % 2; d3.select(e.currentTarget).attr("fill", d => d3.schemeCategory10[d.label]); update_background(d, index); display_updated_background_cells(); }) .call( d3.drag() .on("start", function (e, d) { console.log("start drag"); svg2.select("#data").style("cursor", "move"); }) .on("drag", function (e, d) { const index = scatter2.nodes().indexOf(this); d3.select(this).raise().attr("cx", d.x = e.x).attr("cy", d.y = e.y); update_background(d, index); display_updated_background_cells(); }) .on("end", function (e, d) { svg2.style("cursor", "default"); svg2.select("#data").style("cursor", "default"); }) ); svg2.select("#contour") .selectAll("rect") .data(background_cells) .enter() .append("rect") .property("score", d => d.score) .attr("x", d => d.x - boundary_cell_size / 2) .attr("y", d => d.y - boundary_cell_size / 2) .attr("width", boundary_cell_size) .attr("height", boundary_cell_size) .attr("fill", d => color_level(d.score)) .attr("opacity", 0.3) var xscale = d3.scaleLinear().domain([datarange.minx, datarange.maxx]).range([0, size.width]); svg2.append("g").attr("transform", "translate(0, 450)").call(d3.axisBottom(xscale)); var yscale = d3.scaleLinear().domain([datarange.miny, datarange.maxy]).range([0, size.height]); svg2.append("g").attr("transform", "translate(30, 0)").call(d3.axisLeft(yscale)); return svg2.node(); } 31:T4c3,function update_background(selected_point, index) { for (let i = 0; i < background_cells.length; i ++) { const dist = L2dist(background_cells[i], selected_point) let is_neightbor = false; for (let j = 0; j < k; j++) { if ( cells_nearests[i][j].ind == index) { // selected point is currently a neighbor if (dist > cells_nearests[i][k - 1].dist) { // might no longer be a neighbor cells_nearests[i] = findKNearest(background_cells[i], dataset, k) background_cells[i].score = d3.mean(cells_nearests[i].map(d => d.label)) } else { // update neighbors state cells_nearests[i][j].dist = dist; cells_nearests[i][j].label = selected_point.label; background_cells[i].score = d3.mean(cells_nearests[i].map(d => d.label)) cells_nearests[i] = cells_nearests[i].sort((a, b) => a.dist - b.dist); } is_neightbor = true; break; } } // becoming a neighbor if (!is_neightbor && dist <= cells_nearests[i][k - 1].dist) { cells_nearests[i] = findKNearest(background_cells[i], dataset, k) background_cells[i].score = d3.mean(cells_nearests[i].map(d => d.label)) } } }32:[] 2d:{"title":"Visualize the \"unlock rule\" decision boundary using k-nearest neighbors","cells":[{"id":793,"value":"md`# Visualize the \"unlock rule\" decision boundary using k-nearest neighbors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"viewof csvfile = Inputs.file({label: \"Load training data\", accept: \".csv\", required: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"html`\n

${viewof var1}

${viewof var2}

${viewof k}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1169,"value":"viewof meLabel = Inputs.select(labelValues, {label: \"Data to use for 'me'\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"value":"md`# Testing Your Model`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1131,"value":"Load your test data here. You'll see the same graph of your training data, but this time with test data and a report of your accuracy. If you feel tempted to go back up and change the k value to improve your performance on the test data, resist the urge! That's a way to accidentally \"over fit\" which means tailoring your model to the particular data you're testing it with. You won't know /how/ it performs on new data, but likely not very well. If you want to improve, get more training data and keep your test data separate!","pinned":false,"hidden":false,"mode":"md"},{"id":1038,"value":"viewof testfile = Inputs.file({label: \"Load test data\", accept: \".csv\", required: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"html`\n

${viewof chartWithTestData}

${viewof resultsplot}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"viewof resultsplot = Plot.plot({\n color: {\n legend: true\n },\n width: 200,\n marks: [\n Plot.barY(results, {x: \"type\", y: \"number\", fill:\"kind\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"md`# Appendix of code things`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"labelValues = Array.from(new Set(data.map( d => d[\"label\"])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"size = ({\n height: 480,\n width: 480,\n pad: 20,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"// 2D mesh grid\nbackground_cells = {\n const x = d3.range(boundary_cell_size / 2, size.width + 1, boundary_cell_size);\n const y = d3.range(boundary_cell_size / 2, size.height + 1, boundary_cell_size);\n let mesh = [];\n for (let i = 0; i < x.length; i++) {\n for (let j = 0; j < y.length; j++) {\n mesh.push({x: x[i], y: y[j]})\n }\n }\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"display_range = {\n return {minx: boundary_cell_size/2, maxx: (size.width+1), miny: (boundary_cell_size/2), maxy: (size.height+1)}\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"// keep track of assignment to reduce computations during drags\ncells_nearests = background_cells.map(c => findKNearest(c, dataset, k));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"{\n let neighbors_to_test_cells = displayTestData.map(c => findKNearest(c, dataset, k));\n displayTestData.map((c, i) => {c.score = d3.mean(neighbors_to_test_cells[i].map(d => d.label))})\n return displayTestData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"results = getResultsForScoredData(displayTestData);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"function getResultsForScoredData(data) {\n let falsePositive = 0;\n let falseNegative = 0;\n let correct = 0;\n for (let i = 0; i < data.length; i++) {\n if (data[i].label === 0 && data[i].score === 1) {\n falsePositive++;\n } else if (data[i].label === 1 && data[i].score === 0) {\n falseNegative++;\n } else {\n correct++;\n }\n }\n return [{type: \"correct\", kind: \"correct\", number: correct}, {type: \"incorrect\", kind: \"false positive\", number: falsePositive}, {type: \"incorrect\", kind: \"false negative\", number: falseNegative}];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"{ background_cells.map((c, i) => {c.score = d3.mean(cells_nearests[i].map(d => d.label))}) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"color_level = d3.interpolateRgbBasis([\n d3.schemeCategory10[0], d3.schemeCategory10[0], d3.schemeCategory10[0],\n d3.schemeCategory10[0], d3.schemeCategory10[0], d3.schemeCategory10[0],\n d3.schemeCategory10[0], d3.schemeCategory10[0], d3.schemeCategory10[0],\n d3.color(\"#E3E3E3\"), // we want a sharp transition between the two colors\n d3.schemeCategory10[1], d3.schemeCategory10[1], d3.schemeCategory10[1],\n d3.schemeCategory10[1], d3.schemeCategory10[1], d3.schemeCategory10[1],\n d3.schemeCategory10[1], d3.schemeCategory10[1], d3.schemeCategory10[1]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`# K-NN algo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"L2dist = (a, b) => (a.x - b.x) ** 2 + (a.y - b.y) ** 2;","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"findKNearest = function (point, data, k) {\n return data.map(function (d, i) {\n const dist = L2dist(d, point)\n return {ind: i, label: d.label, dist: dist};\n })\n .sort((a, b) => a.dist - b.dist)\n .slice(0, k);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"import {slider} from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"data = csvfile.csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1042,"value":"testdata = testfile.csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"displayTestData = {\n let testdata2d = extract2dData(testdata, var1, var2, meLabel); // \"\" because all points are \"not me\" ??\n let displayTestData = mapDatasetToDisplayRange(testdata2d, datarange, display_range);\n return displayTestData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"style = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"displaydata = extract2dData(data, var1, var2, meLabel);","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"datarange = getRangeFor(displaydata);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"function mapDatasetToDisplayRange(data, data_range, display_range) {\n let out = [];\n for (let i = 0; i < data.length; i++) {\n let value = data[i];\n if (value[\"label\"] !== null) {\n let newx = mapToRange(value.x, data_range.minx, data_range.maxx, display_range.minx, display_range.maxx);\n let newy = mapToRange(value.y, data_range.miny, data_range.maxy, display_range.miny, display_range.maxy);\n out.push( {x: newx, y:newy, label: value.label});\n }\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":" function mapToRange(val, sourceMin, sourceMax, targetMin, targetMax) {\n let percent = (val-sourceMin)/(sourceMax-sourceMin);\n return targetMin + percent*(targetMax - targetMin);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"function getRangeFor(data) {\n return {minx: d3.min(data.map( d => d.x)),\n maxx: d3.max(data.map( d => d.x)),\n miny: d3.min(data.map( d => d.y)),\n maxy: d3.max(data.map( d => d.y))}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"function extract2dData(data, var1, var2, targetLabel) {\n let out = [];\n data.forEach( function(value) {\n if (value[\"label\"] !== null) { // HACKHACKHACK why do I have a row with null values?!\n out.push( {x:value[var1], y:value[var2], label:(value[\"label\"].trim() === targetLabel?1:0) } )\n }\n })\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"dataset = mapDatasetToDisplayRange(displaydata, datarange, display_range);","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"viewof radius = slider({min: 3, max: 10, step: 1, value: 5, description: \"data point radius\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"viewof boundary_cell_size = slider({min: 4, max: 16, step: 1, value: 8, description: \"Size of background cells for decision boundary
the lower, the smoother, but the higher, the faster\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof k = slider({min: 1, max: 25, step: 1, value: 3, description: \"Unlock based on nearest k examples\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"viewof var2 = Inputs.select(data.columns, {label: \"y-axis variable\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"viewof var1 = Inputs.select(data.columns, {label: \"x-axis variable\"})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}