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()
.domain([dates])
.range([values]);

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)
{}

where:
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

FOUND THIS USEFUL? SHARE IT

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.

    Reply

Leave a comment -