Tooltips in example histogram only show up when hovering over the left side of the bar

[jaanli]

This is super fun to try out, thank you!!

I'm able to see the tooltips only when hovering over the left-hand side of a bar in the histogram; screenshot below.

Any tips on how to make the tooltips appear when moving the mouse over the center of a bar as well?

Live demo: https://jaanli.github.io/american-community-survey/

The histogram code is here: https://github.com/jaanli/american-community-survey/blob/main/docs/components/apiHistogram.js which is taken from the example: https://github.com/observablehq/framework/blob/main/examples/api/docs/components/apiHistogram.js

The only changes to the example were:

• adding a barWidth parameter to make the bars easier to see: const barWidth = 4;
• changing const ky = 165; to const ky = 6; (number of points per pixel)
• changing const dy = 500; to const dy = 300; (number of rows)

Another issue I have noticed is that the hover-over tooltip text with descriptions does not wrap the text and is cut off:

[Fil]

The chart you're trying to adapt is not meant to be used with generic data. I'd suggest to use Plot instead (https://github.com/jaanli/american-community-survey/pull/1).

the hover-over tooltip text with descriptions does not wrap the text and is cut off:

the tooltip is built with Plot.tip, which doesn't do line wrapping (yet); however you can control the line's width with the lineWidth option, which defaults to 20 (ems). See https://observablehq.com/plot/marks/tip#tip-mark

[jaanli]

Got it, thank you @Fil ! My bad, was just going off of the example -- will switch to Observable Plot now :) and try out the Mosaic example you shared too. Hopefully I can hack together some demos with AI soon! 🙏 🔥 🚒 you and your team rock!!!

Fixed in case others run into modifying the example and getting confused as well:

https://github.com/jaanli/american-community-survey/commit/db3d74346ba7df96810384696da08be1b4e6f811

-> result - https://jaanli.github.io/american-community-survey/