Software Engineer, Jazz and more 🎹 🎷 🎸
Published
Edited
Sep 17, 2022
2 forks
3 stars
Line chart with Tooltip
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
}
]
dataPlot = Plot.plot({
//Add vertical and horizontal grid lines
grid: true,
x: {
ticks: 10,
tickFormat: (d) => d,
tickRotate: 0,
labelAnchor: "center",
nice: true,
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"
})
],
style: {
//marginLeft: 50,
//marginBottom: 50,
//marginRight: 100
},
marginLeft: 50,
marginBottom: 50,
marginRight: 100
})
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]);
});
})
{
// Try to read the diagram margins
var attributes = dataPlot.attributes;
console.log(attributes);
}
d3
.select(dataPlot)
.append("rect")
.attr("class", "bg-rect")
.attr("width", svgDim.width)
.attr("height", svgDim.height)
.attr("opacity", "0")
.on("mouseover", function () {
d3.select(".toolTip").style("display", "block");
console.log("mouseover");
})
.on("mouseout", function () {
d3.select(".toolTip").style("display", "none");
console.log("mouseout");
})
.on("mousemove", (event) => {
mousemove(event);
})
{
//----------------------
// Tooltip
//----------------------
var toolTip = d3
.select(dataPlot)
.append("g")
.attr("class", "toolTip")
.style("display", "none");
// append the x line
toolTip
.append("line")
.attr("class", "x-line")
.style("stroke", "red")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", 0);
// append the y line
toolTip
.append("line")
.attr("class", "y-line")
.style("stroke", "red")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", 0);
// append the circle at the intersection
toolTip
.append("circle")
.attr("class", "circle")
.style("fill", "none")
.style("stroke", "black")
.style("opacity", 1.0)
.attr("r", 3);
// Text date and time
toolTip
.append("text")
.attr("class", "y1")
.attr("dx", 8)
.attr("dy", "-1.6em")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.style("fill", "blue");
// Text temperature
toolTip
.append("text")
.attr("class", "y2")
.attr("dx", 8)
.attr("dy", "-.3em")
.attr("text-anchor", "start")
.style("fill", "blue");
}
console.log(dataPlot.scale("x").domain[0])
function mousemove(event) {
try {
var xMouse = d3.pointer(event)[0];
const scaleDate = dataPlot.scale("x");
const scaleTemp = dataPlot.scale("y");
const xDomain = dataPlot.scale("x").domain;
const yDomain = dataPlot.scale("y").domain;
var x0 = scaleDate.invert(xMouse);
var i = bisectData(curveData, x0, 1),
d0 = curveData[i - 1],
d1 = curveData[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
var toolTip = d3.select(".toolTip");
//x-Line
toolTip
.select(".x-line")
.attr(
"transform",
"translate(" +
scaleDate.apply(d.date) +
"," +
scaleTemp.apply(d.temperature) +
")"
)
.attr("y2", scaleTemp.apply(yDomain[0]) - scaleTemp.apply(d.temperature)); //svgDim.height - 50 - scaleTemp.apply(d.temperature));
//y-Line
toolTip
.select(".y-line")
.attr(
"transform",
"translate(" +
scaleDate.apply(d.date) +
"," +
scaleTemp.apply(d.temperature) +
")"
)
.attr("x2", scaleDate.apply(xDomain[0]) - scaleDate.apply(d.date)); //50 - scaleDate.apply(d.date)
//circle at the intersection
toolTip
.select(".circle")
.attr(
"transform",
"translate(" +
scaleDate.apply(d.date) +
"," +
scaleTemp.apply(d.temperature) +
")"
);
toolTip
.select("text.y1")
.attr(
"transform",
"translate(" +
scaleDate.apply(d.date) +
"," +
scaleTemp.apply(d.temperature) +
")"
)
.text("T: " + d.temperature + " °C");
toolTip
.select("text.y2")
.attr(
"transform",
"translate(" +
scaleDate.apply(d.date) +
"," +
scaleTemp.apply(d.temperature) +
")"
)
.text(
"D: " +
new Date(d.date * 1000).toLocaleString("de-DE").split(",")[1].trim()
);
} catch (error) {
// do nothing
}
}
bisectData = d3.bisector(function (d) {
return d.date;
}).left
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.
