31:T377b,drawGraph = { const svg = html `` var mouseDown = 0; var buttonPress = 1; var wait = 1; var coor = []; var score = "N"; var submit = 0; var show = 1; const curve = d3.line() .curve(d3[type]) .x(function(d) { return x(d[0]); }) .y(function(d) { return y(d[1]); }) d3.select(svg) //Bottom axis .append("g") .attr("class", "bottom") .attr("transform", "translate(0," + (height-margin.bottom) + ")") .call(d3.axisBottom(x)); d3.select(svg) //Left axis .append("g") .attr("class", "left") .attr("transform", "translate("+ (margin.left) + ",0)") .call(d3.axisLeft(y)); d3.select(svg) //The correct curve which is hidden for now .append("path") .attr("id", "curve") .attr("d",curve(pathCoordinates)) .style("fill", "none") .style("stroke","#3FE1FF") .style("opacity", 0) .style("stroke-width", 5) d3.selectAll("text") //So that no text is selected as you draw .style("user-select","none") d3.select(svg) //A screen over the background .append("rect") .attr("id", "background") .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) d3.select(svg) //Border .append("rect") .attr("id", "border") .attr("x", margin.left + 3) .attr("y", margin.top) .attr("width", width - margin.left - margin.right - 3) .attr("height", height - margin.top - margin.bottom) .attr("fill", "none") .style("stroke", "black") .attr("opacity", 0.2) .style("stroke-width", "6") d3.select(svg) .on("mousedown", function() { mouseDown = 1; }) .on("mouseup", function() { mouseDown = 0; }) .on("mouseleave", function() { mouseDown = 0; }) .on("mousemove", function() { if (mouseDown && wait && buttonPress) { //To draw the points wait = 0; var coordinates= d3.mouse(this); var mouseX = coordinates[0]; if (mouseX < margin.left - 5) mouseX = margin.left; //Conditions to avoid drawing outside graph if (mouseX > width - margin.right + 5) mouseX = width - margin.right; var mouseY = coordinates[1]; if (mouseY < margin.top - 5) mouseY = margin.top; if (mouseY > height - margin.bottom + 5) mouseY = height - margin.bottom; coor.push([mouseX, mouseY]); d3.select(svg) //Drawing circles as mouse moves .append("circle") .attr("class","drawing") .attr("fill", "black") .attr("opacity", ".65") .attr("cx",mouseX) .attr("cy",mouseY) .attr("r", 3) var smallest = 9999; //Finding the closest point on the actual curve 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 } }) d3.selectAll("text") .style("user-select","none") // CALCULATING THE GRADE - PRECISION_____________________________________________________________________________________ var variances = []; //Array of all variances var variance = 0; var smallest = 99999999; for (var i = 0; i < coor.length; i++) { //To find variances 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) //To find standard deviation var stdDev = Math.sqrt(variance); //Standard deviation var precision = (3000 - stdDev) / 3000 //Adjusting the value of standard deviation to acceptable pixel distance // CALCULATING THE GRADE - ACCURACY______________________________________________________________________________________ var accuracy = 0; var bubble = []; for (var i = 0; i < check.length; i += bubbleRadius * 2){ bubble.push([x(check[i][0]), y(check[i][1])]); } var i = 0; while(i < coor.length) { //To adjust the grade according to var j = 0; //percentage of curve drawn while(j < bubble.length) { if (coor[i][0] >= bubble[j][0] - bubbleRadius && coor[i][0] <= bubble[j][0] + bubbleRadius) { if (coor[i][1] >= bubble[j][1] - bubbleRadius && coor[i][1] <= bubble[j][1] + bubbleRadius) { accuracy++; bubble.splice(j, 1); break; } break; } j++; } i++; } console.log(accuracy) accuracy /= bubbleCount //Adjusting to the number of bubbles created if (accuracy > 1) accuracy = 1; //Safe condition /*for (var i = 0; i < bubble.length; i++) { d3.select(svg) .append("circle") .attr("cx", bubble[i][0]) .attr("cy", bubble[i][1]) .attr("r", bubbleRadius) .style("opacity", 0.5) }*/ // CALCULATING THE GRADE - FINAL SCORE___________________________________________________________________________________ var error = accuracy * precision; error = Math.pow(error,0.5); error = 1 - error; console.log("Error = ", error) 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.40 && error >= 0.18) score = "D" else score = "F" //_______________________________________________________________________________________________________________________ setTimeout(function(){wait = 1;},20) } }) d3.selectAll("text") .style("user-select","none") // SUBMIT BUTTON________________________________________________________________________________________________________ d3.select(svg) //The button bg .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', () => { //Button highlight animation buttonPress = 0; d3.select("#submitRect") .transition() .duration(100) .style('fill', '#3F89D9') }) .on('mouseout', () => { //Button highlight animation buttonPress = 1; d3.select("#submitRect") .transition() .duration(100) .style('fill', '#2E68A6') }) .on('click', () => { svg.append("circle") //Grade bg .attr("class", "score") .attr("cx", width / 2 - 15) .attr("cy", height / 2 - 45) .attr("r", 0) .style("opacity", 0.65) .style("fill", "#7426F0") .transition() .ease(d3.easeBounce) .duration(500) .attr("r", 75) svg.append("text") //Grade .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) d3.select("#curve") .style("opacity", 0.5) svg.selectAll("text") .style("user-select","none") }) d3.select(svg) //Button text .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', () => { //Button highlight animation buttonPress = 0; d3.select("#submitRect") .transition() .duration(100) .style('fill', '#3f89d9') }) .on('mouseout', () => { //Button highlight animation buttonPress = 1; d3.select("#submitRect") .transition() .duration(100) .style('fill', '#2e68a6') }) .on('click', () => { d3.select(svg) .append("circle") //Grade bg .attr("class", "score") .attr("cx", (width - margin.right - margin.left) / 2) .attr("cy", height / 2 - 45) .attr("r", 0) .style("opacity", 0.65) .style("fill", "#7426F0") .transition() .ease(d3.easeBounce) .duration(500) .attr("r", 75) d3.select(svg) .append("text") //Grade 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") d3.select("#curve") .style("opacity", 0.5) d3.selectAll("text") .style("user-select","none") }) // SHOW ANSWER__________________________________________________________________________________________________________ d3.select(svg) .append("rect") //Button bg .attr("class", "show") .attr("id", "showRect") .attr("x", width - margin.right - 210) .attr("y", height - 60) .attr("rx", 6) .attr("ry", 6) .attr("width", 140) .attr("height", 40) .style("fill", "#63D771") .on('mouseover', () => { //Button highlight animation buttonPress = 0; d3.select("#showRect") .transition() .duration(100) .style('opacity', 0.8) }) .on('mouseout', () => { //Button highlight animation buttonPress = 1; d3.select("#showRect") .style("opacity", 1) .transition() .duration(100) .style('opacity', 1) }) .on('click', () => { //Show the correct curve created at the top of this code d3.select("#curve") .style("opacity", (show%2)/1.2) if (show % 2 == 1) { d3.select("#showText") .text("Hide Answer") d3.select("#showRect") .style("fill", "#FADE27") show++;} else { d3.select("#showText") .text("Show Answer") d3.select("#showRect") .style("fill", "#63D771") show++; } d3.selectAll("text") .style("user-select","none") }) d3.select(svg) .append("text") //Button text .attr("class", "show") .attr("id", "showText") .text("Show Answer") .attr("font-family", "sans-serif") .attr("x", width - margin.right - 200) .attr("y", height - 34) .style("font-size", 20) .style("opacity", 1) .style("fill", "white") .on('mouseover', () => { //Button highlight animation buttonPress = 0; d3.select("#showRect") .transition() .duration(100) .style('opacity', 0.8) }) .on('mouseout', () => { //Button highlight animation buttonPress = 1; d3.select("#showRect") .style("opacity", 1) .transition() .duration(100) .style('opacity', 1) }) .on('click', () => { //Show the correct curve created at the top of this code d3.select("#curve") .style("opacity", (show%2)/1.2) if (show % 2 == 1) { d3.select("#showText") .text("Hide Answer") d3.select("#showRect") .style("fill", "#FADE27") show++;} else { d3.select("#showText") .text("Show Answer") d3.select("#showRect") .style("fill", "#63D771") show++; } d3.selectAll("text") .style("user-select","none") }) // CLEAR________________________________________________________________________________________________________________ d3.select(svg) .append("rect") //Button bg .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', () => { //Button highlight animation d3.select("#clearRect") .transition() .duration(100) .style('fill', '#f59b8c') }) .on('mouseout', () => { //Button highlight animation d3.select("#clearRect") .transition() .duration(100) .style('fill', '#eb7560') }) .on('click', () => { //Remove the drawing and reset the score coor = []; d3.selectAll(".drawing").remove(); d3.selectAll(".score").remove(); }) d3.select(svg) .append("text") //Button 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', () => { //Button highlight animation d3.select("#clearRect") .transition() .duration(100) .style('fill', '#f59b8c') }) .on('mouseout', () => { //Button highlight animation d3.select("#clearRect") .transition() .duration(100) .style('fill', '#eb7560') }) .on('click', () => { //Remove the drawing and reset the score coor = []; d3.select("#curve") .style("opacity", 0) d3.selectAll(".drawing").remove(); d3.selectAll(".score").remove(); d3.select("#showText") .text("Show Answer") d3.select("#showRect") .style("fill", "#63D771") score = "N"; }) d3.selectAll("text") .style("user-select","none") return svg }32:[] 2f:{"title":"Closest Point Along a Path- MARK III","cells":[{"id":0,"value":"md`# Closest Point Along a Path- MARK III`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md` Click and drag to add points. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"bubbleRadius = 15","pinned":true,"hidden":false,"mode":"ojs"},{"id":1639,"value":"bubbleCount = countTemp - rounding","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1629,"value":"countTemp = check.length/(bubbleRadius * 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1636,"value":"rounding = countTemp % 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1337,"value":"type = \"curveMonotoneX\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"pathCoordinates = [[200, 0], [450,0], [500, 1], [550, 0], [700,0], [900,0]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1788,"value":"console.log(pathCoordinates)","pinned":true,"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().curve(d3[type])(pathCoordinates))\n \n yield path.node()\n}","pinned":false,"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":1465,"value":"yasdf = [x(check[1][0]), x(check[24][0])]","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":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"y = d3.scaleLinear()\n .domain([ 0, 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 = 500","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":"$W32","stdlib":"1","titling":"auto"}