Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip layout in chart looks slightly off #3817

Closed
lucasrodes opened this issue Jul 26, 2024 · 8 comments
Closed

Tooltip layout in chart looks slightly off #3817

lucasrodes opened this issue Jul 26, 2024 · 8 comments

Comments

@lucasrodes
Copy link
Member

lucasrodes commented Jul 26, 2024

Description

When hovering over the chart area, the tooltip presents unexpected spacing between rows. It looks as if the column width of the table is wrongly defined?

Expected behaviour

Spacing between rows should be the standard

Steps to reproduce

  1. Go to https://ourworldindata.org/grapher/covid-variants-bar
  2. Hover over chart area

Screenshots

image

Environment

For desktop, provide:

  • OS: MacOS
  • Browser: Arc
@marcelgerber
Copy link
Member

Probably a quick CSS fix to prevent the grid lines from breaking.

But it's also not much of an issue, since all information is still mostly readable in the tooltip, just in a not-nice way.

@toni-sharpe
Copy link
Contributor

toni-sharpe commented Aug 5, 2024

This is my one contribution for w/c 05-aug-24.

image

I got my head right into this last night: I looked at the CSS, yes, the things can be aligned, however, the date seems odd, effecting things like it is, appearing even though the slider extends beyond it and the country is still reporting. I might have fixed that, as in the image above, but I'm trying to be much less verbose, I say too much, unintended but too much for other people, and I am fixing that as well. Also, stick to one thing a week, as the team is small.

The date thing is a bit more complex, it'll need more explanation. Available on request, in your own time. No rush here.

@toni-sharpe
Copy link
Contributor

toni-sharpe commented Aug 17, 2024

Note: came back, no rush expected - will share date detail this time as there's another instance - probably

Date related problems with the tooltip

It's ones with extra data in:

France has ⓘ circle and date
Spain just a %

Wider bars visible on Chrome, my screen-shots FireFox.

This TooltipTable is the source, specifically this time which is refered to as endTime. End time sounds like "no more covid data" - in the code it looks like scale end? Could the countries have stopped reporting?

The problem only occurs on countries who have this endDate set and it's before the current setting on the slider.

Pic demonstrates, scale past end of some sort?

With Germany, end: 17-June, it's set to 3-June and fine.

image  image  image

Background info

Have the countries stopped reporting variants altogether? This WHO report stresses the need to keep going. Their latest map is 29-may-2024. Your data is last udated 26-jul, but this error only happens if the slider is after the endDate in the code (see screen-shots). That being said, digging inton GSAID (sourced by OWID) shows, even countries with bad dates are reporting day by day, strain by strain - this close monitoring isn't over.

France, incorrect, Spain, no problem (no 1st July '24)

image  image

@danyx23
Copy link
Contributor

danyx23 commented Aug 17, 2024

Hey @toni-sharpe, the date is important to keep as is - it tells users what date the shown value is from. We often use temporally sparse data and then show values with tolerance - if we do, we make sure in the tooltip to tell people from when a given time point is. You can see another example of how we do this in the map tab of the extreme poverty chart: https://ourworldindata.org/grapher/share-of-population-in-extreme-poverty

As such, it would be great to just fix the issue described above - that the tooltip sometimes spills over. It looks like adding a min-width of 8em to td.time-notice in packages/@ourworldindata/grapher/src/tooltip/Tooltip.scss should do the trick but I haven't checked the other uses. If you like to investigate along these lines then please do!

@toni-sharpe
Copy link
Contributor

toni-sharpe commented Aug 17, 2024

@danyx23 OK, CSS until row, no problem,

The WHO want this heavily monitored, as do I, but that will become fuzzier as richer countries eliminate it. ie DE latest data is 17-jun, so as soon as we go to 01-jul there's "no data" which we imply with the last reported date. In a decade: lots of grey bars at least in the Global North.

Actually I'm starting on machine learning with Python like now pretty much, after that schema PR, so seen as there's two data tech folk right here: book recommendations would be most welcome.

This is what I'll call out in return Wasteland - Oliver Franklin-Wallis it's accessible, well researched, four year journey through the global waste industry historically and currently and it's fascinating, looking at your main menu here there's probably bits from every section that are connected. I shared the site which mentions BBC Radio 4 too, where I heard about it and home to lots of excellent, varied factual programmes. Podcasts and ads for us outside the UK.

Data nerdiness for the sake of it

@lucasrodes I can see is a data scientist and uses SQL, which is cool, I love SQL but also I've been using Ramda.js for client-side data wrangling - that's a trickier one which does the grouping of these bars. Here is some example data where I've also been looking at how it's arranged to reflect what it is. Also, I'd like a consistent structure, three dimensions, grouped and exposing a meta-data pattern so I can bring the prediction and anti-bias things back from the actual medical graphs.

Yes brevity. I'll manage most of the time.

@toni-sharpe
Copy link
Contributor

toni-sharpe commented Aug 28, 2024

@danyx23 I've found this, looks like I have implicitly committed to the fix, but it slipped under the radar a bit, a couple of real life issues have been a bother, but I'll comment now and take ownership of the fix, taking into account the new info.

Is there a deadline of any sort?

Also, I'm certainly curious what resources and books you're using for Machine Learning and Data Science, practical stuff, as I want to start on that to bolster the visual output. Also, that might help with employment. I'll not pester this question again, but the learning side needs feeding and I think the folks here are good to ask.

I'll start on this task during the rest of this week.

@toni-sharpe
Copy link
Contributor

Nevermind deadlines: #3907

toni-sharpe added a commit to toni-sharpe/owid-grapher that referenced this issue Sep 3, 2024
* Fixes: owid#2714 long line length - note that I think these will still wrap as the only change is the date nowrap addition.
* This will be why I opted for `vw` unit to minimise the long line outcome.
* The same line fixes the problem Lucas was having in owid#3817: wrapping dates.
@sophiamersmann
Copy link
Member

Is fixed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants