CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-d3

Data-Driven Documents - A comprehensive JavaScript library for creating dynamic, interactive data visualizations in web browsers

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

time.mddocs/

Time Operations

Time interval calculations and date/time formatting utilities for temporal data processing and visualization. Essential for time-series charts, animations, and any time-based data analysis.

Capabilities

Time Intervals

Functions for creating and working with time intervals for binning, iteration, and calculations.

/**
 * Calendar intervals for date/time calculations
 */
const timeMillisecond: TimeInterval;
const timeSecond: TimeInterval;
const timeMinute: TimeInterval;
const timeHour: TimeInterval;
const timeDay: TimeInterval;
const timeWeek: TimeInterval;
const timeSunday: TimeInterval;  // Week starting Sunday
const timeMonday: TimeInterval;  // Week starting Monday
const timeMonth: TimeInterval;
const timeYear: TimeInterval;

/**
 * UTC time intervals (same as above but in UTC)
 */
const utcMillisecond: TimeInterval;
const utcSecond: TimeInterval;
const utcMinute: TimeInterval;
const utcHour: TimeInterval;
const utcDay: TimeInterval;
const utcWeek: TimeInterval;
const utcSunday: TimeInterval;
const utcMonday: TimeInterval;
const utcMonth: TimeInterval;
const utcYear: TimeInterval;

interface TimeInterval {
  /** Round date down to interval boundary */
  (date: Date): Date;
  /** Round date down to interval boundary */
  floor(date: Date): Date;
  /** Round date up to interval boundary */
  ceil(date: Date): Date;
  /** Round date to nearest interval boundary */
  round(date: Date): Date;
  /** Offset date by specified number of intervals */
  offset(date: Date, step: number): Date;
  /** Generate array of dates from start to stop (exclusive) */
  range(start: Date, stop: Date, step?: number): Date[];
  /** Create filtered version of this interval */
  filter(test: (date: Date) => boolean): TimeInterval;
  /** Create interval that occurs every n instances of this interval */
  every(step: number): TimeInterval;
  /** Count number of intervals between start and end */
  count(start: Date, end: Date): number;
}

Usage Examples:

import { timeDay, timeMonth, timeYear, utcDay } from "d3";

// Floor to day boundary
const now = new Date();
const startOfDay = timeDay(now);

// Generate date ranges
const dailyTicks = timeDay.range(
  new Date(2023, 0, 1),  // Jan 1, 2023
  new Date(2023, 0, 8)   // Jan 8, 2023
);
// [2023-01-01, 2023-01-02, 2023-01-03, ...]

// Monthly intervals
const monthlyTicks = timeMonth.range(
  new Date(2023, 0, 1),
  new Date(2024, 0, 1)
);

// Count intervals
const daysBetween = timeDay.count(
  new Date(2023, 0, 1),
  new Date(2023, 0, 8)
); // 7

// Every 3 days
const everyThreeDays = timeDay.every(3);
const sparseRange = everyThreeDays.range(
  new Date(2023, 0, 1),
  new Date(2023, 0, 15)
);

Custom Time Intervals

Create custom time intervals for specialized temporal calculations.

/**
 * Create custom time interval
 * @param floor - Function to round date down to interval boundary
 * @param offset - Function to offset date by specified step
 * @param count - Function to count intervals between dates
 * @param field - Optional function to extract field value for filtering
 * @returns Custom TimeInterval instance
 */
function timeInterval(
  floor: (date: Date) => void,
  offset: (date: Date, step: number) => void,
  count?: (start: Date, end: Date) => number,
  field?: (date: Date) => number
): TimeInterval;

Usage Examples:

import { timeInterval } from "d3";

// Custom 15-minute interval
const time15Minute = timeInterval(
  date => {
    const minutes = Math.floor(date.getMinutes() / 15) * 15;
    date.setMinutes(minutes, 0, 0);
  },
  (date, step) => {
    date.setMinutes(date.getMinutes() + step * 15);
  },
  (start, end) => {
    return Math.floor((end.getTime() - start.getTime()) / (15 * 60000));
  }
);

// Use custom interval
const quarter = time15Minute(new Date()); // Round to 15-minute boundary
const range = time15Minute.range(
  new Date(2023, 0, 1, 9, 0),   // 9:00 AM
  new Date(2023, 0, 1, 12, 0)   // 12:00 PM
);

Time Formatting

Parse and format dates and times with customizable patterns and locales.

/**
 * Create a time formatter from a specifier string
 * @param specifier - Time format specifier (strftime-like)
 * @returns Function that formats dates according to specifier
 */
function timeFormat(specifier: string): (date: Date) => string;

/**
 * Create a time parser from a specifier string
 * @param specifier - Time format specifier
 * @returns Function that parses strings into dates
 */
function timeParse(specifier: string): (dateString: string) => Date | null;

/**
 * Create a UTC time formatter
 * @param specifier - Time format specifier
 * @returns Function that formats dates in UTC
 */
function utcFormat(specifier: string): (date: Date) => string;

/**
 * Create a UTC time parser
 * @param specifier - Time format specifier  
 * @returns Function that parses strings as UTC dates
 */
