D3.js: calculate width of bars in time scale with changing range?

Question

I\'m building a D3 bar chart with a time scale on the x-axis. The range of the x-axis can vary.

How can I specify the correct width for the bars on the bar chart? I

Answer 1

Since time scales are continuous, there can be many ideas of what a "correct" bar width is. If your data points are very granular and unevenly distributed, you may want to use a thin bar of fixed width to minimize overlaps. If you know something about your expected data values ahead of time and they are uniform granularity, you can do something like what @LarsKotthoff to space them out evenly.

One thing to consider is whether what you actually want a time scale at all. Bars are generally used to represent categorical values, not points on a continuous scale. Maybe an ordinal scale with the domain derived from a date range is actually want you want. In that case you could use rangeBands as per your original post.

Not saying it is wrong to do what you're doing. Just food for thought.