{"version":"1.0","type":"rich","title":"Reusable D3 Tooltip","description":"This example demonstrates a reusable tooltip function for D3 charts, built with D3 v4 and rendered as SVG. The tooltip is designed to be attached to any chart element via a `.each(tooltip.events)` call, and it displays multiple data properties with customizable labels and formatting. It supports configurable extent, font size, padding, and margin, and includes mouseenter, mouseleave, and mousemove event handlers. The bar chart uses sample water-quality data, with categorical colors from d3.schemeCategory20 and axis scales for parameters and values. The tooltip appears on hover, showing the parameter value and site name. The code is organized as a reusable function in `tooltip.js`, with the chart and dummy data in `index.html`, and styling in `index.css`. This example demonstrates a modular approach to tooltip implementation in D3 v4 using SVG, useful for adding interactive tips to charts without overwriting existing event handlers.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-ee40855c1a0e0051bfb6ecf710ccbe9f?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}