30:T89e,{ const svgDims = [600,630] 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(10)) 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(10)) let count = 0 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)) const text = svg.append("text") .text(`x = 0`) .attr("x",450) .attr("y",620) const text2 = svg.append("text") .text(`y = ?`) .attr("x",150) .attr("y",620) 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)") const circle = svg.append("circle") .attr("r",5) .attr("cx",xScale(0)) .attr("cy",yScale(0)) .attr("stroke","black") .attr("fill","tomato") .on("click",async function(){ if(count==0){ const target = d3.select(this) const x = target.attr("cx") await target.transition().duration(1000).ease(d3.easeBounceOut).attr("cy",yScale(slope*xScale.invert(x)+intercept)).end() await target.transition().duration(1000).ease(d3.easeBounceOut).attr("cx",xScale(0)).end() text2.text(`y = ${d3.format(".2f")(slope*xScale.invert(x)+intercept)}`) count++ } }) const change = svg.append("rect") .attr("width",15) .attr("height",15) .attr("x",515) .attr("y",607) change.on("click",function(){ let r = parseFloat(d3.format(".2f")(rScale(Math.random()))) text.text(`x = ${r}`) text2.text(`y = ?`) circle.attr("cx",xScale(r)).attr("cy",yScale(0)) count = 0 }) yield svg.node() } 31:[] 2e:{"title":"Here's x, what's y?","cells":[{"id":0,"value":"md`# Here's x, what's y?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"html`You can adjust the sliders below to set the intercept and slope of the line. Clicking the little black box will generate a random x for you. Use the equation of the line to determine y. Finally, click on the red marker to see it travel to the correct y. After it settles in, the numerical answer will be displayed below the plot. `","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){\n return tex`y = 0`\n }else if(intercept == 0){\n return tex`y = ${a}`\n }else if(intercept > 0 && slope == 0){\n return tex`y = ${intercept}`\n }else if(intercept > 0){\n return tex`y = ${a} + ${intercept}`\n }else if(intercept < 0){\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":"$30","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:-5,max: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":465,"value":"x1 = (10-intercept)/slope","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"x2 = (-10-intercept)/slope","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"a = [-10,10,x1,x2].sort((a,b)=>a-b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"rScale = d3.scaleLinear().domain([0,1]).range([a[1],a[2]])","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":"$W31","stdlib":"1","titling":"auto"}