30:T5cc,{ 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([-2,2]).range([30,570]) const xAxis = svg.append("g").attr("transform","translate(0,300)").call(d3.axisBottom(xScale).ticks(5)) const yScale = d3.scaleLinear().domain([-4,4]).range([570,30]) const yAxis = svg.append("g").attr("transform","translate(300,0)").call(d3.axisLeft(yScale).ticks(5)) const clip = svg.append("clipPath") .attr("id","clip") const box = clip.append("rect") .attr("width",540) .attr("height",540) .attr("x",xScale(-2)) .attr("y",yScale(4)) if(s < 1){ var input = dataFilt var power = 1/p }else{ var input = data var power = p } const pathData = d3.line().x(d => xScale(d)).y(d => yScale(Math.pow(d,power)))(input) const line1 = svg.append("path") .attr("d",pathData) .attr("stroke","cornflowerblue") .attr("fill","none") .attr("stroke-width",2) .attr("clip-path","url(#clip)") const line2 = svg.append("line") .attr("x1",xScale(-2)) .attr("y1",yScale(-2)) .attr("x2",xScale(2)) .attr("y2",yScale(2)) .attr("stroke-width",2) .attr("stroke","tomato") .attr("stroke-dasharray",4) .attr("opacity",() => { if(b == "y"){ return 1 }else{ return 0 } }) yield svg.node() } 31:[] 2e:{"title":"Powers of x","cells":[{"id":0,"value":"md`# Powers of x`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"html`Use the slider below to adjust the powers. You can check the box below to constantly show y = x`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"{\n if(s < 1){\n return tex`\\Large y = x^{\\frac{1}{${p}}}`\n }else{\n return tex`\\Large y = x^{${p}}`\n }\n\n}\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"viewof s = slider({min:-3,max:5,step:1,description:\"set power in equation\",display:v=>``})","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"viewof b = checkbox({options:[{value:\"y\",label:\"show y = x\"}]})","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 = -10; i <= 10; i = i + .01){\n data.push(i)\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"dataFilt = [0,...data.filter(d => d > 0)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"p = {\n if(s < 1){\n return -s + 2\n }else{\n return s\n }\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":"$W31","stdlib":"1","titling":"auto"}