Published
Edited
Oct 3, 2022
1 fork
5 stars
Insert cell
Insert cell
Insert cell
curveData = [
{
date: 1662213247,
temperature: 25.08
},
{
date: 1662214447,
temperature: 24.98
},
{
date: 1662215647,
temperature: 24.41
},
{
date: 1662216847,
temperature: 24.26
},
{
date: 1662218047,
temperature: 24.26
},
{
date: 1662219247,
temperature: 23.68
},
{
date: 1662220447,
temperature: 23.29
},
{
date: 1662221647,
temperature: 23.82
},
{
date: 1662222847,
temperature: 23.68
},
{
date: 1662224047,
temperature: 23.25
},
{
date: 1662225247,
temperature: 22.97
},
{
date: 1662226447,
temperature: 22.69
},
{
date: 1662227647,
temperature: 22.33
},
{
date: 1662228847,
temperature: 21.96
},
{
date: 1662230047,
temperature: 21.51
},
{
date: 1662231247,
temperature: 20.93
},
{
date: 1662232447,
temperature: 20.51
},
{
date: 1662233647,
temperature: 20.02
},
{
date: 1662234847,
temperature: 19.7
},
{
date: 1662236047,
temperature: 19.46
},
{
date: 1662237247,
temperature: 19.16
},
{
date: 1662238447,
temperature: 18.85
},
{
date: 1662239647,
temperature: 18.63
},
{
date: 1662240847,
temperature: 18.38
},
{
date: 1662242047,
temperature: 18.13
},
{
date: 1662243247,
temperature: 17.92
},
{
date: 1662244447,
temperature: 17.79
},
{
date: 1662245647,
temperature: 17.52
},
{
date: 1662246847,
temperature: 17.44
},
{
date: 1662248047,
temperature: 17.39
},
{
date: 1662249247,
temperature: 17.3
},
{
date: 1662251647,
temperature: 16.8
},
{
date: 1662252847,
temperature: 16.79
},
{
date: 1662255247,
temperature: 16.61
},
{
date: 1662256447,
temperature: 16.41
},
{
date: 1662257646,
temperature: 16.17
},
{
date: 1662258846,
temperature: 16
},
{
date: 1662260046,
temperature: 15.92
},
{
date: 1662261246,
temperature: 15.63
},
{
date: 1662262446,
temperature: 15.6
},
{
date: 1662263646,
temperature: 15.4
},
{
date: 1662264846,
temperature: 15.34
},
{
date: 1662266046,
temperature: 15.26
},
{
date: 1662267246,
temperature: 15.2
},
{
date: 1662268446,
temperature: 15.21
},
{
date: 1662269646,
temperature: 15.33
},
{
date: 1662270846,
temperature: 15.62
},
{
date: 1662272046,
temperature: 16.26
},
{
date: 1662273246,
temperature: 17.07
},
{
date: 1662274446,
temperature: 18.12
},
{
date: 1662275646,
temperature: 19.2
},
{
date: 1662276846,
temperature: 20.2
},
{
date: 1662278046,
temperature: 21.19
},
{
date: 1662279246,
temperature: 21.89
},
{
date: 1662280446,
temperature: 21.96
},
{
date: 1662281646,
temperature: 22.08
},
{
date: 1662282846,
temperature: 22.11
},
{
date: 1662284046,
temperature: 22.35
},
{
date: 1662285246,
temperature: 22.76
},
{
date: 1662286446,
temperature: 23.04
},
{
date: 1662287646,
temperature: 23.72
},
{
date: 1662288846,
temperature: 24.06
},
{
date: 1662290046,
temperature: 24.38
},
{
date: 1662291246,
temperature: 25.51
},
{
date: 1662292446,
temperature: 26.1
},
{
date: 1662293646,
temperature: 26.49
},
{
date: 1662294846,
temperature: 27.39
},
{
date: 1662296046,
temperature: 28.23
},
{
date: 1662297246,
temperature: 29.11
},
{
date: 1662298446,
temperature: 28.33
}
]
Insert cell
Insert cell
dataPlot = Plot.plot({
grid: true,
x: {
ticks: 10,
tickFormat: (d) => new Date(d * 1000).toLocaleString("de-DE"),
tickRotate: 0,
label: "Date and time →"
},
y: {
ticks: 8,
label: "↑ Temperature (°C)",
domain: [14, 32]
},
marks: [
Plot.ruleY([0]),
Plot.lineY(curveData, {
x: "date",
y: "temperature"
// curve: "catmull-rom",
// marker: "circle"
})
],
marginTop: 20,
marginBottom: 50
})
Insert cell
Insert cell
d3
.select(dataPlot)
.select('[aria-label="x-axis"]')
.selectAll(".tick")
.select("text")
.call(function (t) {
t.each(function (d) {
var self = d3.select(this);
var s = new Date(d * 1000).toLocaleString("de-DE").split(",");
self.text(null);
self.append("tspan").attr("x", 0).attr("dy", ".8em").text(s[0]);
self.append("tspan").attr("x", 0).attr("dy", "1.2em").text(s[1]);
});
})
Insert cell
Insert cell
plot = {
let dataPlot = Plot.plot({
grid: true,
x: {
ticks: 10,
tickFormat: (d) => new Date(d * 1000).toLocaleString("de-DE"),
tickRotate: 0,
label: "Date and time →"
},
y: {
ticks: 8,
label: "↑ Temperature (°C)",
domain: [14, 32]
},
marks: [
Plot.ruleY([0]),
Plot.lineY(curveData, {
x: "date",
y: "temperature",
curve: "catmull-rom",
marker: "circle",
stroke: "red"
})
],
marginTop: 20,
marginBottom: 50
});

//Add Multi-line tick labels to the chart
d3.select(dataPlot)
.select('[aria-label="x-axis"]')
.selectAll(".tick")
.select("text")
.call(function (t) {
t.each(function (d) {
var self = d3.select(this);
var s = new Date(d * 1000).toLocaleString("de-DE").split(",");
self.text(null);
self.append("tspan").attr("x", 0).attr("dy", ".8em").text(s[0]);
self.append("tspan").attr("x", 0).attr("dy", "1.2em").text(s[1]);
});
});

return dataPlot;
}
Insert cell

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.
Learn more