feat: Show value counts and highlight bar on histogram hover

[jwilber]

A little Friday night PR: adding hover effects to the histogram (see video).

• Add hover bar
• Show value counts/percents for the selected bin on hover

https://github.com/user-attachments/assets/ad946fd3-7640-4c73-bfc7-03248c6bbc95

In addition, I also created a percentFormatter, that formats percents in a cleaner manner, and added this to the ValueCountsPlot as well.

One note here, hovering over the histogram currently shows the x-axis value -- it may be more appropriate to show the actual bin interval (see image below, which is what Observable does). A different PR can add that in pretty easily given the current setup, if that's desired.

[dvdkouril]

I’ll just comment on the histogram hover value design choice: The reasoning is that you’re still selecting a range start/end even within a single bun, that’s why showing a precise value is more appropriate, imho. Also I think replicating Observable datatable 1 to 1 is not the goal (but Trevor might have a different opinion)

[jwilber]

Fair points! I have no strong opinions, as I'm not the author of the library, but here's my though process regarding proposed PR changes:

1. In my opinion, that level of granularity makes more sense in this specific linked view if the corresponding rows are highlighted as well. In general, I suspect visualization consumers expect any interactions in the UI to directly reflect (and act on) the marks and encodings of the viz. That said, the proposed hover here does maintain the precise value in the x-axis, but also highlights the bin it belongs to.

2. From an outsider looking in, the UI has exact one-to-one parity with Observable datatable. There are some missing features (e.g. time-series display, UI interactivity such as this, etc.) My goal was to help pad these in, but if I have misread the intention of the library, feel free to close this PR -- no harm done!

[jwilber]

Sure!

So, I'll move the percent formatting into it's own separate PR, and add that to the valuecounts plot as well.

For histogram interactions, I've noticed that Observable only shows the highlighted bin when hovering below the bins. When in crosshair selection mode, no hover information is displayed (including bins). I think we could adopt a similar approach, but with an added feature: in crosshair mode, we could display the current precise hover value (as is currently implemented).

I'm not sure I follow 100% here. My take is: keep the functionality I've added here, but only trigger when the user hovers below the bins, otherwise, keep the current crosshair functionality? Is that right?

[manzt]

So, I'll move the percent formatting into it's own separate PR, and add that to the valuecounts plot as well.

awesome!

My take is: keep the functionality I've added here, but only trigger when the user hovers below the bins, otherwise, keep the current crosshair functionality?

Couldn't have said it better myself (clearly 😂)!

[jwilber]

Sweet, decided to just update in this MR, since it's not much code change.

See:

https://github.com/user-attachments/assets/f1f15b6a-7d3c-4ccf-991c-d415874e0cc9

[manzt]

Thanks @jwilber !!