function utcParse(specifier: string): (dateString: string) => Date | null;

Usage Examples:

import { timeFormat, timeParse } from "d3";

// Common formats
const formatTime = timeFormat("%B %d, %Y");
formatTime(new Date(2023, 0, 15)); // "January 15, 2023"

const formatISO = timeFormat("%Y-%m-%d");
formatISO(new Date(2023, 0, 15)); // "2023-01-15"

const formatShort = timeFormat("%m/%d/%y");
formatShort(new Date(2023, 0, 15)); // "01/15/23"

// Parsing
const parseTime = timeParse("%m/%d/%Y");
const date = parseTime("01/15/2023"); // Date object

const parseISO = timeParse("%Y-%m-%d");
const isoDate = parseISO("2023-01-15");

Time Format Specifiers

Format specifier strings for customizing date/time display.

// Date components
"%Y"    // Full year (e.g., 2023)
"%y"    // 2-digit year (e.g., 23)
"%m"    // Month as number (01-12)
"%B"    // Full month name (e.g., January)
"%b"    // Abbreviated month (e.g., Jan)
"%d"    // Day of month (01-31)
"%e"    // Day of month, space-padded (1-31)
"%A"    // Full weekday name (e.g., Sunday)
"%a"    // Abbreviated weekday (e.g., Sun)
"%w"    // Weekday as number (0-6, Sunday = 0)
"%j"    // Day of year (001-366)
"%U"    // Week number, Sunday first (00-53)
"%W"    // Week number, Monday first (00-53)

// Time components  
"%H"    // Hour, 24-hour (00-23)
"%I"    // Hour, 12-hour (01-12)
"%M"    // Minute (00-59)
"%S"    // Second (00-59)
"%L"    // Milliseconds (000-999)
"%f"    // Microseconds (000000-999999)
"%p"    // AM/PM
"%Z"    // Time zone name

// Literals
"%%"    // Literal percent sign

Multi-Format Time Parsing

Parse dates that may be in multiple formats automatically.

/**
 * Create parser that tries multiple format specifiers
 * @param specifiers - Array of format specifier strings to try
 * @returns Parser function that attempts each format
 */
function timeParse(...specifiers: string[]): (dateString: string) => Date | null;

/**
 * Create UTC parser that tries multiple format specifiers
 * @param specifiers - Array of format specifier strings to try
 * @returns Parser function that attempts each format in UTC
 */
function utcParse(...specifiers: string[]): (dateString: string) => Date | null;

Locale-Aware Time Formatting

Support for internationalized date/time formatting.

/**
 * Create locale with custom time formatting rules
 * @param definition - Locale definition for time formatting
 * @returns TimeLocale object with format/parse methods
 */
function timeFormatLocale(definition: TimeLocaleDefinition): TimeLocale;

/**
 * Get the default time locale
 * @returns Current default time locale
 */
function timeFormatDefaultLocale(): TimeLocale;

interface TimeLocaleDefinition {
  dateTime: string;          // Date/time format (e.g., "%x, %X")
  date: string;              // Date format (e.g., "%-m/%-d/%Y")
  time: string;              // Time format (e.g., "%-I:%M:%S %p")
  periods: [string, string]; // AM/PM indicators
  days: string[];            // Full weekday names
  shortDays: string[];       // Abbreviated weekday names
  months: string[];          // Full month names
  shortMonths: string[];     // Abbreviated month names
}

interface TimeLocale {
  format(specifier: string): (date: Date) => string;
  parse(specifier: string): (dateString: string) => Date | null;
  utcFormat(specifier: string): (date: Date) => string;
  utcParse(specifier: string): (dateString: string) => Date | null;
}

Usage Examples:

import { timeFormatLocale } from "d3";

// Spanish locale
const esLocale = timeFormatLocale({
  dateTime: "%A, %e de %B de %Y, %X",
  date: "%-m/%-d/%Y",
  time: "%-I:%M:%S %p",
  periods: ["AM", "PM"],
  days: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
  shortDays: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
  months: ["enero", "febrero", "marzo", "abril", "mayo", "junio", 
           "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
  shortMonths: ["ene", "feb", "mar", "abr", "may", "jun",
                "jul", "ago", "sep", "oct", "nov", "dic"]
});

const spanishFormat = esLocale.format("%B %d, %Y");
spanishFormat(new Date(2023, 0, 15)); // "enero 15, 2023"

ISO Date Utilities

Built-in ISO 8601 date formatting and parsing.

/**
 * Format date as ISO 8601 string (YYYY-MM-DDTHH:mm:ss.sssZ)
 * @param date - Date to format
 * @returns ISO 8601 formatted string
 */
function isoFormat(date: Date): string;

/**
 * Parse ISO 8601 date string
 * @param dateString - ISO 8601 formatted string
 * @returns Date object or null if invalid
 */
function isoParse(dateString: string): Date | null;

Install with Tessl CLI

npx tessl i tessl/npm-d3

docs

animation.md

color-interpolation.md

color-schemes.md

data-processing.md

format.md

geo.md

index.md

interactions.md

layouts.md

scales-axes.md

selection.md

shapes.md

time.md

tile.json