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

March 18

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

Time Series/Line Charts

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

Let's first bring in our first real data set:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1493,"value":"data = d3.csv(`https://gist.githubusercontent.com/bendazz/c36e23b3400ba346107eefdcb9e48b0f/raw/1e69dab04fd605be0fcadc1953f3c5dfa1e3091c/Teams.csv`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"html`

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

Example 1

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

For our first example, we'll put years along the x-axis and plot homerun totals along the y-axis. Before we can do that, we have to set up the axes. Let's concentrate on the x-axis. We need to know the minimum year and the maximum year present in the data set. You can use a special d3 function for this:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"d3.min(data,d => d.yearID)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1504,"value":"d3.max(data,d => d.yearID)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1506,"value":"html`We can now use this information to set up the x-axis.`","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([1860,2020]).range([30,570])\n\n \n //xAxis\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale)(xAxis)\n \n\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"html`

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

Example 2

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

I don't like the commas we have there in the years. We can do the following to eliminate them:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1520,"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\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\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1662,"value":"html`

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

Example 3

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

Let's put the y-axis together now. We're trying to fit the number of homeruns teams have hit on the y-axis. It can't be smaller than zero, so we can start with that. But we need to find out the most homeruns ever hit by a team. Again, we can use the d3.max function:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1528,"value":"d3.max(data,d => d.HR)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1533,"value":"html`

Now, any baseball fan knows that this is wrong. Homerun totals for teams frequently pass the 200 mark. What's wrong? The problem is that, in the data set, the homeruns were read in as strings, not integers. Hence, we're getting the wrong answer. We can fix this by making sure we are taking the maximum of integers:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"d3.max(data,d => parseInt(d.HR))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1539,"value":"html`

That's more like it. Honestly, we should have done this in the example above, too, with the years. We were just lucky there.

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

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

Example 4

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

Now we can put the y-axis in.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"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(30,0)\")\n d3.axisLeft(yScale)(yAxis)\n \n\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1666,"value":"html`

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

Example 5

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

Suppose we wanted to move the y-axis over to 1900. It's a little tricky, but we can do it like this:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1563,"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\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1568,"value":"html`

I will explain this more in the video.

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

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

Example 6

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

Let's finally get a plot going. We'll put years along the x-axis and homerun totals along the y-axis.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"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)\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":1580,"value":"html`

Looks cool! But it looks a bit strange, too. The reason is that we are plotting the homerun totals for EVERY team for each year. It would be much better to filter our data so that we are looking at just one team.

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

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

Example 7

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

Here is how we can filter our data set so that we are left with only record from the New York Yankees:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"data.filter(d => d.name == \"New York Yankees\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1595,"value":"html`

Try this with other team names.

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

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

Example 8

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

We'll now apply this to the plot:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"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":1674,"value":"html`

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

Exercise

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

See if you can figure out how to plot the homerun totals for TWO teams together: New York Yankees and Boston Red Sox.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1619,"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 yankees = 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\",yankees)\n \n var redSox = d3.line().x(d => xScale(d.yearID)).y(d => yScale(d.HR))(data.filter(d => d.name == \"Boston Red Sox\"))\n svg.append(\"path\").attr(\"stroke\",\"tomato\").attr(\"fill\",\"none\").attr(\"d\",redSox)\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"}