25:["$","title",null,{"children":"Tooltip (D3 Convention) | Peeti | Observable"}] 49:T67e,tooltip = (selectionGroup, tooltipDiv) => { selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); setContents(d3.select(this).datum(), tooltipDiv); setStyle(d3.select(this)); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + margin.left, mouseY + margin.top); } function handleMouseleave() { // do things like hide the tooltip // reset the style of the element being hovered on hideTooltip(); resetStyle(d3.select(this)); } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > height / 2 ? `${height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ); } }4a:[] 29:{"id":"23a95c3236e93460","slug":null,"title":"Tooltip (D3 Convention)","thumbnail":"246646abba25da04a01deb006dd362927b88735abb4a51dc62c8137c347380c2","access_level":"public","create_time":"$D2023-02-09T01:10:20.069Z","update_time":"$D2023-02-09T01:10:20.069Z","view_time":null,"first_public_time":"$D2023-02-09T01:10:20.069Z","has_unpublished_edits":null,"fork":{"id":"4c7302af3b6a0b9b","slug":"tooltip-d3-convention","title":"Tooltip (D3 Convention)","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a9bf89821413483c","login":"peeti-ucberkeley","name":"Peeti","avatar_url":"https://avatars-next.observableusercontent.com/fdd6b259d8c38774bbc979bf51c5d60060653a9e70bc138e8f0562606bc91782","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":192,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"579bf6a59bb2b176","login":"peeti-ucberkeley","name":"Peeti","avatar_url":"https://avatars-next.observableusercontent.com/fdd6b259d8c38774bbc979bf51c5d60060653a9e70bc138e8f0562606bc91782","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"579bf6a59bb2b176","login":"peeti-ucberkeley","name":"Peeti","avatar_url":"https://avatars-next.observableusercontent.com/fdd6b259d8c38774bbc979bf51c5d60060653a9e70bc138e8f0562606bc91782","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tooltip (D3 Convention)","cells":[{"id":0,"value":"md`# Tooltip (D3 Convention)\n\nThis version of a Tooltip uses the D3JS convention of [\\`selection.call()\\`](https://github.com/d3/d3-selection#selection_call) to register the Tooltip's behavior. This is an improvement on my original version of a [Tooltip Component](https://observablehq.com/@clhenrick/tooltip-component).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"demo = {\n const container = d3.select(\n html`

${tooltipTemplate}

`\n );\n\n const tooltipDiv = container.select(\".tooltip\");\n\n const svg = container.append(\"svg\").attr(\"viewBox\", `0 0 ${width} ${height}`);\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`)\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", 5)\n .attr(\"fill\", \"#333\")\n .call(tooltip, tooltipDiv);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"tooltipId = DOM.uid().id","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"tooltipTemplate = html`

\n ${tooltipStyles}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"Feel free to override these helper functions and constants to your liking.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"function setContents(datum, tooltipDiv) {\n // customize this function to set the tooltip's contents however you see fit\n tooltipDiv\n .selectAll(\"p\")\n .data(Object.entries(datum))\n .join(\"p\")\n .filter(([key, value]) => value !== null && value !== undefined)\n .html(\n ([key, value]) =>\n `${key}: ${\n typeof value === \"object\" ? value.toLocaleString(\"en-US\") : value\n }`\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"function resetStyle(selection) {\n selection.attr(\"fill\", \"#333\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"function setStyle(selection) {\n selection.attr(\"fill\", \"magenta\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"tooltipStyles = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"// padding between the tooltip and mouse cursor\nMOUSE_POS_OFFSET = 8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`## Chart Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"data = new Array(50).fill(undefined).map((d, i) => ({\n x: Math.floor(Math.random() * (width - margin.left - margin.right)),\n y: Math.floor(Math.random() * (height - margin.top - margin.bottom)),\n id: i\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3-selection@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null