30:T1b91,{ const svgDims = [600,700] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") //scales and axes const xScale = d3.scaleLinear().domain([-10,10]).range([30,570]) const xAxis = svg.append("g").attr("transform","translate(0,300)").call(d3.axisBottom(xScale).ticks(20)) const yScale = d3.scaleLinear().domain([-10,10]).range([570,30]) const yAxis = svg.append("g").attr("transform","translate(300,0)").call(d3.axisLeft(yScale).ticks(20)) let pointX1 = 2 let pointY1 = 4 let pointX2 = 7 let pointY2 = 4 let slope = 0 const answer = svg.append("text") .text(`slope = ${slope}`) .attr("x",450) .attr("y",640) .attr("opacity",0) for(let i = -10; i <= 10; i++){ svg.append("line") .attr("x1",xScale(i)) .attr("y1",yScale(-10)) .attr("x2",xScale(i)) .attr("y2",yScale(10)) .attr("stroke","lightgrey") svg.append("line") .attr("x1",xScale(-10)) .attr("y1",yScale(i)) .attr("x2",xScale(10)) .attr("y2",yScale(i)) .attr("stroke","lightgrey") } const dashX = svg.append("line") .attr("x1",xScale(2)) .attr("y1",yScale(4)) .attr("x2",xScale(7)) .attr("y2",yScale(4)) .attr("stroke","black") .attr("stroke-width",2) .attr("stroke-dasharray",4) const dashY = svg.append("line") .attr("x1",xScale(7)) .attr("y1",yScale(4)) .attr("x2",xScale(7)) .attr("y2",yScale(4)) .attr("stroke","black") .attr("stroke-width",2) .attr("stroke-dasharray",4) const dx = svg.append("text") .text(pointX2 - pointX1) .attr("x",(xScale(pointX1)+xScale(pointX2))/2) .attr("y",yScale(pointY1)+30) .attr("text-anchor","middle") .attr("opacity",0) const dy = svg.append("text") .text(pointY2 - pointY1) .attr("x",xScale(pointX2)+20) .attr("y",(yScale(pointY1)+yScale(pointY2))/2 + 5) .attr("text-anchor","middle") .attr("opacity",0) const segment = svg.append("line") .attr("x1",xScale(2)) .attr("y1",yScale(4)) .attr("x2",xScale(7)) .attr("y2",yScale(4)) .attr("stroke","cornflowerblue") .attr("stroke-width",3) const box = svg.append("rect") .attr("width",20) .attr("height",20) .attr("x",550) .attr("y",650) .on("click",function(){ if(answer.attr("opacity") == 0){ answer.attr("opacity",1) dx.attr("opacity",1) dy.attr("opacity",1) }else{ answer.attr("opacity",0) dx.attr("opacity",0) dy.attr("opacity",0) } }) //drag behavior const drag1 = d3.drag() .on("start",function(){ segment.attr("stroke","black") }) .on("drag",function(){ let x = d3.event.x let y = d3.event.y if(x >= 30 && x <= 570){ pointX1 = parseInt(d3.format(".0f")(xScale.invert(d3.event.x))) } if(y >= 30 && y <= 570){ pointY1 = parseInt(d3.format(".0f")(yScale.invert(d3.event.y))) } const target = d3.select(this) target.attr("cx",xScale(pointX1)).attr("cy",yScale(pointY1)) segment.attr("x1",xScale(pointX1)).attr("y1",yScale(pointY1)) dashX.attr("x1",xScale(pointX1)).attr("y1",yScale(pointY1)).attr("x2",xScale(pointX2)).attr("y2",yScale(pointY1)) dashY.attr("x1",xScale(pointX2)).attr("y1",yScale(pointY2)).attr("x2",xScale(pointX2)).attr("y2",yScale(pointY1)) if(pointX1 == pointX2){slope = "undefined"} else{slope = d3.format(".2f")((pointY1 - pointY2)/(pointX1 - pointX2))} dx.attr("x",(xScale(pointX1)+xScale(pointX2))/2) .text(pointX2 - pointX1) .attr("y",()=>{ console.log(typeof pointY1,pointY1,pointY2,pointY1 <= pointY2) if(pointY1 <= pointY2){ return yScale(pointY1) + 30 } else{ return yScale(pointY1) - 18 } }) dy.attr("y",(yScale(pointY2)+yScale(pointY1))/2 + 5) .text(pointY2 - pointY1) .attr("x",()=>{ if(pointX1 <= pointX2){ return xScale(pointX2) + 20 } else{ return xScale(pointX2) - 20 } }) .attr("text-anchor","middle") answer.text(`slope = ${slope}`) }) .on("end",function(){ if(pointX1 == pointX2){ segment.attr("stroke","gold") } else if(slope == 0){ segment.attr("stroke","cornflowerblue") }else if(slope < 0){ segment.attr("stroke","tomato") }else{ segment.attr("stroke","lime") } }) const drag2 = d3.drag() .on("start",function(){ segment.attr("stroke","black") }) .on("drag",function(){ let x = d3.event.x let y = d3.event.y if(x >= 30 && x <= 570){ pointX2 = parseInt(d3.format(".0f")(xScale.invert(d3.event.x))) } if(y >= 30 && y <= 570){ pointY2 = parseInt(d3.format(".0f")(yScale.invert(d3.event.y))) } const target = d3.select(this) target.attr("cx",xScale(pointX2)).attr("cy",yScale(pointY2)) segment.attr("x2",xScale(pointX2)).attr("y2",yScale(pointY2)) dashX.attr("x1",xScale(pointX1)).attr("y1",yScale(pointY1)).attr("x2",xScale(pointX2)).attr("y2",yScale(pointY1)) dashY.attr("x1",xScale(pointX2)).attr("y1",yScale(pointY2)).attr("x2",xScale(pointX2)).attr("y2",yScale(pointY1)) if(pointX1 == pointX2){slope = "undefined"} else{slope = d3.format(".2f")((pointY1 - pointY2)/(pointX1 - pointX2))} dx.attr("x",(xScale(pointX1)+xScale(pointX2))/2) .text(pointX2 - pointX1) .attr("y",()=>{ console.log(pointY1,pointY2,pointY1 <= pointY2) if(pointY1 <= pointY2){ return yScale(pointY1) + 30 } else{ return yScale(pointY1) - 18 } }) dy.attr("y",(yScale(pointY2)+yScale(pointY1))/2 + 5) .text(pointY2 - pointY1) .attr("x",()=>{ if(pointX1 <= pointX2){ return xScale(pointX2) + 20 } else{ return xScale(pointX2) - 20 } }) .attr("text-anchor","middle") answer.text(`slope = ${slope}`) }) .on("end",function(){ if(pointX1 == pointX2){ segment.attr("stroke","gold") } else if(slope == 0){ segment.attr("stroke","cornflowerblue") }else if(slope < 0){ segment.attr("stroke","tomato") }else{ segment.attr("stroke","lime") } }) //points const circle1 = svg.append("circle") .attr("r",7) .attr("cx",xScale(2)) .attr("cy",yScale(4)) .attr("fill","black") .attr("stroke","black") .call(drag1) const circle2 = svg.append("circle") .attr("r",7) .attr("cx",xScale(7)) .attr("cy",yScale(4)) .attr("fill","black") .attr("stroke","black") .call(drag2) yield svg.node() } 31:[] 2e:{"title":"Slope of a Segment","cells":[{"id":0,"value":"md`# Slope of a Segment`","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"html`Drag the circles. Calculate the slope. Click the box in the corner to toggle the answer. The segment shows green if the slope is positive, red if negative, blue if zero, and gold if undefined.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}