2e:null 2f:["$","title",null,{"children":"How to add a tooltip in D3 | John Alexis Guerra Gómez | Observable"}] 34: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(); }35: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(); }36: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; }37:[] 32:{"id":"f2b84f54ab72432d","slug":"how-to-add-a-tooltip-in-d3","title":"How to add a tooltip in D3","thumbnail":"f1b8f74690bac1be96a686ebd82b1bd01560a0808eb41f8a48fbaaea7c6368a2","access_level":"public","create_time":"$D2023-02-21T20:24:28.877Z","update_time":"$D2023-02-21T23:55:10.870Z","view_time":null,"first_public_time":"$D2023-02-21T23:52:36.512Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":187,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"b07e4b6e4b491e5f","slug":"observable-tricks","title":"Observable Tricks","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## Tooltip using title element tag","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"## Tooltip using SVG text element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"## Tooltip using SVG text Element with multiple lines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"## Tooltip using HTML elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"## Tooltip using tippy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"import {hover} with {tipcontent} from \"@fil/hello-tippy\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"function tipcontent(d) {\n return `${xAttr}: ${d[xAttr]} \n
\n ${yAttr}: ${d[yAttr]}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d[xAttr]))\n .range([0, iwidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d[yAttr]))\n .range([iheight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"xAttr = \"culmen_length_mm\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"yAttr = \"culmen_depth_mm\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"iwidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"iheight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"width = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"data = penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"margin = ({left: 20, top: 20, right: 20, bottom: 20})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"