2a:T21b6,drawGraph = { const svg = d3.select(DOM.svg(width, height)) var mouseDown = 0; var buttonPress = 1; var wait = 1; var coor = []; var score = null; var submit = 0; svg.append("g") .attr("class", "bottom") .attr("transform", "translate(0," + (height-margin.bottom) + ")") .call(d3.axisBottom(x)); svg.append("g") .attr("class", "left") .attr("transform", "translate("+ (margin.left) + ",0)") .call(d3.axisLeft(y)); const line = d3.line() .x(function(d) { return x(d[0]); }) .y(function(d) { return y(d[1]); }) svg.append("path") .attr("d",line(pathCoordinates)) .style("fill", "none") .style("stroke","black") svg.selectAll("text") .style("user-select","none") svg /* .append("rect") .attr("class", "drawing") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("opacity", 0) */ .on("mousedown", function() { mouseDown = 1; }) .on("mouseup", function() { mouseDown = 0; }) .on("mouseleave", function() { mouseDown = 0; }) .on("mousemove", function() { if (mouseDown && wait && buttonPress) { wait = 0; var coordinates= d3.mouse(this); var mouseX = coordinates[0]; if (mouseX < margin.left) mouseX = margin.left; if (mouseX > width - margin.right) mouseX = margin.right; var mouseY = coordinates[1]; if (mouseY < margin.top) mouseY = margin.top; if (mouseY > height - margin.bottom) mouseY = margin.bottom; coor.push([mouseX, mouseY]); svg.append("circle") .attr("class","drawing") .attr("fill", "black") .attr("opacity", ".65") .attr("cx",mouseX) .attr("cy",mouseY) .attr("r", 3) var smallest = 9999; var index = 0; check.forEach(function(d,i) { const distance = Math.sqrt(Math.pow((x(d[0])-mouseX),2) + Math.pow((y(d[1])-mouseY),2)) if (smallest>distance) { smallest = distance; index=i } }) svg.append("circle") .attr("class","drawing") .attr("fill", "grey") .attr("cx",x(check[index][0])) .attr("cy",y(check[index][1])) .attr("r", 3) svg.append("line") .attr("class","drawing") .attr("stroke", "lightgrey") .attr("x1",x(check[index][0])) .attr("y1",y(check[index][1])) .attr("x2",mouseX) .attr("y2",mouseY) // CALCULATING THE GRADE__________________________________________________________________________________________________ // PRECISION______________________________________________________________________________________________________________ var variances = []; var variance = 0; var smallest = 99999999; for (var i = 0; i < coor.length; i++) { for (var j = 0; j < check.length; j++) { var varc = Math.pow((x(check[j][0]) - coor[i][0]),2) + Math.pow((y(check[j][1]) - coor[i][1]),2) if (smallest > varc) smallest = varc; } variances.push(smallest); smallest = 99999999; } variance = d3.sum(variances) var stdDev = Math.sqrt(variance); var precision = ( 1500 - stdDev ) / 1500 // if (precision > 0.9466666665) precision = 1 // ACCURACY_______________________________________________________________________________________________________________ var accuracy = 0; var radius = 26; var j = 0; for (var i = 0; i < check.length; i += 10) { var bubble = [x(check[i][0]), y(check[i][1])] while(j < coor.length) { if (coor[j][0] >= (bubble[0] - radius) && coor[j][0] <= (bubble[0] + radius)) { if (coor[j][1] >= (bubble[1] - radius) && coor[j][1] <= (bubble[1] + radius)) { accuracy++; break; } break; } else j++; } } accuracy /= (check.length % 10)//10.07693) if (accuracy > 1) accuracy = 1; // FINAL SCORE____________________________________________________________________________________________________________ var error = 1 - precision * accuracy; if (error < 0.05) score = "A+" else if (error < 0.08 && error >= 0.05) score = "A-" else if (error < 0.13 && error >= 0.08) score = "B" else if (error < 0.18 && error >= 0.13) score = "C" else if (error < 0.25 && error >= 0.18) score = "D" else score = "F" //________________________________________________________________________________________________________________________ setTimeout(function(){wait = 1;},20) } }) // SUBMIT BUTTON__________________________________________________________________________________________________________ svg.append("rect") .attr("class", "submit") .attr("id", "submitRect") .attr("x", margin.left) .attr("y", height - 60) .attr("rx", 6) .attr("ry", 6) .attr("width", 75) .attr("height", 40) .style("fill", "#2e68a6") .on('mouseover', () => { buttonPress = 0; d3.select("#submitRect") .transition() .duration(100) .style('fill', '#3f89d9') }) .on('mouseout', () => { buttonPress = 1; d3.select("#submitRect") .transition() .duration(100) .style('fill', '#2e68a6') }) .on('click', () => { svg.append("circle") .attr("class", "score") .attr("cx", width / 2 - 15) .attr("cy", height / 2 - 45) .attr("r", 75) .style("fill", "#7426F0") .style("opacity", 0.6) svg.append("text") .attr("class", "score") .text(score) .attr("x", width / 2 - margin.left) .attr("y", height / 2 - margin.top + 18) .style("fill", "white") .style("font-size", 70) .style("font-family", "sans-serif") .style("font-weight", 650) svg.selectAll("text") .style("user-select","none") }) svg.append("text") .attr("class", "submit") .text("Submit") .attr("font-family", "sans-serif") .attr("x", margin.left + 5) .attr("y", height - 34) .style("fill", "white") .style("font-size", 20) .on('mouseover', () => { buttonPress = 0; d3.select("#submitRect") .transition() .duration(100) .style('fill', '#3f89d9') }) .on('mouseout', () => { buttonPress = 1; d3.select("#submitRect") .transition() .duration(100) .style('fill', '#2e68a6') }) .on('click', () => { svg.append("circle") .attr("class", "score") .attr("cx", (width - margin.right - margin.left) / 2) .attr("cy", height / 2 - 45) .attr("r", 75) .style("fill", "#7426F0") .style("opacity", 0.6) svg.append("text") .attr("class", "score") .text(score) .attr("x", (width - margin.right - margin.left) / 2) .attr("y", height / 2 - margin.top + 18) .style("fill", "white") .style("font-size", 70) .style("font-family", "sans-serif") .style("font-weight", 650) .style("text-anchor", "middle") svg.selectAll("text") .style("user-select","none") }) // CLEAR _________________________________________________________________________________________________________________ svg.append("rect") .attr("class", "clear") .attr("id", "clearRect") .attr("x", width - margin.right - 60) .attr("y", height - 60) .attr("rx", 6) .attr("ry", 6) .attr("width", 60) .attr("height", 40) .style("fill", "#eb7560") .on('mouseover', () => { d3.select("#clearRect") .transition() .duration(100) .style('fill', '#f59b8c') }) .on('mouseout', () => { d3.select("#clearRect") .transition() .duration(100) .style('fill', '#eb7560') }) .on('click', () => { coor = []; d3.selectAll(".drawing").remove(); d3.selectAll(".score").remove(); }) svg.append("text") .attr("class", "clear") .text("Clear") .attr("font-family", "sans-serif") .attr("x", width - margin.right - 60 + 5) .attr("y", height - 34) .style("fill", "white") .style("font-size", 20) .on('mouseover', () => { d3.select("#clearRect") .transition() .duration(100) .style('fill', '#f59b8c') }) .on('mouseout', () => { d3.select("#clearRect") .transition() .duration(100) .style('fill', '#eb7560') }) .on('click', () => { coor = []; d3.selectAll(".drawing").remove(); d3.selectAll(".score").remove(); }) svg.selectAll("text") .style("user-select","none") yield svg.node() }2b:[] 29:{"title":"Closest Point Along a Path","cells":[{"id":0,"value":"md`# Closest Point Along a Path`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md` Click and drag to add points. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"line = d3.line()\n .x(d => x(pathCoordinates[0]))\n .y(d => y(pathCoordinates[1]))\n .curve(d3.curveBasis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"pathCoordinates = [[0,10], [20, 50], [20, 50], [40, 50], [50, 70], [60,80], [90,100]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"draw = { \n const svg = d3.select(DOM.svg(width, height))\n \n const path = svg.append(\"path\")\n .attr(\"d\",d3.line()(pathCoordinates))\n \n yield path.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"l = draw.getTotalLength();","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"check = d3.range(l+1).map((d,i)=> [draw.getPointAtLength(d).x,draw.getPointAtLength(d).y])","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"x = d3.scaleLinear()\n .domain(d3.extent(pathCoordinates,(d,i)=>d[0]))\n .range ([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"y = d3.scaleLinear()\n .domain(d3.extent(pathCoordinates,(d,i)=>d[1]))\n .range ([ height - margin.bottom, margin.top ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"margin = ({top: 40, right: 40, bottom: 90, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2b","stdlib":"1","titling":"auto"}