Published
Edited
Oct 15, 2019
Importers
Insert cell
md`# Tooltips`
Insert cell
Insert cell
chart = {
const svg = d3.select(DOM.svg(width, 300));
const tooltip = d3.select("body").append("div").call(createTooltip)
const tipContent = d => {
return d;
}
svg.selectAll("circle")
.data([1, 2, 3])
.join("circle")
.attr("cx", d => d * width / 4)
.attr("cy", 150)
.attr("r", 40)
.attr("fill", "#69b3a2")
.on("mouseover", function(d) {
tooltip.style("display", null);
d3.select(this)
.attr("fill", "#333333");
tooltip.html(tipContent(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mousemove", function(d) {

tooltip
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
d3.select(this)
.attr("fill", "#69b3a2");
tooltip.style("display", "none");
});

return svg.node();
}
Insert cell
d3 = require("d3")
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