localtime = d3.scaleTime()
domain = localtime.domain() // 1 Jan. 2000, 00h00 to 2 Jan. 2000, 00h00
range = localtime.range()
visualizeTicks(
d3.scaleTime().domain([Date.now(), Date.now() + 24 * 60 * 60 * 1000])
)
visualizeTicks(
d3
.scaleTime()
.domain([Date.now(), Date.now() + 21 * 60 * 60 * 1000])
.nice()
)
[
localtime.invert(0),
localtime.invert(0.5),
localtime.invert(1),
localtime.invert(2)
]
d3.scaleTime().range([0, 500])(new Date("2000-01-01T13:02"))
d3.scaleTime().rangeRound([0, 500])(new Date("2000-01-01T13:02"))
d3.scaleTime().clamp(true)(Date.now()) // result clamped to [0,1]
d3.scaleTime()(Date.now()) // by default, the scale does not clamp
year2year = d3
.scaleTime()
.domain([new Date("2012-01-01"), new Date("2013-01-01")])
.range([new Date("1970-01-01"), new Date("1971-01-01")])
year2year(new Date("2012-02-29T02:00")) // at 2am
year2year(new Date("2012-02-29T14:00")) // at 2pm
utc = d3.scaleUtc()
utc.invert(0.00001)
utc.invert(0)
utc.invert(0.999999)
utc.invert(0)
+domain[0] // number of milliseconds since 1 Jan 1970.
domain[1] - domain[0] // number of milliseconds in the domain
24 * 60 * 60 * 1000 // 24 hours x 60 minutes x 60 seconds x 1000 milliseconds
The default scaleTime domain goes
from ${domain[0]}
to ${domain[1]}.
format = date =>
date.toLocaleString("en-US", {
weekday: "short",
month: "short",
year: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric"
})
leapyear = d3
.scaleTime()
.domain([new Date("1972-02-24T00:00:00"), new Date("1972-03-06T00:00:00")])
leapyear.range([0, 1]).invert(0.5) // 29 Feb 1972
nonleapyear = d3
.scaleTime()
.domain([new Date('December 17, 1995 03:24:00'), new Date('December 17, 1998 03:24:00')])
nonleapyear.range([0, 1]).invert(0.5) // 1 March 1970
visualizeTicks(nonleapyear, [10, d3.timeFormat("%d %b")])
leapsecond = d3
.scaleUtc()
.domain([Date.UTC(2016, 11, 31, 23, 59, 56), Date.UTC(2017, 0, 1, 0, 0, 4)])
visualizeTicks(leapsecond, [10, d3.timeFormat("%S")]) // the leap second is ignored by JavaScript 🕷
d3 = require("d3-scale@3", "d3-selection@2", "d3-time-format@3")
import {visualizeTicks} from "@d3/continuous-scales"
import {clock, style} with {clockRadius} from "@d3/simple-clock"
clockRadius = Math.min(200, width / 2 - 40)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
