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

Docs: Add another version of the 'Multiline Tooltip' exmaple which uses the standard tooltip #3340

Merged
merged 3 commits into from
Mar 1, 2024

Conversation

binste
Copy link
Contributor

@binste binste commented Feb 25, 2024

We already have https://altair-viz.github.io/gallery/multiline_tooltip.html which shows how to add multiline tooltips based on text marks. However, I often prefer to use the proper Vega tooltip also in these multiline cases as it's easier to make them readable then the text marks. We already have an example for this in the Pivot documentation but I think it would be nice to add one also to the example gallery.

This PR adds an adjusted version of https://altair-viz.github.io/gallery/multiline_tooltip.html which uses the standard Vega tooltip:

image

Copy link
Contributor

@joelostblom joelostblom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I agree that this has multiple advantages over the other tooltip and I think it would be a good addition. I'm tempted to say that we could put them in the same example since they share about half the code in the example, but maybe that would be too busy. Instead, could you standardize the syntax between this and the old example so that the code for generating the data, source, nearest, line, and points look the same and come in the same order? I think that will make them easier to compare. I'm OK with either updating the old file to the syntax you use here or the other way around; whichever you prefer.

Comment on lines 23 to 27
line = (
alt.Chart(source)
.mark_line(interpolate="basis")
.encode(x="x:Q", y="y:Q", color="category:N")
)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious, do you find this more convenient than the approach we use elsewhere in the docs?

alt.Chart().mark_line(),encode(
    ...
)

I'm not suggesting you change it here, just curious about what you use on a day to day basis.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, they should be the same! I harmonised the code style, mainly adapting the new example to the old one so it's consistent with the approach we use in other places. I also slightly cleaned up the old one.

Personally, I just always use a code formatter (black or ruff). I love that I don't have to think about it and can get nicely formatted code with a hotkey or by saving a file :) The style I used before comes from ruff.

@binste
Copy link
Contributor Author

binste commented Feb 29, 2024

Tests fail until #3345 is merged.

Copy link
Contributor

@joelostblom joelostblom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me, thanks @binste ! Let's merge after the other PR is merged and tests are passing.

@binste binste merged commit 818960b into vega:main Mar 1, 2024
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants