Public
Edited
Oct 13, 2023
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
callout = (g, value) => {

g.style("display", null);
const path = g.selectAll("path")
.attr("class", "tooltip-path")
.data([null])
.join("path");

const text = g.selectAll("text")
.data([null])
.join("text")
.call(text => text
.selectAll("tspan")
.data((value + "").split(":"))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i * 1.2}em`)
.text(d => d)
.attr("class", "tooltip"));

const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w/2},${5- y})`);
path.attr("d", `M${-w / 2 - 2},5H-5l5,-5l5,5H${w / 2 +3}v${h+2}h-${w + 5}z`);

}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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