D3.js time scale: nicely-spaced ticks at month intervals?

Question

I'm using D3.js to create some simple bar graphs, and was using the d3.time.scale() for the x-axis. But, I stumbled upon one irregularity (or so it seems to me, although of course, I'm wrong :P)

When I generate the scale with ticks at monthly intervals, the difference between the ticks is not equal.

scaleX = d3.time.scale()
  .range([0, 1000])
  .domain([new Date('2014-01'), new Date('2014-12')])

scaleX(new Date("2014-01"))  // 0
scaleX(new Date("2014-02"))  // 9.28...  (diff ~ 9.3)
scaleX(new Date("2014-03"))  // 17.66... (diff ~ 8.4)
scaleX(new Date("2014-04"))  // 26.94... (diff ~ 9.3)

This causes the bars in the graph to be unevenly spaced, leading to ugly graphs...

What's the correct way to evenly space out the bars with months as ticks? I realize that there is the possibility to use an ordinal scale to do this, but it doesn't feel right, also the ordinal scale would not draw ticks for months for which I don't have any data.

Edit: a little clarification on the question: Since SO is for programmers, I only asked the "correct way" to make the ticks evenly spaced out. But what I really want to ask is this:

Is is acceptable to display time-charts with ticks of unequal length?

Yes, I agree that it makes perfect sense from a logical point of view. But it's not really 'aesthetically' sensible if you know what I mean... — kumarharsh, Nov 13 '14 at 13:24
Use an ordinal scale. You can always add "dummy" elements if you want empty months to show up. — Lars Kotthoff, Nov 13 '14 at 13:26
perhaps http://stackoverflow.com/questions/12186366/d3-js-evenly-spaced-bars-on-a-time-scale could help.. — Gabriele Petrioli, Nov 13 '14 at 13:28
I'm very new to D3, so excuse my asking this... but won't it run counter to d3's declarative style of generating graphs? — kumarharsh, Nov 13 '14 at 13:29
Not sure what you're asking. How would using an ordinal scale not be declarative? — Lars Kotthoff, Nov 13 '14 at 19:39
No, using the ordinal scale is not the problem... Finding the missing months, and adding them "by hand" or programmatically is... — kumarharsh, Nov 14 '14 at 06:04

D3.js time scale: nicely-spaced ticks at month intervals?

0 Answers0