[Doc] Add Show Image Marks With Selection/Show Local Images Examples #3219
Conversation
|
Thanks for all your documentation PRs @ChiaLingWeng, they are great! I'm going to take closer look this weekend, but one comment I have now already is that it would be good to include a link to the new tutorial for how to show numpy images somewhere on this page https://altair-viz.github.io/case_studies/numpy-tooltip-images.html, could you add that where you see fit? |
|
Hi @joelostblom , no problem! |
There was a problem hiding this comment.
Thanks a lot @ChiaLingWeng ! This is a big improvement and I have a few comments that I think can improve this page further.
| one with point marks and the other with image marks, applying the selection filter only to the latter. | ||
| By combining these two charts, we can achieve the desired result. | ||
|
|
||
| .. altair-plot:: |
There was a problem hiding this comment.
I think the two examples in this code will be easier to understand if we show them one at a time like in #2278 (comment) and don't hide the code by default.
There was a problem hiding this comment.
Update as below
doc/user_guide/marks/image.rst
Outdated
| source = pd.DataFrame.from_records( | ||
| [{'a': 1, 'b': 1, 'image': 'https://altair-viz.github.io/_static/altair-logo-light.png'}, | ||
| {'a': 2, 'b': 2, 'image': 'https://avatars.githubusercontent.com/u/11796929?s=200&v=4'}, | ||
| {'a': 3, 'b': 3, 'image': ''}] |
There was a problem hiding this comment.
Why is this empty image included?
There was a problem hiding this comment.
I forgot to remove this... just for testing if point withot image can be shown correctly
doc/user_guide/marks/image.rst
Outdated
| In the layered chart, images may overlap one other, using the faceted chart instead can | ||
| avoid this issue. | ||
|
|
||
| If you're looking to learn how to create an image tooltip that displays an image when hovering over a point, |
There was a problem hiding this comment.
Can you include the Image Tooltip example directly on this page under its own heading and remove the gallery example? I think this is a natural place for it and we have so many different gallery examples that it is sometimes hard to find what we are looking for there.
There was a problem hiding this comment.
Add Image Tooltip section
doc/user_guide/marks/image.rst
Outdated
|
|
||
| # replace your image path here | ||
| # recommend use raw string for absolute path; i.e. r'C:\Users\...\img00.jpg' | ||
| images = ["./img00.jpg", "./img01.jpg", "./img02.jpg"] |
There was a problem hiding this comment.
I think this image https://altair-viz.github.io/_static/altair-logo-light.png' might be available locally to the doc build, either as _static/altair-logo-light.png' or just altair-logo-light.png'. Could you try with those two paths and see if you can actually use it as a local image? Then we could run this example in the docs instead of only showing the code.
There was a problem hiding this comment.
Update! The relative path is "doc/_static/gray-square.png"
Co-authored-by: Joel Ostblom <[email protected]>
There was a problem hiding this comment.
This is a big improvement to the image docs, thanks again @ChiaLingWeng ! I added an example of automatically resizing charts when images start out hidden. Merging when tests are passing
This will close #2739
I only provide source code here, not sure if there is any better illustration.