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

quakPRHistHover.mov

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!

[manzt]

Thanks @jwilber for another excellent contribution!

To clarify: While I don't have a specific roadmap or goal for 100% parity with Observable's data table, your recent PRs have been filling crucial gaps in our functionality. These additions are valuable and align well with features I've been considering.

With that said, I want to be open and welcoming to new design choices beyond Observable. For example, I've been tinkering with a new UI for column selection/reordering beyond Observable's simple multi-select checkboxes.

The histogram hover effects could be another area of divergence. I see value in both:

• More precise hover info for selecting ranges (crosshair cursor)
• Bin hovering info (for consistency with categorical value pills)

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).

This would combine the familiar Observable behavior with context for creating range selection precision. We could tackle this in a separate PR. What do you think?

Example of Observable behavior (bin hovering without crosshair tool):

Screen.Recording.2024-08-19.at.15.18.42.mov

idea: It would actually be kind of cool if a click interaction in the bin hovering mode made a continuous range selection for just that bin, since the continuous cross hair selection is the only way to define ranges currently.

[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:

quakMRhover.mov

[manzt]

Thanks @jwilber !!