31:T47d,{ 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(); }32:T517,{ 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(); }33:T60b,{ 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`

${svg.node()}

` 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 = ` ${xAttr}: ${d[xAttr]}
${yAttr}: ${d[yAttr]}`; tooltip .style("top", `${my}px`) .style("left", `${mx}px`) .html(tooltipText); }) .on("mouseout", () => tooltip.text()); return container; }34:[] 2f:{"title":"How to add a tooltip in D3","cells":[{"id":0,"value":"# How to add a tooltip in D3\n\nHere are four different ways you can add a tooltip to a D3 chart, with a comparison of their pros and cons\n\n\nAlternative || complexity || popping time || can include HTML? || can have multiple lines || needs extra library\n-- || -- || -- || -- || --\n[Title element tag](https://observablehq.com/d/f2b84f54ab72432d#cell-12) || Very easy || slow || no || no || no\n[SVG text tag](https://observablehq.com/d/f2b84f54ab72432d#cell-70) || Somewhat easy || very quick || no (unless you use [foreignobject](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject))|| [kindof, but with tspan](https://observablehq.com/d/f2b84f54ab72432d#cell-90) || no\n[Separate HTML tag](https://observablehq.com/d/f2b84f54ab72432d#cell-131) || Harder || very quick || yes || yes|| no\n[Tippy Tooltip library](https://observablehq.com/d/f2b84f54ab72432d#cell-153) || Harder || very quick || yes || yes|| yes","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"## Tooltip using title element tag","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.top}, ${margin.right})`);\n\n g.append(\"g\")\n .call(d3.axisBottom(x))\n .attr(\"transform\", `translate(0, ${iheight})`);\n g.append(\"g\").call(d3.axisLeft(y));\n\n g.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", (d) => x(d[xAttr]))\n .attr(\"cy\", (d) => y(d[yAttr]))\n .attr(\"fill\", \"steelblue\")\n .attr(\"r\", 3)\n // TOOLTIP\n .call((circles) =>\n circles\n .append(\"title\")\n .text((d) => `${xAttr}: ${d[xAttr]}; ${yAttr}: ${d[yAttr]}`)\n );\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"## Tooltip using SVG text element","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"## Tooltip using SVG text Element with multiple lines","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"## Tooltip using HTML elements","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"## Tooltip using tippy","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"overflow\", \"visible\");\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.top}, ${margin.right})`);\n\n g.append(\"g\")\n .call(d3.axisBottom(x))\n .attr(\"transform\", `translate(0, ${iheight})`);\n g.append(\"g\").call(d3.axisLeft(y));\n const gPoints = g.append(\"g\").attr(\"class\", \"gPoints\");\n\n const points = gPoints\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", (d) => x(d[xAttr]))\n .attr(\"cy\", (d) => y(d[yAttr]))\n .attr(\"fill\", \"steelblue\")\n .attr(\"r\", 3)\n\n hover(points, invalidation);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"import {hover} with {tipcontent} from \"@fil/hello-tippy\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"function tipcontent(d) {\n return `${xAttr}: ${d[xAttr]} \n
\n ${yAttr}: ${d[yAttr]}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d[xAttr]))\n .range([0, iwidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d[yAttr]))\n .range([iheight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"xAttr = \"culmen_length_mm\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"yAttr = \"culmen_depth_mm\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"iwidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"iheight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"width = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"data = penguins","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"margin = ({left: 20, top: 20, right: 20, bottom: 20})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}