addHoverTip = (x, y, chartData, key = "rate", dx = 0) => (chart) => { const hoverTip = chart.append("g").style("opacity", 0).node(); const boxTranslate = `translate(10, -${17 * 4 + 10})`; d3.select(hoverTip).append( () => svg` [[date]] Positive: Negative: Total: Rate: [[x]]% [[x]]% [[x]]% [[x]]% ` ); chart .on("mousemove", (e) => { const cursorDate = x.invert(e.offsetX + dx); const predicate = (d) => dateFns.isSameDay(d.date, cursorDate); const hit = data.find(predicate); if (!hit) { hoverTip.style.opacity = 0; return; } hoverTip.style.opacity = 1; hoverTip.querySelector( ".date" ).textContent = hit.date.toLocaleDateString(); hoverTip.querySelector( ".positive" ).textContent = hit.positive.toLocaleString(); hoverTip.querySelector( ".negative" ).textContent = hit.negative.toLocaleString(); hoverTip.querySelector(".total").textContent = ( hit.positive + hit.negative ).toLocaleString(); hoverTip.querySelector(".rate").textContent = (rates.find(predicate).rate * 100).toFixed(2) + "%"; const yPos = y(chartData.find(predicate)[key]); const translate = `translate(${x(hit.date)}, ${yPos})`; const scaleY = (yPos - y.range()[0]) / (y.range()[1] - y.range()[0]) > 0.5 ? -1 : 1; const scale = `scale(1, ${scaleY})`; hoverTip.setAttribute("transform", translate + " " + scale); hoverTip .querySelector(".box") .setAttribute( "transform", scaleY < 0 ? scale + `translate(10, 14)` : boxTranslate ); }) .on("mouseleave", () => { hoverTip.style.opacity = 0; }); }

Purpose-built for displays of data