I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Feb 21, 2023
1 fork
12 stars
d3.geoPath + Canvas + Zoom + PanningTopoJSON Simplifier and Filter attributesd3.stack with d3.groupScatterplot OverplottingTreemap from tabled3.stack with d3.nestD3 data binding v3 to v5D3 Network Visualization PlaygroundReusable charts d3@4Intro to D3Marks and Channels in D3
How to add a tooltip in D3
Also listed in…
Observable Tricks
{
const svg = d3.create("svg").attr("width", width).attr("height", height);
const g = svg
.append("g")
.attr("transform", `translate(${margin.top}, ${margin.right})`);
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${iheight})`);
g.append("g").call(d3.axisLeft(y));
g.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d) => x(d[xAttr]))
.attr("cy", (d) => y(d[yAttr]))
.attr("fill", "steelblue")
.attr("r", 3)
// TOOLTIP
.call((circles) =>
circles
.append("title")
.text((d) => `${xAttr}: ${d[xAttr]}; ${yAttr}: ${d[yAttr]}`)
);
return svg.node();
}
{
const svg = d3.create("svg").attr("width", width).attr("height", height).style("overflow", "visible");
const g = svg
.append("g")
.attr("transform", `translate(${margin.top}, ${margin.right})`);
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${iheight})`);
g.append("g").call(d3.axisLeft(y));
const gPoints = g.append("g").attr("class", "gPoints");
// Let's create a tooltip SVG text element
const tooltip = g
.append("text")
.attr("class", "tooltip")
.attr("fill", "black")
.style("pointer-events", "none");
gPoints
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d) => x(d[xAttr]))
.attr("cy", (d) => y(d[yAttr]))
.attr("fill", "steelblue")
.attr("r", 3)
// Change the contents and position of the tooltip
.on("mouseover", (evt, d) => {
const [mx, my] = d3.pointer(evt);
tooltip
.attr("x", mx)
.attr("y", my)
.text(`a ${xAttr}: ${d[xAttr]}; ${yAttr}: ${d[yAttr]}`);
})
.on("mouseout", () => {
// clear the tooltip
tooltip.text("");
});
return svg.node();
}
{
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.style("overflow", "visible");
const g = svg
.append("g")
.attr("transform", `translate(${margin.top}, ${margin.right})`);
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${iheight})`);
g.append("g").call(d3.axisLeft(y));
const gPoints = g.append("g").attr("class", "gPoints");
// Let's create a tooltip SVG text element
const tooltip = g
.append("text")
.attr("class", "tooltip")
.attr("fill", "black");
gPoints
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d) => x(d[xAttr]))
.attr("cy", (d) => y(d[yAttr]))
.attr("fill", "steelblue")
.attr("r", 3)
// Change the contents and position of the tooltip
.on("mouseenter", (evt, d) => {
const [mx, my] = d3.pointer(evt);
const tooltipText = `${xAttr}: ${d[xAttr]}\n ${yAttr}: ${d[yAttr]}`;
tooltip
.attr("transform", `translate(${mx}, ${my})`)
.selectAll("tspan")
.data(tooltipText.split("\n"))
.join("tspan")
.attr("dy", "1em")
.attr("x", "0px")
.text((text) => text );
})
.on("mouseout", () => tooltip.selectAll("tspan").remove());
return svg.node();
}
{
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.style("overflow", "visible");
// We wrap the SVG with a container that has the html element above it
const container = html`<div>
<style>.tooltip {
font: sans-serif 12pt;
background: #eeeeeeee;
pointer-events: none;
border-radius: 2px;
padding: 5px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}</style>
<div class="tooltip"></div>
${svg.node()}
</div>`
const g = svg
.append("g")
.attr("transform", `translate(${margin.top}, ${margin.right})`);
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${iheight})`);
g.append("g").call(d3.axisLeft(y));
const gPoints = g.append("g").attr("class", "gPoints");
// A selection for the tooltip
const tooltip = d3.select(container).select(".tooltip");
gPoints
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d) => x(d[xAttr]))
.attr("cy", (d) => y(d[yAttr]))
.attr("fill", "steelblue")
.attr("r", 3)
// Change the contents and position of the tooltip
.on("mouseenter", (evt, d) => {
const [mx, my] = d3.pointer(evt);
const tooltipText = `
<strong>${xAttr}</strong>: ${d[xAttr]}
<br>
<strong>${yAttr}</strong>: ${d[yAttr]}`;
tooltip
.style("top", `${my}px`)
.style("left", `${mx}px`)
.html(tooltipText);
})
.on("mouseout", () => tooltip.text());
return container;
}
{
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.style("overflow", "visible");
const g = svg
.append("g")
.attr("transform", `translate(${margin.top}, ${margin.right})`);
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${iheight})`);
g.append("g").call(d3.axisLeft(y));
const gPoints = g.append("g").attr("class", "gPoints");
const points = gPoints
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d) => x(d[xAttr]))
.attr("cy", (d) => y(d[yAttr]))
.attr("fill", "steelblue")
.attr("r", 3)
hover(points, invalidation);
return svg.node();
}
import {hover} with {tipcontent} from "@fil/hello-tippy"
function tipcontent(d) {
return `<strong>${xAttr}</strong>: ${d[xAttr]}
<br>
<strong>${yAttr}</strong>: ${d[yAttr]}`;
}
x = d3.scaleLinear()
.domain(d3.extent(data, d => d[xAttr]))
.range([0, iwidth])
y = d3.scaleLinear()
.domain(d3.extent(data, d => d[yAttr]))
.range([iheight, 0])
xAttr = "culmen_length_mm"
yAttr = "culmen_depth_mm"
iwidth = width - margin.left - margin.right
iheight = height - margin.top - margin.bottom
height = 300
width = 400
data = penguins
margin = ({left: 20, top: 20, right: 20, bottom: 20})
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.
