29:null 2a:["$","title",null,{"children":"Live K-Nearest Neighbors (knn) Classification | Maddie Bendele | Observable"}] 2f:Tea8,{ // draw chart const svg = d3.select(DOM.svg(width, height)); const g = svg .append("g") .attr("transform", `translate(${padding}, ${padding})`); // VORONOI STUFF const voronoiDiagram = d3 .voronoi() .x((d) => d[0]) .y((d) => d[1]) .size([plotAreaWidth, plotAreaHeight])(data); // // draw the polygons const voronoiPolygons = g .append("g") .attr("class", "voronoi-polygons") .style("pointer-events", "none") .selectAll("path.polygon") .data(voronoiDiagram.polygons()) .enter() .append("path") .attr("class", "polygon") .style("stroke-width", 2) .style("stroke", "white") .style("fill", (d) => classColorScale(d.data[2])) .style("opacity", 0) .attr("d", (d) => `M${d.join("L")}Z`) // draw circles const circles = g .append("g") .attr("class", "circles") .selectAll(".data-point") .data(data) .enter() .append("circle") .classed("data-point", true) .attr("r", pointRadius) .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]) .style('stroke', (d) => d[2] === 0 ? 'royalblue' : 'red') .style('stroke-width', 2) .attr("fill", (d) => classColorScale(d[2])) const testCircles = g.append("g").attr("class", "test-circles"); const testTexts = g.append("g").attr("class", "test-texts"); // add the overlay on top of everything to take the mouse events g.append("rect") .attr("class", "overlay") .attr("width", plotAreaWidth) .attr("height", plotAreaHeight) .style("opacity", 0) .on("click", mouseMoveHandler); function highlightTest2Train(d) { const newCircle = testCircles .selectAll("circle.test") .data([d]) .enter() .append("circle") .attr("r", pointRadius + 1) .style("stroke", "black") .style("stroke-width", 3) .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]) .attr("fill", "white") const testText = testTexts .selectAll('text.test') .data([d]) .enter() .append('text') .attr('x', (d) => d[0]) .attr('y', (d) => d[1]) .html('PRED') .style('font-size', '11px') .style('font-family', 'Arial') .attr('dx', -pointRadius - 4) .attr('dy', -pointRadius - 2) // 2. find n-nearest neighbors to point const loc = d.slice(0, 2); const nn = getNNN(data, loc, k); // 3. draw lines from point to n-nearest neighbors g.selectAll(".polygon") .transition().duration(t) .style("opacity", (d, i) => (nn.indexOf(i) > -1 ? 0.5 : 0)) .transition() .style("opacity", 0); // draw lines between points const points = data.filter((d, i) => nn.indexOf(i) > -1); g.selectAll(".line") .data(points) .enter() .append("line") .lower() .attr("class", "neighbor-line") .attr("x1", (d) => loc[0]) .attr("y1", (d) => loc[1]) .attr("x2", (d) => loc[0]) .attr("y2", (d) => loc[1]) .attr("stroke", "black") .style("stroke-width", 3) .style("pointer-events", "none") // .style("opacity", 0.5) .transition().duration(t) .attr("x1", (d) => loc[0]) .attr("y1", (d) => loc[1]) .attr("x2", (d) => d[0]) .attr("y2", (d) => d[1]) .transition() .attr("x1", (d) => loc[0]) .attr("y1", (d) => loc[1]) .attr("x2", (d) => loc[0]) .attr("y2", (d) => loc[1]) .transition() .remove(); // predict the new class and color accordingly const classPred = predict(nn); newCircle .transition().duration(t) .attr("r", pointRadius + 4) .transition().duration(t) .style("fill", classColorScale(classPred)) .attr("r", pointRadius) } // callback for when the mouse moves across the overlay function mouseMoveHandler() { // get the current mouse position const [mx, my] = d3.mouse(this); // highlightToTest highlightTest2Train([mx, my, 0]); } yield svg.node() }30:[] 2d:{"id":"ae817576902e914f","slug":null,"title":"Live K-Nearest Neighbors (knn) Classification","thumbnail":"3b008350b4d7e8224f46cb73562eb819e87d7623385d3e17fe3181ac43f3008a","access_level":"public","create_time":"$D2023-10-20T00:46:57.586Z","update_time":"$D2023-10-20T00:49:37.282Z","view_time":null,"first_public_time":"$D2023-10-20T00:46:57.586Z","fork":{"id":"47259f70c12a1351","slug":"live-k-nearest-neighbors-classification","title":"Live K-Nearest Neighbors (knn) Classification","owner":{"id":"9d7ba106b127985c","login":"jwilber","name":"Jared Wilber"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f5a60deb983d2ac1","login":"mbendele","name":"Maddie Bendele","avatar_url":"https://avatars-next.observableusercontent.com/eda08aa21264f41360de6456790ae57ec6fa4ab04010c83e854f643516c54538","tier":"starter_2024"},"version":299,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"24c6369a6fc83150","login":"mbendele","name":"Maddie Bendele","avatar_url":"https://avatars-next.observableusercontent.com/df056cb5c50bb95442f5984e912a3fdad13fb13fc423a0b8e54da82de553579a","tier":null}],"members":[{"type":"individual","id":"24c6369a6fc83150","login":"mbendele","name":"Maddie Bendele","avatar_url":"https://avatars-next.observableusercontent.com/df056cb5c50bb95442f5984e912a3fdad13fb13fc423a0b8e54da82de553579a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Live K-Nearest Neighbors (knn) Classification","cells":[{"id":0,"value":"md`# Live K-Nearest Neighbors (knn) Classification\n\n**Click on the canvas below** to add a test-point and watch it be classified using the k-nearest neighbors (knn) algorithm.\n\nThe nearest neighbors (& single-cell voronoi regions) used for the classification are briefly highlighted.\n\nCircles are colored according to the majority class, and ties are colored white.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof numTrain = slider({\n min: 50, \n max: 100, \n step: 1, \n value: 50, \n title: \"Number of Training Points\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof k = slider({\n min: 1, \n max: 50, \n step: 1, \n value: 5, \n title: \"k\", \n description: \"Number of nearest neighbors (0-50) used for classification\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"t = 700\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"function predict(nn) {\n // filter data to class scores of nn\n const neighborScores = data\n .filter((d, i) => nn.indexOf(i) > -1)\n .map((d) => d[2]);\n // sum scores\n let classPred = neighborScores.reduce((a, b) => a + b, 0);\n // divide sum scores by k\n classPred /= k;\n // resolve tie\n if (classPred === 0.5) { return 99; }\n // predict\n return Math.round(classPred);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"function getNNN(data, point, n) {\n // 1. get the distances between the data & current point.\n let dists = [];\n for (let i = 0; i < data.length; i++) {\n dists.push([i, dist(data[i], point)]);\n }\n // 2. sort those points to the test data in ascending order\n dists.sort((a, b) => a[1] - b[1]);\n \n // 3. Keep the indices of the top n-nearest neighbors\n let nnn = [];\n for (let i = 0; i < n; i++) {\n nnn.push(dists[i][0]);\n }\n return nnn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"classColorScale = d3\n .scaleOrdinal()\n .domain([0, 1, 99])\n .range([\"skyblue\", \"salmon\", \"white\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"data1 = makeData(numTrain)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"makeData = (n) => {\n return d3.range(n).map(() => {\n let x = Math.random() * (plotAreaWidth - padding) + padding / 2;\n let y = Math.random() * (plotAreaHeight - padding) + padding / 2;\n return [x, y, Math.round(Math.random())];\n });\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"dist = (x, y) => (x[0] - y[0]) ** 2 + (x[1] - y[1]) ** 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"pointRadius = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"plotAreaHeight = height - padding - padding;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"plotAreaWidth = width - padding - padding;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"padding = 40;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"viewof formData = {\n let formData = \"Signed In\";\n formData = formWithSubmit(html`\n \n`);\n return formData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"import {\n terms,\n getPhameratorData,\n user,\n formWithSubmit,\n styles\n} with { formData } from \"@scresawn/phamerator-api-utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"data = {\n let data = await getPhameratorData(\n dataset,\n \"/genesbycluster/G\",\n user.email,\n user.password\n );\n return data.map((d) => {\n d.phamName = +d.phamName;\n return d;\n });\n // .slice(0, 400)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"viewof dataset = Inputs.select(user.datasets.sort(), {\n label: \"Select a data set\",\n value: \"Actino_Draft\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

Phamerator.org Login