I am currently trying to visualize data based on dates, and I am aiming for something similar to the following:
My goal is to create rectangles that represent each day's data. Here is how I am drawing the rectangles:
svg.selectAll(".my_class")
.data(my_data)
.enter()
.append("rect")
.attr({
"width": function(d) { return x_scale.rangeBand(); },
"height": function(d) { return h_scale(d.end - d.start); },
"x": function(d) { return x_scale(new Date(d.date)); },
"y": function(d) { return y_scale(d.end); },
"class": function(d) { return d.device; }
});
However, I have encountered an issue where in order to get the correct width, I had to define my x_scale like this:
d3.scale.ordinal()
.domain(my_data.map(function (d) { return new Date(d.date); }))
.rangeRoundBands([0, image_width]);
I now realize that I should have used d3.time.scale() instead. This became apparent when I noticed gaps after certain dates like 2nd, 7th, and 12th of February. The challenge here is I can't figure out how to specify rectangle widths using d3.time.scale().
One workaround I thought of is to generate zero-height rectangles beforehand for every day within the timeframe. While this solution isn't ideal, it seems like a reasonable approach. However, it would mean losing some features like .ticks(d3.time.weeks, 1) and having to handle them manually.
Any suggestions or guidance on how to improve this setup?