2a:Tc46,{ const svgDims = [600,600] 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)) 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 dx = svg.append("line") .attr("x1",xScale(0)) .attr("y1",yScale(intercept)) .attr("x2",xScale(0)) .attr("y2",yScale(intercept)) .attr("stroke","black") .attr("stroke-dasharray",4) .attr("stroke-width",2) const dy = svg.append("line") .attr("x1",xScale(0)) .attr("y1",yScale(intercept)) .attr("x2",xScale(0)) .attr("y2",yScale(intercept)) .attr("stroke","black") .attr("stroke-dasharray",4) .attr("stroke-width",2) const drag1 = d3.drag() .on("drag",function(){ const target = d3.select(this) let x = d3.event.x if(x <= 570 && x >= 30){ target.attr("cx",x).attr("cy",yScale(slope*xScale.invert(x)+intercept)) dx.attr("x1",x) .attr("y1",yScale(slope*xScale.invert(x)+intercept)) .attr("x2",dy.attr("x1")) .attr("y2",yScale(slope*xScale.invert(x)+intercept)) dy.attr("y2",yScale(slope*xScale.invert(x)+intercept)) } }) const drag2 = d3.drag() .on("drag",function(){ const target = d3.select(this) let x = d3.event.x if(x <= 570 && x >= 30){ target.attr("cx",x).attr("cy",yScale(slope*xScale.invert(x)+intercept)) dy.attr("x1",x) .attr("y1",yScale(slope*xScale.invert(x)+intercept)) .attr("x2",x) .attr("y2",dx.attr("y1")) dx.attr("x2",x) } }) const clip = svg.append("clipPath") .attr("id","clip") const box = clip.append("rect") .attr("width",540) .attr("height",540) .attr("x",xScale(-10)) .attr("y",yScale(10)) svg.append("line") .attr("x1",xScale(-10)) .attr("y1",yScale(slope*-10+intercept)) .attr("x2",xScale(10)) .attr("y2",yScale(slope*10+intercept)) .attr("stroke","cornflowerblue") .attr("stroke-width",2) .attr("clip-path","url(#clip)") svg.append("circle") .attr("r",7) .attr("cx",xScale(0)) .attr("cy",yScale(intercept)) .attr("stroke","black") .attr("fill","tomato") .call(drag1) svg.append("circle") .attr("r",7) .attr("cx",xScale(0)) .attr("cy",yScale(intercept)) .attr("stroke","black") .attr("fill","tomato") .call(drag2) yield svg.node() } 2b:[] 29:{"title":"Equation of a Line","cells":[{"id":0,"value":"md`# Equation of a Line`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"viewof b = button({value: \"show/hide equation\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"{\n if(slope == 1){\n var a = \"x\"\n }else if(slope == -1){\n var a = \"-x\"\n }else if(slope == 0){\n var a = \"\"\n }else{\n var a = `${slope}x`\n }\n\n if(intercept == 0 && slope == 0 && show){\n return tex`y = 0`\n }else if(intercept == 0 && show){\n return tex`y = ${a}`\n }else if(intercept > 0 && slope == 0 && show){\n return tex`y = ${intercept}`\n }else if(intercept > 0 && show){\n return tex`y = ${a} + ${intercept}`\n }else if(intercept < 0 && show){\n return tex`y = ${a} - ${-1*intercept}`\n }else{\n return tex``\n }\n\n}\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"viewof intercept = slider({min:-10,max:10,step:1,display:v => \"\",description:\"set intercept\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"viewof slope = slider({min:-3,max:3,step:.5,display:v => \"\",description:\"set slope\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"show = {\n b\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

Libraries

`","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":"$W2b","stdlib":"1","titling":"auto"}