d3-time

What is d3-time?

The d3-time npm package is a module that provides utilities for manipulating dates in JavaScript. It is part of the D3 (Data-Driven Documents) suite of tools, which are used for producing dynamic, interactive data visualizations in web browsers. d3-time is specifically designed to handle time scales, sequences, and intervals, making it a powerful tool for dealing with temporal data.

What are d3-time's main functionalities?

Time Scales

Create a time scale that maps a domain of dates to a range of numeric values. This is useful for creating time-based charts.

const timeScale = d3.scaleTime().domain([new Date(2020, 0, 1), new Date(2020, 11, 31)]).range([0, 100]);

Time Intervals

Generate an array of dates at regular intervals, such as every month between two dates. This is useful for generating axis ticks or processing data at regular time intervals.

const start = new Date(2020, 0, 1); const end = new Date(2020, 11, 31); const everyMonth = d3.timeMonth.every(1); const months = everyMonth.range(start, end);

Time Formatting

Format dates according to a specified pattern. This is useful for displaying dates in a human-readable format.

const formatTime = d3.timeFormat('%B %d, %Y'); const formatted = formatTime(new Date(2020, 0, 1));

Other packages similar to d3-time

moment

Moment.js is a legacy package for parsing, validating, manipulating, and formatting dates. It is more feature-rich than d3-time but is also larger in size. Moment.js has been a go-to library for date operations, though it is now considered a legacy project in maintenance mode.

date-fns

date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. It offers a modular approach, where you can pick and choose which functions to include. It is a modern alternative to Moment.js and is often preferred for its smaller bundle sizes and functional programming approach.

luxon

Luxon is a powerful, modern, and friendly wrapper for JavaScript dates and times. Created by one of the Moment.js team members, it includes internationalization support and operates on the Intl API. It is a good alternative to d3-time when complex date manipulation and formatting are required.

README

d3-time

When visualizing time series data, analyzing temporal patterns, or working with time in general, the irregularities of conventional time units quickly become apparent. In the Gregorian calendar, for example, most months have 31 days but some have 28, 29 or 30; most years have 365 days but leap years have 366; and with daylight saving, most days have 24 hours but some have 23 or 25. Adding to complexity, daylight saving conventions vary around the world.

As a result of these temporal peculiarities, it can be difficult to perform seemingly-trivial tasks. For example, if you want to compute the number of days that have passed between two dates, you can’t simply subtract and divide by 24 hours (86,400,000 ms):

var start = new Date(2015, 02, 01), // Sun Mar 01 2015 00:00:00 GMT-0800 (PST)
    end = new Date(2015, 03, 01); // Wed Apr 01 2015 00:00:00 GMT-0700 (PDT)
(end - start) / 864e5; // 30.958333333333332, oops!

You can, however, use day.count:

day.count(start, end); // 31

Day is one of several time intervals provided by d3-time. Each interval represents a conventional unit of time—hours, weeks, months, etc.—and has methods to calculate boundary dates. For example, the day interval computes midnight (typically 12:00 AM local time) of the corresponding day. In addition to rounding and counting, intervals can also be used to generate arrays of boundary dates. For example, to compute each Sunday in the current month:

var now = new Date;
week.range(month.floor(now), month.ceil(now));
// [Sun Jun 07 2015 00:00:00 GMT-0700 (PDT),
//  Sun Jun 14 2015 00:00:00 GMT-0700 (PDT),
//  Sun Jun 21 2015 00:00:00 GMT-0700 (PDT),
//  Sun Jun 28 2015 00:00:00 GMT-0700 (PDT)]

The d3-time module does not implement its own calendaring system; it merely implements a convenient API for calendar math on top of ECMAScript Date. Thus, it ignores leap seconds and can only work with the local time zone and Coordinated Universal Time (UTC).

This module is used by D3’s time scales to generate sensible ticks, by D3’s time format, and can also be used directly to do things like calendar layouts.

Installing

If you use NPM, npm install d3-time. Otherwise, download the latest release.

API Reference

# interval(date)

Alias for interval.floor. For example, year(date) and year.floor(date) are equivalent.

# interval.floor(date)

Returns a new date representing the latest interval boundary date before or equal to date. For example, day.floor(new Date) typically returns 12:00 AM local time on the current day.

This method is idempotent: if the specified date is already floored to the current interval, a new date with an identical time is returned. Furthermore, the returned date is the minimum expressible value of the associated interval, such that floor(+floor(date) - 1) returns the preceeding interval boundary date.

Note that the == and === operators do not compare by value with Date objects, and thus you cannot use them to tell whether the specified date has already been floored. Instead, coerce to a number and then compare:

// Returns true if the specified date is a day boundary.
function isDay(date) {
  return +day.floor(date) === +date;
}

This is more reliable than testing whether the time is 12:00 AM, as in some time zones midnight may not exist due to daylight saving.

# interval.round(date)

Returns a new date representing the closest interval boundary date to date. For example, day.round(new Date) typically returns 12:00 AM local time on the current day if it is on or before noon, and 12:00 AM of the following day if it is after noon.

This method is idempotent: if the specified date is already rounded to the current interval, a new date with an identical time is returned.

# interval.ceil(date)

Returns a new date representing the earliest interval boundary date after or equal to date. For example, day.ceil(new Date) typically returns 12:00 AM local time on the following day.

This method is idempotent: if the specified date is already ceilinged to the current interval, a new date with an identical time is returned. Furthermore, the returned date is the maximum expressible value of the associated interval, such that ceil(+ceil(date) + 1) returns the following interval boundary date.

# interval.offset(date[, step])

