Adjust time scale representation on axis – D3js

16 / Oct / 2015 by Neha Gupta 1 comments

In d3.js we use Time Scale on an axis, generally x-axis, to represent time in charts. To simplify manipulation of iteration over time intervals, D3 provides a handful of utilities in addition to time scale and time format.
d3.time.scale() creates a time scale with some domain and range values, the time scale also provides suitable ticks based on time intervals.

The following time intervals are considered for automatic ticks:

  • 1-, 5-, 15- and 30-second.
  • 1-, 5-, 15- and 30-minute.
  • 1-, 3-, 6- and 12-hour.
  • 1- and 2-day.
  • 1-week.
  • 1- and 3-month.
  • 1-year.

Usually, we use:

var x = d3.time.scale()

If dates is specified, scale.domain([dates]) sets the scale’s input domain to the specified array of dates. The array must contain two or more dates.
If values is specified, scale.range([values]) sets the scale’s output range to the specified array of values. The array must contain two or more values.
For more details refer Time Scales.

Defining your axis:

var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(12);

This would give us this default time intervals provided by d3.time.scale, the ticks will always include prior mentioned automatic ticks.

Recently, I was working on a project which required charts showing Time-based Statistics. We wanted to have 2-days aggregated data, hence my requirement was to have a tick only after 2-days interval. It works well, until there is a change in month. This JSFiddle shows the problem. Notice the dates when month changes from March to April.

If you want to avoid auto-generated ticks, then you would need to change the implementation of d3.time.scale. To do so, all you need is a custom function which will override former’s existing definition with the following signature:

function customTickFunc (t0, t1, step)

t0 and t1 are start and end of dates on domain.
step is optional step count.

Here is my function’s implementation

function customTickFunc (t0, t1, step)
    var startTime = new Date(t0),
        endTime= new Date(t1), times = [];
    endTime.setUTCDate(endTime.getUTCDate() + 1);
    while (startTime < endTime) {
      startTime.setUTCDate(startTime.getUTCDate() + 2);
      times.push(new Date(startTime));
    return times;

Now when we do

var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(customTickFunc);

The above will create the required ticks, overriding default tick behaviour. Here is the JSFiddle


comments (1 “Adjust time scale representation on axis – D3js”)

  1. rohit gupta

    Hi I have a requirement to create a irregular time interval graphs with no of weeks in as month which can be either 4 or 5. And that too with sliders which depicts starting and end point in terms of week date. I am unsure like how to achieve that.


Leave a comment -