Published
Edited
Nov 12, 2020
1 fork
2 stars
function hover(svg, g) {
if ("ontouchstart" in document) svg
.style("-webkit-tap-highlight-color", "transparent")
.on("touchmove", moved)
.on("touchstart", entered)
.on("touchend", left)
else svg
.on("mousemove", moved)
.on("mouseenter", entered)
.on("mouseleave", left);
const dot = g.append("g")
.attr("display", "none")
dot.append("circle")
.attr("r", 2.5)
const lineVertical = dot.append("line").attr('stroke', 'black').attr('stroke-dasharray', '1 1')
const lineHorizontal = dot.append("line").attr('stroke', 'black').attr('stroke-dasharray', '1 1')
dot.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "middle")
.attr("y", -8);
function moved(event) {
const times = data[0].records.map(d => d.time_delta)
const values = data[0].records.map(d => d.value)
const ym = y.invert(event.layerY - margin.top)
const xm = x.invert(event.layerX - margin.left)
const i1 = d3.bisectLeft(times, xm)
const i0 = i1 - 1
const i = xm - times[i0] > times[i1] - xm ? i1 : i0
dot.attr('transform', `translate(${x(times[i])},${getY(values[i])})`)
dot.select('text').text(d3.format('.0f')(values[i]))
lineVertical.attr('y2', height-getY(values[i]))
lineHorizontal.attr('x2', -x(times[i]))
}
function entered() {
dot.attr("display", null)
}
function left() {
dot.attr("display", "none")
}
}
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.
