2f: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; }30:T1e16,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function LineChart( data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat = d3.format("2s"), percent_format, yLabel, // a label for the y-axis zDomain, // array of z-values color, // = "currentColor", // stroke color of line, as a constant or a function of *z* strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply" // blend mode of lines } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, (d) => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [d3.min(Y), d3.max(Y)]; if (zDomain === undefined) zDomain = Z; // zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length); //filter((i) => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80, "0f"); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. const T = title === undefined ? Z : title === null ? null : d3.map(data, title); // Construct a line generator. const line = d3 .line() .defined((i) => D[i]) .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", (event) => event.preventDefault()); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("font-size", "12.5px") .select(".domain") .remove(); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", "12.5px") .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("font-size", "12.5px") .attr("x", -marginLeft) .attr("y", 10) // .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); svg .append("line") .attr("x1", marginLeft) .attr("y1", yScale(0)) .attr("x2", width - marginRight) .attr("y2", yScale(0)) .attr("stroke-width", 1) .attr("stroke", "black"); const serie = svg .append("g") .selectAll("g") .data(d3.group(I, (i) => Z[i])) .join("g"); const path = serie .append("path") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", strokeOpacity) .style("mix-blend-mode", "multiply") .attr("d", ([, I]) => line(I)); serie .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("text") .data(([, I]) => I) .join("text") .attr("dy", "0.35em") .attr("x", (i) => xScale(X[i])) .attr("y", (i) => yScale(Y[i])) .text((i) => yFormat(Y[i])) .call((text) => text .filter((_, j, I) => j === I.length - 1) .append("tspan") .attr("font-weight", "bold") .text((i) => ` ${Z[i]}`) ) .call((text) => text.clone(true)) .attr("fill", "none"); const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 2.5); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, (i) => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym) ); // closest point path .style("stroke", ([z]) => (Z[i] === z ? null : "#ddd")) .filter(([z]) => Z[i] === z) .raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) { const box = dot .selectAll("path") .data([,]) .join("path") .attr("class", "tooltip"); const label = dot .selectAll("text") .data([,]) .join("text") .call((text) => text .selectAll("tspan") .data(`${T[i]}`.split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => (i ? null : "bold")) .text((d) => d) ) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .attr("y", -8); const { x, y, width: w, height: h } = label.node().getBBox(); box.attr( "d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z` ); const hbw = w / 2 + 10; const hbh = h / 2 + 10; const limitW = xScale(X[X.length - 1]); const switchHW = limitW - hbw; const tooltipOver = `M${-hbw},-5H-5l5,5l5,-5H${hbw}v${-hbh * 2}h-${ 2 * hbw }z`; const tooltipUnder = `M${-hbw},5H-5l5,-5l5,5H${hbw}v${hbh * 2}h-${ 2 * hbw }z`; const tooltipLeft = `M-5,${-hbh}V-5l5,5l-5,5V${hbh}H${-hbw * 2}V-${hbh}z`; const tooltipRight = `M5,${-hbh}V-5l-5,5l5,5V${hbh}H${hbw * 2}V-${hbh}z`; box.attr( "d", xm > switchHW ? tooltipLeft : xm < hbw ? tooltipRight : tooltipUnder ); const shiftLabelX = xm > switchHW ? -hbw : xm < hbw ? hbw : 0; const shiftLabelY = xm > switchHW || xm < hbw ? y - h / 2 + 15 : 15 - y; label.attr("transform", `translate(${shiftLabelX},${shiftLabelY})`); } svg.property("value", O[i]).dispatch("input", { bubbles: true }); } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", "multiply").style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } return Object.assign(svg.node(), { value: null }); }31:T53b, 32:[{"id":"fe0b5c4722eed5b0573cf9d1911a50b0f0f7c4444c024b45eb0f3327cdc1e468630c6f66911399ebe00234d1d168d8c62c6d12913188263b6da027efca4f9194","href":"https://static.observableusercontent.com/files/fe0b5c4722eed5b0573cf9d1911a50b0f0f7c4444c024b45eb0f3327cdc1e468630c6f66911399ebe00234d1d168d8c62c6d12913188263b6da027efca4f9194","name":"property_crime_rate_by_state.csv","type":"text/csv","lastModified":1681415691744.773,"size":38102}] 2d:{"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.","pinned":false,"hidden":false,"mode":"md"},{"id":324,"value":"In Observable Plot I'm able to easily build a multi-series line chart and highlight the case that I'm most interested in. I'm not, however, able to make tooltips that highlight the series and any individual value.\n\nIf I use LineChart in D3, I can implement the tooltips as planned, but I can't change the color of a single series.\n\nThanks for your help!\n","pinned":false,"hidden":false,"mode":"md"},{"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":"$2f","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":314,"value":"attempt = LineChart(rate, {\n x: (d) => d.year,\n y: (d) => d.rate,\n z: (d) => d.state,\n yLabel: \"↑ Unemployment (%)\",\n width,\n height: 500,\n color: (d) => (d[0] == \"California\" ? \"red\" : \"steelblue\"), // THIS is where things seem to go unexpectedly wrong.\n title: (d) => `${d.state} \\n ${d.rate}`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"rate = FileAttachment(\"property_crime_rate_by_state.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"$31","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}