Returns a new date equal to date plus step intervals. If step is negative, then the returned date will be before the specified date; if step is zero, then a copy of the specified date is returned. This method does not round the specified date to the interval. For example, if it is currently 5:34 PM, then day.offset(new Date, 1) returns 5:34 PM tomorrow (even if daylight saving changes!). If step is not specified it defaults to 1.

# interval.range(start, stop[, step])

Returns every an array of dates representing every interval boundary after or equal to start (inclusive) and before stop (exclusive). If step is specified, then every step'th interval will be returned; for example, for the day interval a step of 2 will return every other day.

# interval.filter(test)

Returns a new interval that is a filtered subset of this interval using the specified test function. The test function is passed a date and should return true if and only if the specified date should be considered part of the interval. For example, to create an interval that returns the 1st, 11th, 21th and 31th (if it exists) of each month:

var i = day.filter(function(d) { return (d.getDate() - 1) % 10 === 0; });

The returned filtered interval does not support count.

# interval.count(start, end)

Returns the number of interval boundaries after start (exclusive) and before or equal to end (inclusive). Note that this behavior is slightly different than interval.range because its purpose is to return the zero-based number of the specified end date relative to the specified start date. For example, to compute the current zero-based day-of-year number:

var now = new Date;
day.count(year(now), now); // 177

Likewise, to compute the current zero-based week-of-year number for weeks that start on Sunday:

sunday.count(year(now), now); // 25

Intervals

The following intervals are provided:

# second
# utcSecond

Seconds (e.g., 01:23:45.0000 AM); 1,000 milliseconds.

# minute
# utcMinute

Minutes (e.g., 01:02:00 AM); 60 seconds. Note that ECMAScript ignores leap seconds.

# hour
# utcHour

Hours (e.g., 01:00 AM); 60 minutes. Note that advancing time by one hour in local time can return the same hour or skip an hour due to daylight saving.

# day
# utcDay

Days (e.g., February 7, 2012 at 12:00 AM); typically 24 hours. Days in local time may range from 23 to 25 hours due to daylight saving.

# week
# utcWeek

Alias for sunday; 7 days and typically 168 hours. Weeks in local time may range from 167 to 169 hours due on daylight saving.

# sunday
# utcSunday

Sunday-based weeks (e.g., February 5, 2012 at 12:00 AM).

# monday
# utcMonday

Monday-based weeks (e.g., February 6, 2012 at 12:00 AM).

# tuesday
# utcTuesday

Tuesday-based weeks (e.g., February 7, 2012 at 12:00 AM).

# wednesday
# utcWednesday

Wednesday-based weeks (e.g., February 8, 2012 at 12:00 AM).

# thursday
# utcThursday

Thursday-based weeks (e.g., February 9, 2012 at 12:00 AM).

# friday
# utcFriday

Friday-based weeks (e.g., February 10, 2012 at 12:00 AM).

# saturday
# utcSaturday

Saturday-based weeks (e.g., February 11, 2012 at 12:00 AM).

# month
# utcMonth

Months (e.g., February 1, 2012 at 12:00 AM); ranges from 28 to 31 days.

# year
# utcYear

Years (e.g., January 1, 2012 at 12:00 AM); ranges from 365 to 366 days.

Ranges

For convenience, aliases for interval.range are also provided as plural forms of the corresponding interval.

# seconds(start, stop[, step])
# utcSeconds(start, stop[, step])

Aliases for second.range and utcSecond.range.

# minutes(start, stop[, step])
# utcMinutes(start, stop[, step])

Aliases for minute.range and utcMinute.range.

# hours(start, stop[, step])
# utcHours(start, stop[, step])

Aliases for hour.range and utcHour.range.

# days(start, stop[, step])
# utcDays(start, stop[, step])

Aliases for day.range and utcDay.range.

# weeks(start, stop[, step])
# utcWeeks(start, stop[, step])

Aliases for week.range and utcWeek.range.

# sundays(start, stop[, step])
# utcSundays(start, stop[, step])

Aliases for sunday.range and utcSunday.range.

# mondays(start, stop[, step])
# utcMondays(start, stop[, step])

Aliases for monday.range and utcMonday.range.

# tuesdays(start, stop[, step])
# utcTuesdays(start, stop[, step])

Aliases for tuesday.range and utcTuesday.range.

# wednesdays(start, stop[, step])
# utcWednesdays(start, stop[, step])

Aliases for wednesday.range and utcWednesday.range.

# thursdays(start, stop[, step])
# utcThursdays(start, stop[, step])

Aliases for thursday.range and utcThursday.range.

# fridays(start, stop[, step])
# utcFridays(start, stop[, step])

Aliases for friday.range and utcFriday.range.

# saturdays(start, stop[, step])
# utcSaturdays(start, stop[, step])

Aliases for saturday.range and utcSaturday.range.

# months(start, stop[, step])
# utcMonths(start, stop[, step])

Aliases for month.range and utcMonth.range.

# years(start, stop[, step])
# utcYears(start, stop[, step])

Aliases for year.range and utcYear.range.

Changes from D3 3.x:

• Instead of exposing UTC intervals as interval.utc, separate UTC intervals are provided. For example, use utcDay instead of day.utc.

• The dayOfYear, weekOfYear and related methods have been removed in favor of the more general interval.count. You can now easily count the number of days you have lived or the number of hours in the current week, and you can count in either local time or UTC.

• The unusual behavior of day.range when passed a step greater than one has been replaced with more sensible behavior of simply skipping every step days. If you want to filter by day-of-month (such as ticks for a time scale), use interval.filter instead.

• All methods coerce to Date where appropriate, thereby allowing numeric input.

• Fixed a bug related to unusual daylight saving behavior.