31:T554,{ const svgDims = [900,500] 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,7]).range([30,870]) const yScale = d3.scaleLinear().domain([-10,10]).range([470,30]) const xAxis = svg.append("g").attr("transform","translate(0,250)").call(d3.axisBottom(xScale)) const yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`).call(d3.axisLeft(yScale).ticks(10)) const pathData = d3.line().x(d => xScale(d)).y(d => yScale(A*sin(B*(d-C))))(data) const periodData = d3.line().x(d => xScale(d)).y(d => yScale(A*sin(B*(d-C))))(data.filter(d => d >= C && d<=p + C)) const intervalData = d3.line().x(d => xScale(d)).y(d => yScale(A*sin(B*(d-C))))(data.filter(d => d >= C && d<=1 + C)) svg.append("path") .attr("d",pathData) .attr("stroke","black") .attr("fill","none") svg.append("path") .attr("d",intervalData) .attr("stroke",colors[1]) .attr("fill","none") .attr("stroke-width",3) const pdPath = svg.append("path") .attr("d",periodData) .attr("stroke","cornflowerblue") .attr("fill","none") .attr("stroke-width",3) .attr("opacity",() => { if(toggle){ return 1 } else{return -1} }) yield svg.node() } 32:[] 2f:{"title":"Amplitude, Frequency, and Phase Shift","cells":[{"id":0,"value":"md`# Amplitude, Frequency, and Phase Shift`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1487,"value":"tex`y = \\color{tomato}A\\color{black}\\sin(\\color{cornflowerblue}B\\color{black}(x\\color{black}-\\color{${colors[4]}}C\\color{black}))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"tex`\\color{tomato}\\text{Amplitude} = A = ${A}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1358,"value":"tex`\\color{${colors[4]}}\\text{Phase Shift} = C = ${d3.format(\".2f\")(C)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"tex`\\color{cornflowerblue}\\text{Period} = 2\\pi/B = ${d3.format(\".2f\")(2*Math.PI/B)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"tex`\\color{${colors[1]}}\\text{Frequency} = 1/\\text{Period} = ${d3.format(\".2f\")(B/(2*Math.PI))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1455,"value":"{\n if(A == 0){var p1 = 0}\n else if(A == 1){var p1 = ``}\n else{var p1 = A}\n \n if(C == 0){var p2 = `x`}\n else if(C < 0){var p2 = `x + ${-C}`}\n else{var p2 = `x - ${C}`}\n \n if(B == 0 || A == 0){return tex`y = 0`}\n else if(B == 1){return tex`y = ${p1}\\sin(${p2})`}\n else if(C == 0){return tex`y = ${p1}\\sin(${B}${p2})`}\n else{return tex`y = ${p1}\\sin(${B}(${p2}))`}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"viewof A = slider({max:10,step:1,value:1,description:\"set A\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"viewof B = slider({max:50,value:1,step:1,description:\"set B\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"viewof C = slider({min:-2,max:7,value:0,step:1,description:\"set C\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"viewof b = button({value:\"show/hide period\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"data = {\n const data = []\n for(let i = -30;i <=30;i=i+.01){\n data.push(i)\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"colors = [\"#4e79a7\",\"#f28e2c\",\"#e15759\",\"#76b7b2\",\"#59a14f\",\"#edc949\",\"#af7aa1\",\"#ff9da7\",\"#9c755f\",\"#bab0ab\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"p = 2*Math.PI/B","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"toggle = {\n b\n return !this\n\n}","pinned":true,"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"},{"id":801,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"sin = stdlib.base.sin","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"cos = stdlib.base.cos","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"math = require('mathjs@6.2.1/dist/math.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}