Published
Edited
Apr 7, 2021
md`# Drawing a series of timestamps on a single axis chart
Mainly based on http://using-d3js.com/04_04_working_with_dates.html`
svg = {
var xScale = d3
.scaleTime()
.domain(d3.extent(dates))
.range([15, width - 15]);
var xAxis = d3.axisBottom(xScale);
var svg = d3.create('svg');
svg
.attr("width", width)
.append("g")
.attr("transform", "translate(0,60)")
.call(xAxis);
svg
.selectAll("circle")
.data(dates)
.enter()
.append("circle")
.attr("r", 3)
.attr("fill", "black")
.attr("opacity", 0.4)
.attr("cx", d => xScale(d))
.attr("cy", 50);
return svg.node();
}
d3 = require("d3")
// dates = d3.timeHours(new Date(), d3.timeDay.ceil(new Date()))
dates = [
"2021-02-02T03:02:50+00:00",
"2021-02-08T00:10:14+00:00",
"2021-02-05T19:38:35+00:00",
"2021-01-27T17:58:19+00:00",
"2021-02-01T00:59:13+00:00",
"2021-02-10T02:05:10+00:00",
"2021-02-10T01:57:41+00:00",
"2021-02-10T02:00:36+00:00",
"2021-02-10T01:08:11+00:00",
"2021-02-03T18:33:09+00:00",
"2021-02-07T18:28:11+00:00",
"2021-01-31T21:48:34+00:00",
"2021-02-07T21:47:54+00:00",
"2021-01-31T18:35:04+00:00",
"2021-02-08T00:31:59+00:00",
"2021-02-01T01:34:17+00:00",
"2021-02-08T00:24:40+00:00",
"2021-02-10T01:51:16+00:00",
"2021-02-07T22:51:46+00:00",
"2021-02-01T21:42:07+00:00",
"2021-01-31T19:18:08+00:00",
"2021-01-31T22:04:28+00:00",
"2021-02-07T22:02:13+00:00",
"2021-01-30T18:11:35+00:00",
"2021-02-02T02:28:11+00:00",
"2021-01-28T18:28:11+00:00",
"2021-02-08T00:24:15+00:00",
"2021-02-03T01:22:57+00:00",
"2021-02-01T01:43:16+00:00",
"2021-02-08T00:01:40+00:00",
"2021-02-08T00:30:58+00:00",
"2021-01-27T00:14:28+00:00",
"2021-02-10T02:11:47+00:00",
"2021-01-26T21:48:36+00:00",
"2021-01-30T00:04:36+00:00",
"2021-02-01T01:40:12+00:00",
"2021-02-05T19:05:47+00:00",
"2021-02-02T01:55:17+00:00",
"2021-01-31T18:20:19+00:00",
"2021-01-26T20:50:49+00:00",
"2021-01-31T21:50:47+00:00",
"2021-01-25T18:06:11+00:00",
"2021-02-07T17:23:25+00:00",
"2021-01-29T02:46:52+00:00",
"2021-02-10T01:33:28+00:00",
"2021-01-25T00:27:44+00:00",
"2021-01-29T19:33:09+00:00",
"2021-02-02T02:30:54+00:00",
"2021-02-11T23:52:11+00:00",
"2021-02-07T19:09:06+00:00",
"2021-02-07T23:03:16+00:00",
"2021-01-26T18:36:26+00:00",
"2021-02-02T02:52:38+00:00",
"2021-02-02T02:34:19+00:00",
"2021-01-29T22:58:45+00:00",
"2021-02-06T22:35:33+00:00",
"2021-02-01T01:44:25+00:00",
"2021-02-08T00:22:45+00:00",
"2021-01-25T00:38:32+00:00",
"2021-02-02T00:46:49+00:00",
"2021-01-30T01:40:03+00:00",
"2021-02-07T22:12:31+00:00",
"2021-01-29T19:39:24+00:00",
"2021-02-07T17:44:02+00:00",
"2021-02-08T00:23:58+00:00",
"2021-01-30T18:41:02+00:00",
"2021-02-10T01:36:05+00:00",
"2021-02-07T17:23:40+00:00",
"2021-02-12T01:29:00+00:00",
"2021-02-09T02:50:03+00:00",
"2021-02-01T01:50:27+00:00",
"2021-02-02T03:03:04+00:00",
"2021-01-31T23:05:58+00:00",
"2021-02-07T22:52:46+00:00",
"2021-02-14T20:33:35+00:00",
"2021-01-30T18:06:41+00:00",
"2021-02-03T21:17:24+00:00",
"2021-02-10T02:06:01+00:00",
"2021-02-09T00:18:55+00:00",
"2021-01-25T00:42:37+00:00",
"2021-01-29T22:44:51+00:00",
"2021-02-01T01:40:37+00:00",
"2021-01-30T20:01:03+00:00",
"2021-02-02T02:54:38+00:00",
"2021-02-02T00:59:50+00:00",
"2021-02-12T23:40:00+00:00",
"2021-01-31T22:03:41+00:00",
"2021-02-05T22:22:40+00:00",
"2021-02-07T22:12:39+00:00",
"2021-02-02T02:36:45+00:00",
"2021-01-31T22:02:36+00:00",
"2021-01-31T19:01:34+00:00",
"2021-02-05T19:42:53+00:00",
"2021-02-07T22:11:09+00:00",
"2021-02-05T17:57:03+00:00",
"2021-02-10T01:57:51+00:00",
"2021-01-27T17:40:29+00:00",
"2021-01-29T23:53:10+00:00",
"2021-02-09T21:36:40+00:00",
"2021-02-07T23:16:04+00:00"
].map(d => new Date(d))
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.
