2c:null 2d:["$","title",null,{"children":"Equation of a Line | Charles Redmond | Observable"}] 32: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() } 33:[] 30:{"id":"09c26fc045de784e","slug":"equation-of-a-line/2","title":"Equation of a Line","thumbnail":"fccf60aa72b5f044247d0815131f1a814c9547579671844322dd622f6824e3e0","access_level":"public","create_time":"$D2020-05-16T05:29:04.896Z","update_time":"$D2020-11-04T16:21:27.760Z","view_time":null,"first_public_time":"$D2020-05-16T07:27:15.533Z","has_unpublished_edits":null,"fork":{"id":"e8f176e47fa8241e","slug":"slope-of-a-segment","title":"Slope of a Segment","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"stars":4,"starred":false,"owner":{"type":"team","id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":"starter_2024"},"version":408,"publish_version":408,"role":null,"authored":false,"authors":[{"type":"individual","id":"37a987477e8b6db3","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":null}],"members":[{"type":"individual","id":"37a987477e8b6db3","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":{"id":"d3efbe39d1eb29fb","slug":"functions","title":"Functions","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"type":"notebook","body":{"title":"Equation of a Line","cells":[{"id":0,"value":"md`# Equation of a Line`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"viewof b = button({value: \"show/hide equation\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"viewof intercept = slider({min:-10,max:10,step:1,display:v => \"\",description:\"set intercept\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"viewof slope = slider({min:-3,max:3,step:.5,display:v => \"\",description:\"set slope\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"html`

Variables and Code

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

Libraries

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"