Hello! This is one of those things I feel like I just know how to do in standard D3, but I’ve taken a few swings at it with Plot and am struggling to sort it out — it appears that Plot by default will attempt to label every single bar on the x-axis, and ideally there should be a way to guide to toward only labeling every X bars, or use some other logic. (every first of the month, etc.)
You can see an example of this happening in the last bar chart in this notebook.
Hi @rdmurphy. The problem is that you’ve got the wrong type of x-scale: you want a temporal scale, but since you’re using a Plot.barY mark, you’re getting an ordinal scale.
One way to fix the problem is to use Plot.areaY instead:
Plot.areaY(countyCases, { x: "date", y: "new_confirmed_cases" }).plot()
If you want it to look bar-like, you can use the step curve:
Plot.areaY(countyCases, { x: "date", y: "new_confirmed_cases", curve: "step" }).plot()
Alternatively, you could use Plot.rectY in conjunction with Plot.binX to compute the sum of new confirmed cases over a given time interval. If you want daily bars, that would be something like this:
Plot.rectY(countyCases, Plot.binX({ y: "sum" }, { x: "date", y: "new_confirmed_cases", thresholds: d3.utcDay, inset: 0 })).plot()
Hope this helps.
Mike’s solution is easier, and automatically gets you D3’s nice multi-scale formatting. But if you’re stuck with an ordinal scale, you also can explicitly pass the ticks you want, like every X bars or the first of every month or whatever. Examples in this notebook:
Thank you both! The use of a temporal scale was what I overlooked when I was comparing to my usual d3 approaches. This set me on the right path. (And thank you @tophtucker for showing me how to take more control if/when it’s needed. Really connected some dots!)