30:[] 2e:{"title":"March 16","cells":[{"id":0,"value":"html`

March 16

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"html`

Plotting Mathematical Functions

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"html`\n

To practice working with scale, let's plot a few mathematical functions.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"html`

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"html`\n${viewof b1}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"tex`y = x^{2}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"html`

We'll set up the axes first. Let's take x from -5 to 5. What about the y-axis? Well, the y-values will be the squares of the x-values, so there can be no y less than zero. Also, if x goes between -5 and 5, the largest square we will get is 5*5 = 25. Let's set up the scales.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //scales\n var xScale = d3.scaleLinear().domain([-5,5]).range([0,600])\n var yScale = d3.scaleLinear().domain([0,25]).range([300,0])\n \n \n return svg.node() \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"html`\n${viewof b2}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"html`\n

Now we will set up the axes. We'll adjust the scales so that we have a margin of 30 all around.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //scales\n var xScale = d3.scaleLinear().domain([-5,5]).range([30,570])\n var yScale = d3.scaleLinear().domain([25,0]).range([30,270])\n \n //xAxis\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale)(xAxis)\n \n //yAxis\n var yAxis = svg.append(\"g\").attr(\"transform\",\"translate(300,0)\")\n d3.axisLeft(yScale)(yAxis)\n \n \n return svg.node() \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1412,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"html`\n${viewof b3}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"html`

Now we need a data set to plot. Let's first consider the x-values. We know they go from -5 to 5. But are we going by steps of 1, so that we get -5,-4,-3,-2,etc.? Or do we want steps of .1, so that we get -5,-4.9,-4.8,etc.? I actually like steps of .01, so we get -5,-4.99,-4.98, etc. Here's how we can do that:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"{\n var data = []\n for(var i = -5;i <= 5;i = i + .01){\n data.push(i)\n }\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1041,"value":"html`

Now we simply need to provide the y-value, which is the square of the x-value. We need to name the data set as well.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"data = {\n var data = []\n for(var i = -5;i <= 5;i = i + .01){\n data.push({x:i,y:i*i})\n }\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1050,"value":"html`

Now we can plot the data set with a path. Note my use of xScale and yScale when setting up the pathData. Isn't that a beautiful plot!

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //scales\n var xScale = d3.scaleLinear().domain([-5,5]).range([30,570])\n var yScale = d3.scaleLinear().domain([25,0]).range([30,270])\n \n //xAxis\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale)(xAxis)\n \n //yAxis\n var yAxis = svg.append(\"g\").attr(\"transform\",\"translate(300,0)\")\n d3.axisLeft(yScale)(yAxis)\n \n //path\n var pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(data)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"none\").attr(\"d\",pathData)\n \n return svg.node() \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1415,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"html`

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"html`\n${viewof b4}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"tex`y = sin(x)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"html`

Let's try this one with x going from -10 to 10, again by .01. Here's the data set we would need:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"data2 = {\n var data = []\n for(var i = -10;i <= 10;i = i + .01){\n data.push({x:i,y:sin(i)})\n }\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1072,"value":"html`

In setting up the axes, just note that the sine function cannot be greater than 1 or less than -1. Here is the rest of the code for the plot:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //scales\n var xScale = d3.scaleLinear().domain([-10,10]).range([30,570])\n var yScale = d3.scaleLinear().domain([-1,1]).range([270,30])\n \n //xAxis\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,150)\")\n d3.axisBottom(xScale)(xAxis)\n \n //yAxis\n var yAxis = svg.append(\"g\").attr(\"transform\",\"translate(300,0)\")\n d3.axisLeft(yScale)(yAxis)\n \n //path\n var pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(data2)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"none\").attr(\"d\",pathData)\n \n return svg.node() \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1425,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"html`

Exercise

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1427,"value":"html`\n${viewof b5}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"tex`\\text{Plot }y = 2x+1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"html`

(Try everything first before opening up any code.)

Set up your axes so that x goes from -10 to 10 and y goes from -10 to 10.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //scales\n var xScale = d3.scaleLinear().domain([-10,10]).range([30,570])\n var yScale = d3.scaleLinear().domain([10,-10]).range([30,270])\n \n //xAxis\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,150)\")\n d3.axisBottom(xScale)(xAxis)\n \n //yAxis\n var yAxis = svg.append(\"g\").attr(\"transform\",\"translate(300,0)\")\n d3.axisLeft(yScale)(yAxis)\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"html`

Generate the data set.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"data3 = {\n var data = []\n for(var i = -10;i <= 10;i = i + .01){\n data.push({x:i,y:2*i+1})\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"html`

Plot the data set.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //scales\n var xScale = d3.scaleLinear().domain([-10,10]).range([30,570])\n var yScale = d3.scaleLinear().domain([10,-10]).range([30,270])\n \n //xAxis\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,150)\")\n d3.axisBottom(xScale)(xAxis)\n \n //yAxis\n var yAxis = svg.append(\"g\").attr(\"transform\",\"translate(300,0)\")\n d3.axisLeft(yScale)(yAxis)\n \n //path\n var pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(data3)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"none\").attr(\"d\",pathData)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"html`

We have plotted the equation of a line. The \"2\" in the equation above is called the slope. It is an indication of how steep the line is. Copy and paste data3 from above. Name it data4. Make a slider that goes from -5 to 5, and replace the \"2\" in your for loop with the value of the slider. Move the slider to see how the data changes.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"data4 = {\n var data = []\n for(var i = -10;i <= 10;i = i + .01){\n data.push({x:i,y:slope*i+1})\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"viewof slope = slider({min:-5,max:5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"html`

Now, make the plot to see the effect of changing the slope of a line.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //scales\n var xScale = d3.scaleLinear().domain([-10,10]).range([30,570])\n var yScale = d3.scaleLinear().domain([10,-10]).range([30,270])\n \n //xAxis\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,150)\")\n d3.axisBottom(xScale)(xAxis)\n \n //yAxis\n var yAxis = svg.append(\"g\").attr(\"transform\",\"translate(300,0)\")\n d3.axisLeft(yScale)(yAxis)\n \n //path\n var pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(data4)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"none\").attr(\"d\",pathData)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"sin = stdlib.base.sin","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"t1 = {\n b1\n return !this\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"t2 = {\n b2\n return !this\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1398,"value":"t3 = {\n b3\n return !this\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"t4 = {\n b4\n return !this\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1421,"value":"t5 = {\n b5\n return !this\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"value":"viewof b1 = button({value:\"video on/off\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"viewof b2 = button({value:\"video on/off\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"viewof b3 = button({value:\"video on/off\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1330,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"viewof b4 = button({value:\"video on/off\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1423,"value":"viewof b5 = button({value:\"video on/off\"})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}