Hi all, I am new to Observable and am trying to allow the user to change what range of years they are looking at. Unfortunately it is only giving me the 2 years that are in the array. I am sure I am doing something silly. Also the Y Axis is not changing values automatically like I have seen some of the sample charts do. Thanks!
This channel is a safe space for new users to ask questions, to get feedback, and to share blockers or insights. All questions welcome!
Since you are using vertical bars (with Plot.barY), the domain is ordinal, not continuous, so you need to enumerate all the years included in the range.
A way to do it is to use d3.utcYears; note that the range that this function returns does not include the stop value, so you have to add it manually:
domain: [...d3.utcYears(...SelectUTC), SelectUTC[1]]
(This has an added benefit of showing any year in the range for which there might be no data. Not an issue in your case, since all years have data.)
An alternative would be to filter the dataset before plotting:
Plot.barY(esports.filter(d => SelectUTC[0] <= d.year && d.year <= SelectUTC[1]), …
You could also use a “utc” scale on x, and a rectY mark.
Thanks a lot for your help! Your second solution achieves just what I was imagining!