25:["$","title",null,{"children":"Plot Tooltip v2 | Dheeraj Yss | Observable"}] 4b:T4ab,Plot.plot({ y: { grid: true, label: "↑ Unemployment (%)" }, marks: [ Plot.ruleY([0]), Plot.lineY(bls, { x: "date", y: "unemployment", z: "division", stroke: "lightgrey" }), Plot.lineY( bls, Plot.pointer({ x: "date", y: "unemployment", z: "division", //stroke: "division", // lines don't need an explicit z render: (index, scales, values, dimensions, context, next) => { // Filter and highlight the paths with the same *z* as the hovered point. const path = d3 .select(context.ownerSVGElement) .selectAll("[aria-label=line] path"); if (index.length) { const z = values.z[index[0]]; path .style("stroke", "black") .filter(([i]) => values.z[i] != z) .style("stroke", null) .raise(); } else path.style("stroke", null); return next(index, scales, values, dimensions, context); } }) ), Plot.tip( bls, Plot.pointer({ x: "date", y: "unemployment", z: "division" }) ) ] })4c:T5a6,Plot.plot({ width, height: 800, y: { label: "↑ Unemployed (thousands)" }, marks: [ Plot.line( industries, Plot.windowY({ x: "date", y: "unemployed", stroke: "lightgrey", z: "industry", k: 10 //marker: true }) ), Plot.line( industries, Plot.pointerX( Plot.windowY({ x: "date", y: "unemployed", z: "industry", k: 10, //stroke: "industry", // lines don't need an explicit z render: (index, scales, values, dimensions, context, next) => { // Filter and highlight the paths with the same *z* as the hovered point. const path = d3 .select(context.ownerSVGElement) .selectAll("[aria-label=line] path"); if (index.length) { const z = values.z[index[0]]; path .style("stroke", "black") .filter(([i]) => values.z[i] != z) .style("stroke", null) .raise(); } else path.style("stroke", null); return next(index, scales, values, dimensions, context); } }) ) ), Plot.tip( industries, Plot.pointerX( Plot.windowY({ x: "date", y: "unemployed", z: "industry", k: 10 }) ) ), Plot.ruleY([0]) ] })4d:T844,4e:T26fc,addTooltips = (chart, styles) => { // default hoverStyles const stroke_styles = { stroke: "blue", "stroke-width": 3 }; const fill_styles = { fill: "blue", opacity: 0.5 }; // default tool tip styles const defaultToolTipStyle = { position: "absolute", "border-radius": "9px", border: "1px solid #e7e7e7", "box-shadow": "0 4px 40px #0003", color: "#000000", background: "#ffffff8d", "text-align": "left", "font-family": "Lato, Helvetica Neue, Helvetica, Arial, Liberation Sans, sans-serif", "font-size": "16px", "pointer-events": "none", "backdrop-filter": "blur(20px)", "z-index": "20", transition: "0.9s opacity ease-out, 0.1s border-color ease-out, 0.2s left ease-out, 0.2s top ease-out" }; // default tool tip title styles const defaultTitleStyle = { background: "#f0f0f0a9", color: "inherit", padding: "8px 12px", "border-radius": "8px 8px 0 0" }; // default tool tip content styles const defaultContentStyle = { padding: "8px 12px", "border-radius": "8px 8px 0 0" }; // default tool tip name styles const defaultNameStyle = { "padding-right": "0.9em", "line-height": "16px", width: "fit-content", color: "inherit", "vertical-align": "baseline" }; // default tool tip title styles const defaultValueStyle = { "font-weight": "700", "text-align": "left", "white-space": "nowrap", color: "inherit", "vertical-align": "baseline" }; // Sets styles to {} if undefined exists. if (styles === undefined) styles = { tip: {}, title: {}, content: {}, name: {}, value: {} }; // Destructures styles into variables. let { tip, title, content, name, value, ...hoverStyles } = styles; let tooltip, titlestyle, contentstyle, namestyle, valuestyle; // Sets tooltip style to default or merges default with custom tip style, excluding position and pointer-events. if (tip === undefined || !Object.keys(tip).length) tooltip = Object.entries(defaultToolTipStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else tooltip = Object.entries({ ...defaultToolTipStyle, ...Object.fromEntries( Object.entries(tip).filter( ([key]) => !["position", "pointer-events"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip title styles to default or merges default with custom title style , only if background and color and font-family. if (title === undefined || !Object.keys(title).length) titlestyle = Object.entries(defaultTitleStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else titlestyle = Object.entries({ ...defaultTitleStyle, ...Object.fromEntries( Object.entries(title).filter(([key]) => ["background", "color", "font-family"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip content styles to default or merges default with custom content style , only if padding. if (content === undefined || !Object.keys(content).length) contentstyle = Object.entries(defaultContentStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else contentstyle = Object.entries({ ...defaultContentStyle, ...Object.fromEntries( Object.entries(content).filter(([key]) => ["padding"].includes(key)) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip name styles to default or merges default with custom name style , only if color and font-family. if (name === undefined || !Object.keys(name).length) namestyle = Object.entries(defaultNameStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else namestyle = Object.entries({ ...defaultNameStyle, ...Object.fromEntries( Object.entries(name).filter(([key]) => ["color", "font-family"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip value styles to default or merges default with custom value style , only if color and font-family. if (value === undefined || !Object.keys(value).length) valuestyle = Object.entries(defaultValueStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else valuestyle = Object.entries({ ...defaultValueStyle, ...Object.fromEntries( Object.entries(value).filter(([key]) => ["color", "font-family"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Selects all rectangle elements within the chart and sets their corner radius. // d3.select(chart).selectAll("rect").attr("rx", 2).attr("ry", 2); // Workaround if it's in a figure const type = d3.select(chart).node().tagName; // Set pointer events for legend let legends = d3.select(chart).select("div").selectAll("svg"); legends.style("cursor", "pointer"); // selecting svg element let wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); // Workaround if there's a legend.... const svgs = d3.select(chart).selectAll("svg"); if (svgs.size() > 1) wrapper = d3.select([...svgs].pop()); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // Set pointer events to visibleStroke if the fill is none (e.g., if it's a line) wrapper.selectAll("path").each(function () { if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); if (hoverStyles === undefined || !Object.keys(hoverStyles).length) hoverStyles = stroke_styles; } }); if (hoverStyles === undefined || !Object.keys(hoverStyles).length) hoverStyles = fill_styles; // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart).classed(id, true); // using a class selector so that it doesn't overwrite the ID // legend events legends.each(function () { const legend = d3.select(this); const legendFill = legend.attr("fill"); const legendTitle = legend.node().nextElementSibling ? legend.node().nextElementSibling.title : legend.node().parentNode.textContent.trim(); if (legendTitle) { legend .on("pointerenter pointermove", function () { const paths = wrapper.selectAll("path").filter((d, i, nodes) => { // (d, i, nodes) => d3.select(nodes[i]).attr("fill") === legendFill const title = d3.select(nodes[i]).attr("__title"); return ( title && title.toLowerCase().includes(legendTitle.toLowerCase()) ); }); paths.classed("legendHighlighted", true); paths.raise(); // Raise the paths }) .on("pointerout", function () { wrapper.selectAll("path").classed("legendHighlighted", false); // No need to lower the paths explicitly, as they will revert to their original order }); } }); // wrapper events wrapper.selectAll("title").each(function () { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen const t = title.text(); if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } // Mouse events parent .on("pointerenter pointermove", function (event) { const text = d3.select(this).attr("__title"); // Get the fill or stroke color of the hovered element const fillColor = d3.select(this).attr("fill"); const strokeColor = d3.select(this).attr("stroke"); // this means the hovered element let fillOrStroke = fillColor ? fillColor : strokeColor; // Use fillColor if it exists, otherwise use strokeColor; // Get the grandparent element, // Get the fill attribute of the grandparent element if (!fillOrStroke) fillOrStroke = d3.select(wrapper.node()).attr("fill"); const pointer = d3.pointer(event, d3.select("body").node()); // Create tooltip div and append it to the body if it doesn't already exist let tip = d3.select("body").select(".tooltip-container"); if (tip.empty()) { tip = d3 .select("body") .append("div") .attr("class", "tooltip-container") .attr("style", tooltip); } if (text) tip.call( hover, pointer, text.split("\n"), fillOrStroke, wrapper, titlestyle, contentstyle, namestyle, valuestyle ); else tip.selectAll("*").remove(); // Raise it d3.select(this).raise(); }) .on("pointerout", function () { // Remove the tooltip div from the DOM d3.select("body").select(".tooltip-container").remove(); // Lower it! d3.select(this).lower(); }); }); // Remove the tip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => d3.select("body").select(".tooltip-container").remove() ); // Define the styles for hovered element i.e hoverStyles const styleElement = document.createElement("style"); styleElement.innerHTML = ` .${id} .has-title { cursor: pointer; pointer-events: all; } .${id} .has-title:hover, .${id} .legendHighlighted { ${Object.entries( hoverStyles ) .map(([key, value]) => `${key}: ${value};`) .join(" ")} } `; chart.appendChild(styleElement); return chart; }4f:T1088,// Function to position the tooltip hover = ( tip, pos, text, fillOrStroke, wrapper, titlestyle, contentstyle, namestyle, valuestyle ) => { const factor = 0.5; const horizontal_offset = 40; const vertical_offset = 40; // Keep within the parent horizontally const tipSize = tip.node().getBoundingClientRect(); const grandparent = wrapper.node(); const grandparentsize = grandparent.getBoundingClientRect(); const [pointerLeft, PointerTop] = pos; // Get the tooltip's x, y, width and height const tipX = tipSize.x; const tipY = tipSize.y; const tipWidth = tipSize.width; const tipHeight = tipSize.height; const grandparentX = grandparentsize.x + window.scrollX; const grandparentY = grandparentsize.y + window.scrollY; const grandparentWidth = parseInt(grandparentsize.width); const grandparentHeight = parseInt(grandparentsize.height); const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; let left = pointerLeft; let top = PointerTop; let transform = `translate(${horizontal_offset}px, ${vertical_offset}px)`; // Check if tooltip exceeds grandparent or viewport width from the left if ( left + horizontal_offset * factor + tipWidth > grandparentX + grandparentWidth || tipX + tipWidth > viewportWidth ) transform = `translate(-${ horizontal_offset + tipWidth }px, ${vertical_offset}px)`; // Check if tooltip exceeds grandparent height from the top if ( top + vertical_offset * factor + tipHeight > grandparentY + grandparentHeight ) transform = `translate(${horizontal_offset}px, -${ vertical_offset + tipHeight * factor }px)`; // Check if tooltip exceeds both grandparent width and height if ( left + horizontal_offset * factor + tipWidth > grandparentX + grandparentWidth && top + vertical_offset * factor + tipHeight > grandparentY + grandparentHeight ) transform = `translate(-${horizontal_offset + tipWidth}px, -${ vertical_offset + tipHeight * factor }px)`; tip .style("opacity", 1) .style("pointer-events", "none") .style("left", `${left}px`) .style("top", `${top}px`) .style("transform", transform) .html( () => `

${text[0]}

${text .slice(1) .map((row, i) => { const cols = row.split(":"); let separator = i != 0 ? `` : ``; let tableRow = ` `; cols.forEach((col, index) => { if (index === 0) { tableRow += ``; } else { tableRow += ``; } }); return separator + tableRow + ""; }) .join("")}


	${col}	${col}

` ); }50:T2b8f,addTooltipsv201 = (styles = {}) => (index, scales, values, dimensions, context, next) => { // default hoverStyles const stroke_styles = { stroke: "blue", "stroke-width": 3 }; const fill_styles = { fill: "blue", opacity: 0.5 }; // default tool tip styles const defaultToolTipStyle = { position: "absolute", "border-radius": "9px", border: "1px solid #e7e7e7", "box-shadow": "0 4px 40px #0003", color: "#000000", background: "#ffffff8d", "text-align": "left", "font-family": "Lato, Helvetica Neue, Helvetica, Arial, Liberation Sans, sans-serif", "font-size": "16px", "pointer-events": "none", "backdrop-filter": "blur(20px)", "z-index": "20", transition: "0.9s opacity ease-out, 0.1s border-color ease-out, 0.2s left ease-out, 0.2s top ease-out" }; // default tool tip title styles const defaultTitleStyle = { background: "#f0f0f0a9", color: "inherit", padding: "8px 12px", "border-radius": "8px 8px 0 0" }; // default tool tip content styles const defaultContentStyle = { padding: "8px 12px", "border-radius": "8px 8px 0 0" }; // default tool tip name styles const defaultNameStyle = { "padding-right": "0.9em", "line-height": "16px", width: "fit-content", color: "inherit", "vertical-align": "baseline" }; // default tool tip title styles const defaultValueStyle = { "font-weight": "700", "text-align": "left", "white-space": "nowrap", color: "inherit", "vertical-align": "baseline" }; // Sets styles to {} if undefined exists. if (styles === undefined) styles = { tip: {}, title: {}, content: {}, name: {}, value: {} }; // Destructures styles into variables. let { tip, title, content, name, value, ...hoverStyles } = styles; let tooltipstyle, titlestyle, contentstyle, namestyle, valuestyle; // Sets tooltipstyle style to default or merges default with custom tip style, excluding position and pointer-events. if (tip === undefined || !Object.keys(tip).length) tooltipstyle = Object.entries(defaultToolTipStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else tooltipstyle = Object.entries({ ...defaultToolTipStyle, ...Object.fromEntries( Object.entries(tip).filter( ([key]) => !["position", "pointer-events"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip title styles to default or merges default with custom title style , only if background and color and font-family. if (title === undefined || !Object.keys(title).length) titlestyle = Object.entries(defaultTitleStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else titlestyle = Object.entries({ ...defaultTitleStyle, ...Object.fromEntries( Object.entries(title).filter(([key]) => ["background", "color", "font-family"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip content styles to default or merges default with custom content style , only if padding. if (content === undefined || !Object.keys(content).length) contentstyle = Object.entries(defaultContentStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else contentstyle = Object.entries({ ...defaultContentStyle, ...Object.fromEntries( Object.entries(content).filter(([key]) => ["padding"].includes(key)) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip name styles to default or merges default with custom name style , only if color and font-family. if (name === undefined || !Object.keys(name).length) namestyle = Object.entries(defaultNameStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else namestyle = Object.entries({ ...defaultNameStyle, ...Object.fromEntries( Object.entries(name).filter(([key]) => ["color", "font-family"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip value styles to default or merges default with custom value style , only if color and font-family. if (value === undefined || !Object.keys(value).length) valuestyle = Object.entries(defaultValueStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else valuestyle = Object.entries({ ...defaultValueStyle, ...Object.fromEntries( Object.entries(value).filter(([key]) => ["color", "font-family"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Selects all rectangle elements within the chart and sets their corner radius. // d3.select(chart).selectAll("rect").attr("rx", 2).attr("ry", 2); const chart = context.ownerSVGElement; const parentElement = d3.select(svg).node().parentElement; const { x, y } = values.channels; const dataX = { label: x.label, value: x.value[index[0]] }; const dataY = { label: y.label, value: y.value[index[0]] }; let px = values.x[index[0]], py = values.y[index[0]]; // Workaround if it's in a figure const type = d3.select(chart).node().tagName; // Set pointer events for legend let legends = d3.select(chart).select("div").selectAll("svg"); legends.style("cursor", "pointer"); // selecting svg element let wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); // Workaround if there's a legend.... const svgs = d3.select(chart).selectAll("svg"); if (svgs.size() > 1) wrapper = d3.select([...svgs].pop()); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // Set pointer events to visibleStroke if the fill is none (e.g., if it's a line) wrapper.selectAll("path").each(function () { if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); if (hoverStyles === undefined || !Object.keys(hoverStyles).length) hoverStyles = stroke_styles; } }); if (hoverStyles === undefined || !Object.keys(hoverStyles).length) hoverStyles = fill_styles; // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart).classed(id, true); // using a class selector so that it doesn't overwrite the ID // legend events legends.each(function () { const legend = d3.select(this); const legendFill = legend.attr("fill"); const legendTitle = legend.node().nextElementSibling ? legend.node().nextElementSibling.title : legend.node().parentNode.textContent.trim(); if (legendTitle) { legend .on("pointerenter pointermove", function () { const paths = wrapper.selectAll("path").filter((d, i, nodes) => { // (d, i, nodes) => d3.select(nodes[i]).attr("fill") === legendFill const title = d3.select(nodes[i]).attr("__title"); return ( title && title.toLowerCase().includes(legendTitle.toLowerCase()) ); }); paths.classed("legendHighlighted", true); paths.raise(); // Raise the paths }) .on("pointerout", function () { wrapper.selectAll("path").classed("legendHighlighted", false); // No need to lower the paths explicitly, as they will revert to their original order }); } }); let tooltip; // wrapper events wrapper.selectAll("title").each(function () { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen titles parent const t = title.text(); if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } // Mouse events parent .on("pointerenter pointermove", function (event) { const text = d3.select(this).attr("__title"); // Get the fill or stroke color of the hovered element const fillColor = d3.select(this).attr("fill"); const strokeColor = d3.select(this).attr("stroke"); // this means the hovered element let fillOrStroke = fillColor ? fillColor : strokeColor; // Use fillColor if it exists, otherwise use strokeColor; // Get the grandparent element, // Get the fill attribute of the grandparent element if (!fillOrStroke) fillOrStroke = d3.select(wrapper.node()).attr("fill"); const pointer = d3.pointer(event, d3.select("body").node()); // Create tooltip div and append it to the body if it doesn't already exist tooltip = d3.select("body").select(".tooltip-container"); if (tooltip.empty()) { tooltip = d3 .select("body") .append("div") .attr("class", "tooltip-container") .attr("style", tooltipstyle); } if (text) tooltip.call( hoverv201, pointer, px, py, text.split("\n"), fillOrStroke, wrapper, titlestyle, contentstyle, namestyle, valuestyle ); else tooltip.selectAll("*").remove(); // Raise it d3.select(this).raise(); }) .on("pointerout", function () { // Remove the tooltip div from the DOM d3.select("body").select(".tooltip-container").remove(); // Lower it! d3.select(this).lower(); }); }); // Remove the tooltip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => d3.select("body").select(".tooltip-container").remove() ); if (d3.select("body").select(".tooltip-container").empty()) { // Define the styles for hovered element i.e hoverStyles const styleElement = document.createElement("style"); styleElement.innerHTML = ` .${id} .has-title { cursor: pointer; pointer-events: all; } .${id} .has-title:hover, .${id} .legendHighlighted { ${Object.entries( hoverStyles ) .map(([key, value]) => `${key}: ${value};`) .join(" ")} } `; chart.appendChild(styleElement); } return next(index, scales, values, dimensions, context); }51:T1098,// Function to position the tooltip hoverv201 = ( tip, pos, px, py, text, fillOrStroke, wrapper, titlestyle, contentstyle, namestyle, valuestyle ) => { const factor = 0.5; const horizontal_offset = 40; const vertical_offset = 40; // Keep within the parent horizontally const tipSize = tip.node().getBoundingClientRect(); const grandparent = wrapper.node(); const grandparentsize = grandparent.getBoundingClientRect(); const [pointerLeft, PointerTop] = pos; // Get the tooltip's x, y, width and height const tipX = tipSize.x; const tipY = tipSize.y; const tipWidth = tipSize.width; const tipHeight = tipSize.height; const grandparentX = grandparentsize.x + window.scrollX; const grandparentY = grandparentsize.y + window.scrollY; const grandparentWidth = parseInt(grandparentsize.width); const grandparentHeight = parseInt(grandparentsize.height); const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; let left = pointerLeft; let top = PointerTop; let transform = `translate(${horizontal_offset}px, ${vertical_offset}px)`; // Check if tooltip exceeds grandparent or viewport width from the left if ( left + horizontal_offset * factor + tipWidth > grandparentX + grandparentWidth || tipX + tipWidth > viewportWidth ) transform = `translate(-${ horizontal_offset + tipWidth }px, ${vertical_offset}px)`; // Check if tooltip exceeds grandparent height from the top if ( top + vertical_offset * factor + tipHeight > grandparentY + grandparentHeight ) transform = `translate(${horizontal_offset}px, -${ vertical_offset + tipHeight * factor }px)`; // Check if tooltip exceeds both grandparent width and height if ( left + horizontal_offset * factor + tipWidth > grandparentX + grandparentWidth && top + vertical_offset * factor + tipHeight > grandparentY + grandparentHeight ) transform = `translate(-${horizontal_offset + tipWidth}px, -${ vertical_offset + tipHeight * factor }px)`; tip .style("opacity", 1) .style("pointer-events", "none") .style("left", `${left}px`) .style("top", `${top}px`) .style("transform", transform) .html( () => `

${text[0]}


	${col}	${col}

` ); }52:T214d,addTooltipsv202 = (styles = {}) => (index, scales, values, dimensions, context, next) => { const svg = context.ownerSVGElement; const parentElement = d3.select(svg).node().parentElement; const excludedAriaLabels = ["axis", "tip", "rule", "style"]; const ariaLabels = Array.from( new Set( d3 .select(svg) .selectAll("*") .nodes() .map((node) => node.getAttribute("aria-label")) .filter( (label) => label && !excludedAriaLabels.some((ariaLabel) => label.includes(ariaLabel)) ) ) ); // Get the first element or a fallback value if empty const firstLabel = ariaLabels.length > 0 ? ariaLabels[0] : null; const targetEleTag = firstLabel.includes("dot") ? "circle" : "path"; const targetElements = d3 .select(svg) .selectAll(`[aria-label=${firstLabel}] ${targetEleTag}`); if (!(index.length > 0)) { targetElements.classed("is-target", false); //targetElements.style("stroke", null).style("fill", null).attr("r", 3); d3.selectAll(".tooltip-container").remove(); return next(index, scales, values, dimensions, context); } const { x, y } = values.channels; const dataX = { label: x.label, value: x.value[index[0]] }; const dataY = { label: y.label, value: y.value[index[0]] }; const data = [dataX, dataY]; let px = values.x[index[0]], py = values.y[index[0]]; const tx = values.x[index[0]]; const ty = values.y[index[0]]; const targetElement = targetElements.filter( (i) => (values.x[i] == tx) & (values.y[i] == ty) ); // default hoverStyles const stroke_styles = { stroke: "blue", "stroke-width": 3 }; const fill_styles = { fill: "blue", opacity: 0.5 }; // default tool tip styles const defaultToolTipStyle = { position: "absolute", "border-radius": "9px", border: "1px solid #e7e7e7", "box-shadow": "0 4px 40px #0003", color: "#000000", background: "#ffffff8d", "text-align": "left", "font-family": "Lato, Helvetica Neue, Helvetica, Arial, Liberation Sans, sans-serif", "font-size": "16px", "pointer-events": "none", "backdrop-filter": "blur(20px)", "z-index": "20", transition: "0.9s opacity ease-out, 0.1s border-color ease-out, 0.2s left ease-out, 0.2s top ease-out" }; // default tool tip title styles const defaultTitleStyle = { background: "#f0f0f0a9", color: "inherit", padding: "8px 12px", "border-radius": "8px 8px 0 0" }; // default tool tip content styles const defaultContentStyle = { padding: "8px 12px", "border-radius": "8px 8px 0 0" }; // default tool tip name styles const defaultNameStyle = { "padding-right": "0.9em", "line-height": "16px", width: "fit-content", color: "inherit", "vertical-align": "baseline" }; // default tool tip title styles const defaultValueStyle = { "font-weight": "700", "text-align": "left", "white-space": "nowrap", color: "inherit", "vertical-align": "baseline" }; // Sets styles to {} if undefined exists. if (styles === undefined) styles = { tip: {}, title: {}, content: {}, name: {}, value: {} }; // Destructures styles into variables. let { tip, title, content, name, value, ...hoverStyles } = styles; let tooltipstyle, titlestyle, contentstyle, namestyle, valuestyle; // Sets tooltipstyle style to default or merges default with custom tip style, excluding position and pointer-events. if (tip === undefined || !Object.keys(tip).length) tooltipstyle = Object.entries(defaultToolTipStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else tooltipstyle = Object.entries({ ...defaultToolTipStyle, ...Object.fromEntries( Object.entries(tip).filter( ([key]) => !["position", "pointer-events"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip title styles to default or merges default with custom title style , only if background and color and font-family. if (title === undefined || !Object.keys(title).length) titlestyle = Object.entries(defaultTitleStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else titlestyle = Object.entries({ ...defaultTitleStyle, ...Object.fromEntries( Object.entries(title).filter(([key]) => ["background", "color", "font-family"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip content styles to default or merges default with custom content style , only if padding. if (content === undefined || !Object.keys(content).length) contentstyle = Object.entries(defaultContentStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else contentstyle = Object.entries({ ...defaultContentStyle, ...Object.fromEntries( Object.entries(content).filter(([key]) => ["padding"].includes(key)) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip name styles to default or merges default with custom name style , only if color and font-family. if (name === undefined || !Object.keys(name).length) namestyle = Object.entries(defaultNameStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else namestyle = Object.entries({ ...defaultNameStyle, ...Object.fromEntries( Object.entries(name).filter(([key]) => ["color", "font-family"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Sets tool tip value styles to default or merges default with custom value style , only if color and font-family. if (value === undefined || !Object.keys(value).length) valuestyle = Object.entries(defaultValueStyle) .map(([key, value]) => `${key}: ${value};`) .join(" "); else valuestyle = Object.entries({ ...defaultValueStyle, ...Object.fromEntries( Object.entries(value).filter(([key]) => ["color", "font-family"].includes(key) ) ) }) .map(([key, value]) => `${key}: ${value};`) .join(" "); // Selects all rectangle elements within the chart and sets their corner radius. // d3.select(chart).selectAll("rect").attr("rx", 2).attr("ry", 2); // Add a unique id to the chart for styling const id = id_generator(); // Get the fill or stroke color of the hovered element const fillColor = targetElement.attr("fill"); const strokeColor = targetElement.attr("stroke"); // this means the hovered element const fillOrStroke = fillColor === "none" || fillColor === null ? strokeColor || d3.select(svg).attr("fill") // Use strokeColor if available, otherwise fallback to SVG fill : fillColor; if ( ["none", null].includes(fillColor) && (!hoverStyles || !Object.keys(hoverStyles).length) ) hoverStyles = stroke_styles; if (!hoverStyles || !Object.keys(hoverStyles).length) { hoverStyles = fill_styles; } targetElements .classed("is-target", true) // Add class to matched elements .filter((i) => values.x[i] != tx || values.y[i] != ty) .classed("is-target", false) // Remove is-target from unmatched elements .raise(); // Create or select the tooltip div let tooltip = d3.select(parentElement).select(".tooltip-container"); if (tooltip.empty()) { tooltip = d3 .select(parentElement) .append("div") .attr("class", "tooltip-container") .attr("style", tooltipstyle); } d3.select(svg).on("mousemove", function (event) { const pointer = d3.pointer(event); // Get pointer position tooltip.call( hoverv202, pointer, data, fillOrStroke, svg, titlestyle, contentstyle, namestyle, valuestyle ); }); return next(index, scales, values, dimensions, context); }53:Tbc5,// Function to position the tooltip hoverv202 = ( tip, pos, data, fillOrStroke, svg, titlestyle, contentstyle, namestyle, valuestyle ) => { const factor = 0.5; const horizontal_offset = 20; const vertical_offset = 20; // Keep within the parent horizontally const tipSize = tip.node().getBoundingClientRect(); const grandparentsize = svg.getBoundingClientRect(); const [pointerLeft, PointerTop] = pos; // Get the tooltip's x, y, width and height const tipX = tipSize.x; const tipY = tipSize.y; const tipWidth = tipSize.width; const tipHeight = tipSize.height; const grandparentX = grandparentsize.x + window.scrollX; const grandparentY = grandparentsize.y + window.scrollY; const grandparentWidth = parseInt(grandparentsize.width); const grandparentHeight = parseInt(grandparentsize.height); const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; let left = pointerLeft; let top = PointerTop; let transform = `translate(${horizontal_offset}px, ${vertical_offset}px)`; //console.log(left, top); tip .style("opacity", 1) .style("pointer-events", "none") .style("left", `${left}px`) .style("top", `${top}px`) .style("transform", transform) .html( () => `

${"text"}

${data .map((row, i) => { let separator = i != 0 ? `` : ``; let tableRow = ` `; return separator + tableRow + ""; }) .join("")}


	${row.label}	${row.value}

` ); }54:[{"id":"7f7f6aa2c739f134c0fabce5630763cb4e10c397e1d6cc20ce2feac93852705a4563a4a25223d24f37208c8e58cd22d1eb7e84b64118088e9b1123135b9f682c","href":"https://static.observableusercontent.com/files/7f7f6aa2c739f134c0fabce5630763cb4e10c397e1d6cc20ce2feac93852705a4563a4a25223d24f37208c8e58cd22d1eb7e84b64118088e9b1123135b9f682c","name":"industries.csv","type":"text/csv","lastModified":1742969517737.35,"size":53919},{"id":"cf77aaa2e0dab4123d57f8421210e5fa6955d75017369c93e3086b7369e4a040e398ed494b71d541a9c0c72575ac29cdc9e7038b6ae681cc1d761fec2c99a85f","href":"https://static.observableusercontent.com/files/cf77aaa2e0dab4123d57f8421210e5fa6955d75017369c93e3086b7369e4a040e398ed494b71d541a9c0c72575ac29cdc9e7038b6ae681cc1d761fec2c99a85f","name":"bls-metro-unemployment.csv","type":"text/csv","lastModified":1742972118771.8,"size":406211}] 47:{"id":"ec848a669ffaca05","slug":"plot-tooltip-v2","title":"Plot Tooltip v2","thumbnail":"1ae01ee1f541d6ae9c0e97c139e62c8e06f1168e97cb45d100e3512062448bff","access_level":"public","create_time":"$D2024-08-05T05:28:36.534Z","update_time":"$D2025-03-29T13:14:51.559Z","view_time":null,"first_public_time":"$D2024-08-05T05:28:36.534Z","has_unpublished_edits":null,"fork":{"id":"67d1b2c32f1883c4","slug":"plot-tooltip","title":"Plot Tooltip","owner":{"id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5c22e83bd8b9e1b7","login":"dheeraj-yss","name":"Dheeraj Yss","avatar_url":"https://avatars-next.observableusercontent.com/c286afcdd6699461441422eba25928616a5133c775a1bf2e5f93b442ae6ec6ef","tier":"free_2026","bio":"Seasoned SQL, JS Dev | Database | MS SQL Server | T-SQL | Azure | Python |","followed_by_you":false,"follows_you":false},"version":1148,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b31e9ef9057f3c23","login":"dheeraj-yss","name":"Dheeraj Yss","avatar_url":"https://avatars-next.observableusercontent.com/de1ebf4b9de23c5ab6a267dccdeccad084c321895042a12b64cd3c664ea81a6c","tier":null,"bio":"Seasoned SQL, JS Dev | Database | MS SQL Server | T-SQL | Azure | Python |","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"5c22e83bd8b9e1b7","login":"dheeraj-yss","name":"Dheeraj Yss","avatar_url":"https://avatars-next.observableusercontent.com/c286afcdd6699461441422eba25928616a5133c775a1bf2e5f93b442ae6ec6ef","tier":"free_2026","role":"editor"},{"type":"individual","id":"b31e9ef9057f3c23","login":"dheeraj-yss","name":"Dheeraj Yss","avatar_url":"https://avatars-next.observableusercontent.com/de1ebf4b9de23c5ab6a267dccdeccad084c321895042a12b64cd3c664ea81a6c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plot Tooltip v2","cells":[{"id":0,"value":"# Plot Tooltip v2\n## Two approaches for easily adding tooltips to your plots\n\n

**Update June 2023:** Rejoice 🎉🎉🎉! Plot now has built in support for [pointer interactions](https://observablehq.com/plot/interactions/pointer) using the [tip mark](https://observablehq.com/plot/marks/tip). That's a much more reliable and robust way to create tooltips.\n

\nThis notebook will no longer be updated (but it _will not_ be removed)

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"## Guide","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":673,"value":"- Please use \\n in title to treat as rows,\n- Use : to separate columns.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":479,"value":"## Tooltips on all plots\nWant to add tooltips to _all_ of your plots? Import `plot` from _this notebook_, then simply set a `title` attribute for any mark in your plot call (_note, this approach only works with `Plot.plot()` calls, not `Plot.MARK().plot()`_)\n\n~~~js\n// Import Plot with additional tooltip functionality from this notebook\nimport {Plot} from \"@dheerajyss/plot-tooltip-v2\"\n~~~\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"Plot.plot({\n marks: [\n Plot.dot(data, {\n x: \"bill_length\",\n y: \"bill_depth\",\n title: (d) =>\n `${d.island} \\n bill depth: ${d.bill_depth} \\n bill length: ${d.bill_length}` // \\n makes a new line\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"## To customize the style of the hovered element, specify a `tooltip` property with key-value pairs specifying the desired styles in your `Plot` call:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"Plot.plot({\n marks: [\n Plot.dot(data, {\n x: \"bill_length\",\n y: \"bill_depth\",\n title: (d) =>\n `${d.island} \\n bill depth: ${d.bill_depth} \\n bill length: ${d.bill_length}` // \\n makes a new line\n })\n ],\n tooltip: {\n fill: \"red\",\n stroke: \"blue\",\n r: 8,\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"## To customize the style of the tip element and everything, specify a tip property with key-value pairs specifying the desired styles in your Plot call:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":819,"value":"Plot.plot({\n marks: [\n Plot.dot(data, {\n x: \"bill_length\",\n y: \"bill_depth\",\n title: (d) =>\n `${d.island} \\n bill depth: ${d.bill_depth} \\n bill length: ${d.bill_length}` // \\n makes a new line\n })\n ],\n tooltip: {\n fill: \"red\",\n stroke: \"blue\",\n r: 8,\n tip: {\n background: \"#ffffff8d\",\n color: \"black\",\n \"backdrop-filter\": \"blur(50px)\"\n },\n title: {\n background: \"#f0f0f0a9\",\n color: \"red\",\n \"font-family\": \"Lucida Console, Courier New, monospace\"\n },\n content: {\n padding: \"0\"\n },\n name: {\n // color: \"blue\",\n \"font-family\": \"Lucida Console, Courier New\"\n },\n value: {\n color: \"orange\",\n \"font-family\": \"Lucida Console\"\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"_(many thanks to [@fil](https://observablehq.com/@fil) for this implementation!_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"## Tooltips on a single plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"Alternatively, to add tooltips to a _single_ plot, you can import the `addTooltips` function and pass your plot to it.\n\n~~~js\n// Import into your own notebook first\nimport {addTooltips} from \"@dheerajyss/plot-tooltip-v2\"\n~~~\n\n_(many thanks to [@fil](https://observablehq.com/@fil) for the idea, [prior art](https://observablehq.com/@fil/experimental-plot-tooltip-01), and help debugging!)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"// Pass any plot to addTooltips -- just set the `title` attribute for your marks!\naddTooltips(\n Plot.dot(penguins, {\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n title: (d) =>\n `${d.island} \\n culmen depth: ${d.culmen_depth_mm} \\n culmen length: ${d.culmen_length_mm}` // \\n makes a new line\n }).plot()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"addTooltips(\n Plot.plot({\n marks: [\n Plot.dot(data, {\n x: \"bill_length\",\n y: \"bill_depth\",\n title: (d) =>\n `${d.island} \\n bill depth: ${d.bill_depth} \\n bill length: ${d.bill_length}` // \\n makes a new line\n })\n ],\n tooltip: {\n fill: \"red\",\n stroke: \"blue\",\n r: 8\n }\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"Want to customize what a hovered element looks like? Pass in a `{hoverStyles}` object:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"addTooltips(\n Plot.rectY(\n data,\n Plot.binX(\n { y: \"count\", title: (elems) => `rows\\n${elems.length}` },\n { x: \"body_mass\", thresholds: 20 }\n )\n ).plot(),\n // Set styles for the hovered element\n { fill: \"gray\", opacity: 0.5, \"stroke-width\": \"3px\", stroke: \"red\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"addTooltips(\n Plot.dot(\n data,\n Plot.binX(\n { y: \"count\", title: (elems) => `count\\n${elems.length}` },\n { x: \"body_mass\", thresholds: 20 }\n )\n ).plot(),\n // Set styles for the hovered element\n { fill: \"gray\", opacity: 0.5, \"stroke-width\": \"3px\", stroke: \"red\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"ProTip 😉! You may want to adjust the `paddingTop` of your plot to ensure you can see the tooltip:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"addTooltips(\n Plot.barX(data, {\n x: \"body_mass\",\n fill: \"island\",\n title: (d) => d.island + \"\\n\" + d.bill_length\n }).plot({ \n // caption: \"test\", \n style: { paddingTop: 30 }, \n width \n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"addTooltips(\n Plot.plot({\n y: {\n label: \"↑ Unemployed (thousands)\"\n },\n marks: [\n Plot.areaY(\n industries,\n Plot.stackY({\n x: \"date\",\n y: \"unemployed\",\n fill: \"industry\",\n z: \"industry\",\n title: (d) => `industry\\n${d.industry}`,\n order: \"max\",\n reverse: true,\n stroke: \"#ddd\"\n })\n ),\n Plot.ruleY([0])\n ],\n style: {\n pointerEvents: \"all\"\n },\n color: {\n legend: true,\n columns: \"110px\",\n width: 640\n }\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"Plot.plot({\n width,\n height: 800,\n y: {\n label: \"↑ Unemployed (thousands)\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(industries, {\n x: \"date\",\n y: \"unemployed\",\n stroke: \"lightgrey\",\n z: \"industry\",\n marker: true\n }),\n Plot.line(\n industries,\n Plot.pointer({\n x: \"date\",\n y: \"unemployed\",\n stroke: \"industry\"\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"addTooltips(\n Plot.plot({\n width,\n height: 600,\n y: {\n label: \"↑ Unemployed (thousands)\"\n },\n marks: [\n Plot.line(industries, {\n x: \"date\",\n y: \"unemployed\",\n stroke: \"industry\",\n z: \"industry\",\n title: (d) =>\n `${d.industry}\\ndate:${d3\n .timeFormat(\"%B %d, %Y\")(d.date)\n .trim()}\\nunemployed:${d.unemployed}`,\n marker: true\n }),\n Plot.ruleY([0])\n ]\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"Plot.plot({\n width,\n height: 500,\n marks: [\n Plot.dot(penguins, {\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n title: (d) =>\n `${d.island} \\n culmen depth: ${d.culmen_length_mm} \\n culmen length: ${d.culmen_depth_mm}` // \\n makes a new line\n }),\n Plot.dot(\n penguins,\n Plot.pointer({\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n z: \"species\",\n render: addTooltipsv201({\n fill: \"red\",\n stroke: \"blue\",\n r: 8\n })\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"Works with a legend (now)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"import { data as brandData } from \"@observablehq/plot-cheatsheets-marks\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"addTooltips(\n Plot.plot({\n marks: [\n Plot.cell(brandData, {\n x: \"date\",\n y: \"brand\",\n fill: \"value\",\n title: (d) => `${d.brand}\\nvalue:${d.value}`\n })\n ],\n color: { scheme: \"blues\", legend: true, reverse: false },\n marginLeft: 100,\n x: { tickFormat: null },\n width: 578\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"# Tooltip customization example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":680,"value":"Plot.plot({\n marks: [\n Plot.barY(alphabet, {\n x: \"letter\",\n y: \"frequency\",\n sort: { x: \"y\", reverse: true },\n title: (d) => `${d.letter} \\n frequency:${d.frequency}`\n }),\n Plot.ruleY([0])\n ],\n tooltip: {\n fill: \"red\",\n stroke: \"black\",\n tip: {\n background: \"#ffffff8d\",\n color: \"black\",\n \"backdrop-filter\": \"blur(50px)\"\n },\n title: {\n background: \"#f0f0f0a9\",\n color: \"red\",\n \"font-family\": \"Lucida Console, Courier New, monospace\"\n },\n content: {\n padding: \"0\"\n },\n name: {\n color: \"yellow\",\n \"font-family\": \"Lucida Console, Courier New\"\n },\n value: {\n color: \"orange\",\n \"font-family\": \"Lucida Console\"\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"$4d","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"Plot.plot({\n width,\n height: 500,\n marks: [\n Plot.dot(penguins, {\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\"\n }),\n Plot.dot(\n penguins,\n Plot.pointer({\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n z: \"species\",\n render: addTooltipsv202({\n fill: \"red\",\n stroke: \"blue\",\n r: 8\n })\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1078,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"// To generate a unique ID for each chart so that they styles only apply to that chart\nid_generator = () => {\n var S4 = function () {\n return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);\n };\n return \"a\" + S4() + S4();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"// automatically add tooltips to every Plot in a notebook\n// this allows users to do import {Plot} from \"@dheerajyss/plot-tooltip-v2\"\n// Plot = tooltipPlugin(await require(\"@observablehq/plot\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"// import { Plot } from \"@dheerajyss/observablehq-notebook-plugins-manager\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"tooltipPlugin = (Plot) => {\n const { plot } = Plot;\n Plot.plot = ({ tooltip, ...options }) => addTooltips(plot(options), tooltip);\n return Plot;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"import { data } from \"@observablehq/plot-exploration-penguins\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"industries = await FileAttachment(\"industries.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"industries","database":"$undefined"},{"id":984,"value":"bls = FileAttachment(\"bls-metro-unemployment.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"bls","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W54","stdlib":"1"}} 24:null