good:
- your argument about stale bar charts!
- use of tooltip interactivity
bad:
- no way to have an overview that compares varieties
- missing axis titles and units for Y
- i couldn't use the zoom feature and i don't see the code responsible for it (assume you decided it's not needed and removed)
- number formatting in tooltip, easy to use something like d.yield.toFixed(1) instead of d.yield
Great job on this! It's a creative visualization that is able to highlight the biggest trend in the data, i.e. Morris being up YoY in barley yields. I like the additional features you added with tooltips and zooming, and your D3 code is well written.
One suggestion - you might want to update your x and y axes (and scales) as you zoom, this way you can keep perspective of where you are on the chart. But that's more advanced and certainly beyond what we covered in this course!
You've completed the assignment, and you can expect to see certificate in your inbox soon.
I've added a legend for variety and sized the circles respective to the year, for some reason, however, when I hover over the circle, they disappear.
How do I go about solving this?
I implemented changes in order to compare varieties, add a title + units on the y-axis, improve the zoom system, and switch to d.yield.toFixed(1)
That being said, I keep encountering a problem where when I hover over a circle, it disappears.
How do i fix this?
great updates!
`.on("mouseout", function(d)` change to `.on("mouseout", function(event, d)`
since d3 version 5 or something there is an extra parameter in event listeners that you don't need, so your "d" moved to the second place. you could observe this if you'd open a debugger and add a console.log(d) or a breakpoint to look at what "d" looks like
additionally i would select the tooltip element by class and remove like so
`svg.selectAll(".tooltip").remove(); //Remove tooltip`
here is how you add a class when creating a tooltip
```
const tooltipGroup = svg.append("g")
.attr("class", "tooltip")
```
// Angie,
Gabe's instructor