30:Tb49,{ 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([-50,50]).range([30,570]) const xAxis = svg.append("g").attr("transform","translate(0,300)").call(d3.axisBottom(xScale).ticks(5)) const yScale = d3.scaleLinear().domain([-1,1]).range([570,30]) const yAxis = svg.append("g").attr("transform","translate(300,0)").call(d3.axisLeft(yScale).ticks(5)) const pathData = d3.line().x(d => xScale(d)).y(d => yScale(1/d))(data) const pathData2 = d3.line().x(d => xScale(d)).y(d => yScale(1/d))(data2) svg.append("path") .attr("d",pathData) .attr("stroke","black") .attr("fill","none") .attr("stroke-width",2) svg.append("path") .attr("d",pathData2) .attr("stroke","black") .attr("fill","none") .attr("stroke-width",2) const text = svg.append("text") .text("y") .attr("x",xScale(-5)) .attr("y",yScale(1)+5) .attr("text-anchor","middle") .attr("font-style","italic") .attr("fill","cornflowerblue") const text2 = svg.append("text") .text("x") .attr("x",xScale(1)) .attr("y",yScale(-.11)) .attr("text-anchor","middle") .attr("font-style","italic") .attr("fill","tomato") const line = svg.append("line") .attr("x1",xScale(1)) .attr("y1",yScale(0)) .attr("x2",xScale(1)) .attr("y2",yScale(1)) .attr("stroke","black") .attr("stroke-dasharray",4) const line2 = svg.append("line") .attr("x1",xScale(0)) .attr("y1",yScale(1)) .attr("x2",xScale(1)) .attr("y2",yScale(1)) .attr("stroke","black") .attr("stroke-dasharray",4) const circle = svg.append("circle") .attr("r",5) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx",xScale(0)) .attr("cy",yScale(1)) const circle2 = svg.append("circle") .attr("r",5) .attr("stroke","black") .attr("fill","lime") .attr("cx",xScale(1)) .attr("cy",yScale(1)) const drag = d3.drag() .on("drag",function(){ const target = d3.select(this) let x = xScale.invert(d3.event.x) if(x <= 50 && x >= -50){ let y = 1/x target.attr("cx",xScale(x)) text2.attr("x",xScale(x)).attr("y",yScale(Math.sign(x)*(-.11))) text.attr("y",yScale(y)+ 5).attr("x",xScale(Math.sign(x)*(-5))) circle.attr("cy",yScale(y)) circle2.attr("cx",xScale(x)).attr("cy",yScale(y)) line.attr("x1",xScale(x)).attr("x2",xScale(x)).attr("y2",yScale(y)) line2.attr("y1",yScale(y)).attr("y2",yScale(y)).attr("x2",xScale(x)) } }) svg.append("circle") .attr("r",5) .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale(1)) .attr("cy",yScale(0)) .call(drag) yield svg.node() } 31:T404,v2 = { b const svgDims = [600,100] 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([-.005,.01]).range([30,570]) const xAxis = svg.append("g").attr("transform","translate(0,50)").call(d3.axisBottom(xScale).ticks(5)) const text = svg.append("text") .text("x") .attr("x",xScale(.01)) .attr("y",90) .attr("text-anchor","middle") .attr("font-style","italic") const drag = d3.drag() .on("drag",function(){ const target = d3.select(this) let x = d3.format(".4f")(xScale.invert(d3.event.x)) if(x <= .01 && x >= .0001){ target.attr("cx",xScale(x)) text.attr("x",xScale(x)) mutable denom = d3.format(".4f")(x) } }) svg.append("circle") .attr("r",7) .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale(.01)) .attr("cy",50) .call(drag) yield {display:svg.node()} } 32:T408,v3 = { b const svgDims = [600,100] 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([-.01,.005]).range([30,570]) const xAxis = svg.append("g").attr("transform","translate(0,50)").call(d3.axisBottom(xScale).ticks(5)) const text = svg.append("text") .text("x") .attr("x",xScale(-.01)) .attr("y",90) .attr("text-anchor","middle") .attr("font-style","italic") const drag = d3.drag() .on("drag",function(){ const target = d3.select(this) let x = d3.format(".4f")(xScale.invert(d3.event.x)) if(x <= -.0001 && x >= -.01){ target.attr("cx",xScale(x)) text.attr("x",xScale(x)) mutable denom = d3.format(".4f")(x) } }) svg.append("circle") .attr("r",7) .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale(-.01)) .attr("cy",50) .call(drag) yield {display:svg.node()} } 33:[] 2e:{"title":"1/x","cells":[{"id":0,"value":"md`# 1/x`","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"tex`\\text{First choose whether you want to approach } 0 \\text{ or } \\infin, \\text{and from which direction.}\\\\ \\text{You can then drag the point to see what happens to } \\frac{1}{x}.\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"{\n if(b == 1){\n return tex`y = \\dfrac{1}{x} = \\dfrac{1}{${denom}} = ${d3.format(\".4f\")(1/denom)}`\n }else if(b == 2){\n return tex`y = \\dfrac{1}{x} = \\dfrac{1}{${denom}} = ${d3.format(\".0f\")(1/denom)}`\n }\n else if(b == 3){\n return tex`y = \\dfrac{1}{x} = \\dfrac{1}{${denom}} = ${d3.format(\".0f\")(1/denom)}`\n }else{\n return tex`y = \\dfrac{1}{x} = \\dfrac{1}{${denom}} = ${d3.format(\".4f\")(1/denom)}`\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"{\n if(b == 1){\n return v1.display\n }else if(b == 2){\n return v2.display\n }else if(b == 3){\n return v3.display\n }else{\n return v4.display\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"viewof b = radio({options:[\n {label:tex`\\text{approach}+\\infin`,value:1},\n {label:tex`\\text{approach} \\hspace3pt 0 \\hspace3pt \\text{from the right}`,value:2},\n {label:tex`\\text{approach} \\hspace3pt 0 \\hspace3pt \\text{from the left}`,value:3},\n {label:tex`\\text{approach}-\\infin`,value:4}\n],value:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"tex`\\text{Drag the red point } (x) \\text{ to see what happens to } y.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"data = {\n const data = []\n for(var i = .01; i <= 60; i = i + .01){\n data.push(i)\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"data2 = {\n const data = []\n for(var i = -60; i <= -.01; i = i + .01){\n data.push(i)\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"mutable denom = {\n if(b == 1){\n return 1\n }else if(b == 2){\n return .01\n }else if(b == 3){\n return -.01\n }else{\n return -1\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"v1 = {\n b\n const svgDims = [600,100]\n const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid white\")\n \n //scales and axes\n const xScale = d3.scaleLinear().domain([-10,100]).range([30,570])\n const xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,50)\").call(d3.axisBottom(xScale).ticks(5))\n \n \n const text = svg.append(\"text\")\n .text(\"x\")\n .attr(\"x\",xScale(1))\n .attr(\"y\",90)\n .attr(\"text-anchor\",\"middle\")\n .attr(\"font-style\",\"italic\")\n\n const drag = d3.drag()\n .on(\"drag\",function(){\n const target = d3.select(this)\n let x = d3.format(\".0f\")(xScale.invert(d3.event.x))\n if(x <= 100 && x >= 1){\n target.attr(\"cx\",xScale(x))\n text.attr(\"x\",xScale(x))\n mutable denom = x\n }\n\n })\n svg.append(\"circle\")\n .attr(\"r\",7)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"tomato\")\n .attr(\"cx\",xScale(1))\n .attr(\"cy\",50)\n .call(drag)\n \n \n\n\n\n yield {display:svg.node()}\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"v4 = {\n b\n const svgDims = [600,100]\n const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid white\")\n \n //scales and axes\n const xScale = d3.scaleLinear().domain([-100,10]).range([30,570])\n const xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,50)\").call(d3.axisBottom(xScale).ticks(5))\n \n \n const text = svg.append(\"text\")\n .text(\"x\")\n .attr(\"x\",xScale(-1))\n .attr(\"y\",90)\n .attr(\"text-anchor\",\"middle\")\n .attr(\"font-style\",\"italic\")\n\n const drag = d3.drag()\n .on(\"drag\",function(){\n const target = d3.select(this)\n let x = d3.format(\".0f\")(xScale.invert(d3.event.x))\n if(x <= -1 && x >= -100){\n target.attr(\"cx\",xScale(x))\n text.attr(\"x\",xScale(x))\n mutable denom = x\n }\n\n })\n svg.append(\"circle\")\n .attr(\"r\",7)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"tomato\")\n .attr(\"cx\",xScale(-1))\n .attr(\"cy\",50)\n .call(drag)\n \n \n\n\n\n yield {display:svg.node()}\n}\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":"$W33","stdlib":"1","titling":"auto"}