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

March 23

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

More with Time Series/Line Charts

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

I've brought in both the data set from last time and also the plot of the New York Yankees season homerun totals. It will help us begin.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1757,"value":"data = d3.csv(`https://gist.githubusercontent.com/bendazz/c36e23b3400ba346107eefdcb9e48b0f/raw/1e69dab04fd605be0fcadc1953f3c5dfa1e3091c/Teams.csv`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1759,"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([1860,2020]).range([30,570])\n var yScale = d3.scaleLinear().domain([300,0]).range([30,270])\n \n //xAxis\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(1900)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //path\n var pathData = d3.line().x(d => xScale(d.yearID)).y(d => yScale(d.HR))(data.filter(d => d.name == \"New York Yankees\"))\n svg.append(\"path\").attr(\"stroke\",\"cornflowerblue\").attr(\"fill\",\"none\").attr(\"d\",pathData)\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1947,"value":"html`

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

Example 1

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

What we have above is fine, but sometimes I like to smooth out a line chart. I think it looks nicer. There are many different ways you can change how a path is drawn through a set of points, and you can find them all here: https://github.com/d3/d3-shape#curves. But I prefer the MonotoneX curve, so I will stick with that. This is what you do:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1770,"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([1860,2020]).range([30,570])\n var yScale = d3.scaleLinear().domain([300,0]).range([30,270])\n \n //xAxis\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(1900)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //path\n var pathData = d3.line().x(d => xScale(d.yearID)).y(d => yScale(d.HR)).curve(d3.curveMonotoneX)(data.filter(d => d.name == \"New York Yankees\"))\n svg.append(\"path\").attr(\"stroke\",\"cornflowerblue\").attr(\"fill\",\"none\").attr(\"d\",pathData)\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1774,"value":"html`

If you look closely, you can see that it smoothed the path out a bit. This will look a lot nicer when we look at area plots, which we will do now.

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

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

Example 2

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

It might be a good idea to go back to mathematical functions for a bit, so that we can understand area plots. Then we can go back to the Yankees example. To start, as an exercise, make a set of axes that goes from -5 to 5 on the x-axis and 0 to 25 on the y-axis

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1782,"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).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(300,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1953,"value":"html`

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

Example 3

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

Now generate a set of x-values. Go from -5 to 5, by .01. We can't name the set \"data\", since we've used that above. Call it \"points\" instead.

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

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

Example 4

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

Let's now plot a parabola, which is y = x². I will do it in a slightly different way from the way we did it before, which I think is easier.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1805,"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).tickFormat(d3.format(\".0f\"))(xAxis)\n \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)).y(d => yScale(d*d))(points)\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":1957,"value":"html`

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

Example 5

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

Can you follow the method above to add another parabola to the plot, one that is just shifted up 6 units? The equation would be y = x²+6.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1816,"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).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(300,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //path\n var parabola1 = d3.line().x(d => xScale(d)).y(d => yScale(d*d))(points)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"none\").attr(\"d\",parabola1)\n \n var parabola2 = d3.line().x(d => xScale(d)).y(d => yScale(d*d + 6))(points)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"none\").attr(\"d\",parabola2)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1819,"value":"html`

Excellent!

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

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

Example 6

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

We will now fill in the area between these two curves. Instead of drawing TWO paths, we just have to draw ONE area. The top curve will by y1, and the bottom curve will be y0:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1827,"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).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(300,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //area\n var area = d3.area().x(d => xScale(d)).y0(d => yScale(d*d)).y1(d => yScale(d*d + 6))(points)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",area)\n \n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1830,"value":"html`

Excellent again!

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

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

Example 7

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

As an exercise, can you plot the area between y = x² and y = 2x+10?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1846,"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).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(300,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //area\n var area = d3.area().x(d => xScale(d)).y0(d => yScale(d*d)).y1(d => yScale(2*d + 10))(points)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",area)\n \n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1962,"value":"html`

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

Example 8

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

How about between y = x² and y = 14?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"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).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(300,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //area\n var area = d3.area().x(d => xScale(d)).y0(d => yScale(d*d)).y1(d => yScale(14))(points)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",area)\n \n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1964,"value":"html`

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

Example 9

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

How about between y = x² and y = 0?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1874,"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).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(300,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //area\n var area = d3.area().x(d => xScale(d)).y0(d => yScale(d*d)).y1(d => yScale(0))(points)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",area)\n \n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"html`

Very good!

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

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

Example 10

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

Finally, can you fill in the area beneath the Yankee homerun path above?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1886,"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([1860,2020]).range([30,570])\n var yScale = d3.scaleLinear().domain([300,0]).range([30,270])\n \n //xAxis\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(1900)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //area\n var area = d3.area().x(d => xScale(d.yearID)).y0(d => yScale(d.HR)).y1(d => yScale(0))(data.filter(d => d.name == \"New York Yankees\"))\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",area)\n \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":1330,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}