Make sure you get your milestone submission in on time! It will be graded on a completion-credit basis.
The dataset on this page comes from an interesting dataset on Kaggle about atmospheric CO2 concentrations. I'm using it for demo purposes and can't speak to the veracity of the data.
Today we're looking at d3 line plots. They also use a data join, but it's a bit trickier to implement. Here is some documentation on d3.shape, the library used for making line charts, and here is the documentation on d3.time. Recall what we learned at the start of class on SVG paths.
We will also learn some other handy shortcuts to make life easier. First, from here on we will employ template strings when making transforms and other string elements. We'll also use destructuring, a technique for extracting variables directly from arrays and dictionaries without extra syntax. It's extremely powerful, but not completely supported across browsers. If in doubt, always check CanIUse.
If you examine old examples of d3 mouseovers, you may see them using d3.mouse(). That changed in version 6. You can read this guide to learn how to translate older v5 examples.
If you're still confused about why we use translate and G tags in layout out charts, Mike Bostock has a handy page discussing chart margins.