Time-series histogram

Question

Is it possible to create a time-series histogram like the one described in this presentation (slides 36-39) using either R or D3.js? Or is there a better way to show bucketed data as a time series?

Edit: Here is some pre-bucketed sample data. Ideally, D3 or R would do the bucketing by itself. And yes, if it wasn't clear, I understand that I could write this myself. I'm just wondering if there's already a package that does this and I just haven't come across it yet. Thanks!

Answer 1

Here's a version in D3, modeled after @bdemarest's answer using ggplot2:

This version uses tiled rect elements. If you have a large dataset, you might get better performance from a pixel-based heatmap.

If you want to compute the buckets using D3, you can use d3.nest to group the data by day and by value. There's also d3.layout.histogram, but since you presumably want uniformly-spaced bins and the same bins for every day, d3.nest should be sufficient.

One subtle consideration: I placed the tick marks on the scale in-between tiles so as to indicate visually how the values are binned. For example, the bottom-left bucket corresponds to all values between 800 and 900 on July 20 (where July 20 is the midnight-to-midnight interval); at least, that’s what I assumed from looking at your data. This is slightly clearer than labeling the middle of the rect because it indicates that the values are floored rather than rounded.