31:Td32,addTooltips = (chart, hover_styles = { fill: "blue", opacity: 0.5 }) => { let styles = hover_styles; const line_styles = { stroke: "blue", "stroke-width": 4 }; // Workaround if it's in a figure const type = d3.select(chart).node().tagName; const wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // Set pointer events to visibleStroke if the fill is none (e.g., if its a line) wrapper.selectAll("path").each(function (data, index, nodes) { // For line charts, set the pointer events to be visible stroke if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); styles = _.isEqual(hover_styles, { fill: "blue", opacity: 0.5 }) ? line_styles : hover_styles; } }); const tip = wrapper .selectAll(".hover-tip") .data([""]) .join("g") .attr("class", "hover") .style("pointer-events", "none") .style("text-anchor", "middle"); // 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 .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("mousemove", function (event) { const text = d3.select(this).attr("__title"); const pointer = d3.pointer(event, wrapper.node()); if (text) tip.call(hover, pointer, text.split("\n")); else tip.selectAll("*").remove(); // Raise it // d3.select(this).raise(); // Keep within the parent horizontally const tipSize = tip.node().getBBox(); if (pointer[0] + tipSize.x < 0) tip.attr( "transform", `translate(${tipSize.width / 2}, ${pointer[1] + 7})` ); else if (pointer[0] + tipSize.width / 2 > wrapper.attr("width")) tip.attr( "transform", `translate(${wrapper.attr("width") - tipSize.width / 2}, ${ pointer[1] + 7 })` ); }) .on("mouseout", function (event) { tip.selectAll("*").remove(); // Lower it! // d3.select(this).lower(); }); }); // Remove the tip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => tip.selectAll("*").remove()); // Add styles const style_string = Object.keys(styles) .map((d) => { return `${d}:${styles[d]};`; }) .join(""); // Define the styles const style = html``; chart.appendChild(style); return chart; }32:T53b, 33:[{"id":"fe0b5c4722eed5b0573cf9d1911a50b0f0f7c4444c024b45eb0f3327cdc1e468630c6f66911399ebe00234d1d168d8c62c6d12913188263b6da027efca4f9194","href":"https://static.observableusercontent.com/files/fe0b5c4722eed5b0573cf9d1911a50b0f0f7c4444c024b45eb0f3327cdc1e468630c6f66911399ebe00234d1d168d8c62c6d12913188263b6da027efca4f9194","name":"property_crime_rate_by_state.csv","type":"text/csv","lastModified":1638464257247.41,"size":38102}] 2f:{"title":"Property Crime Rates by State, 1985- 2020","cells":[{"id":0,"value":"# Property Crime Rates by State, 1985- 2020","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"This chart shows property crime rates by state, using data from the FBI's [Uniform Crime Reports.](https://crime-data-explorer.app.cloud.gov/\nhttps://s3-us-gov-west-1.amazonaws.com/cg-d4b776d0-d898-4153-90c8-8336f86bdfec/estimated_crimes_1979_2020.csv)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"rate = FileAttachment(\"property_crime_rate_by_state.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"addTooltips(\n Plot.plot({\n y: {\n label: \"Property Crime Rate per 100,000 Residents\"\n },\n x: {tickFormat: \"0f\"},\n color: {\n domain: [false, true],\n range: [\"#ccc\", \"red\"]\n }, \n marks: [\n Plot.line(rate, {\n x: \"year\",\n y: \"rate\",\n sort: highlight,\n stroke: highlight,\n strokeOpacity: 1,\n z: \"state\",\n title: \"state\",\n }),\n Plot.ruleY([0])\n ]\n }))\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"// Function to position the tooltip\nhover = (tip, pos, text) => {\n const side_padding = 10;\n const vertical_padding = 5;\n const vertical_offset = 15;\n\n // Empty it out\n tip.selectAll(\"*\").remove();\n\n // Append the text\n tip\n .style(\"text-anchor\", \"middle\")\n .style(\"pointer-events\", \"none\")\n .attr(\"transform\", `translate(${pos[0]}, ${pos[1] + 7})`)\n .selectAll(\"text\")\n .data(text)\n .join(\"text\")\n .style(\"dominant-baseline\", \"ideographic\")\n .text((d) => d)\n .attr(\"y\", (d, i) => (i - (text.length - 1)) * 15 - vertical_offset)\n .style(\"font-weight\", (d, i) => (i === 0 ? \"bold\" : \"normal\"));\n\n const bbox = tip.node().getBBox();\n\n // Add a rectangle (as background)\n tip\n .append(\"rect\")\n .attr(\"y\", bbox.y - vertical_padding)\n .attr(\"x\", bbox.x - side_padding)\n .attr(\"width\", bbox.width + side_padding * 2)\n .attr(\"height\", bbox.height + vertical_padding * 2)\n .style(\"fill\", \"white\")\n .style(\"stroke\", \"#d3d3d3\")\n .lower();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"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"},{"id":255,"value":"function highlight(d) {\n return /California/.test(d.state);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"$32","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}