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.

Sign up for GitHub

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

doc: update numpy-tooltip-images.rst #3233

Merged
merged 2 commits into from
Mar 16, 2024
Merged

doc: update numpy-tooltip-images.rst #3233

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0fbc482
Update numpy-tooltip-images.rst
mattijn Oct 20, 2023
07e723a
Clarify intro
joelostblom Mar 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions doc/case_studies/numpy-tooltip-images.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ you’ll learn how to display images stored as Numpy arrays
in tooltips with any Altair chart.

First,
we create some example image arrays with blobs of different sizes.
we create some example image arrays with blobs (objects)
of different sizes and shapes (circular and square).
We measure the area of the blobs
in order to have a quantitative measurement to plot.
in order to have a quantitative measurement
to compare them with in our charts.

.. altair-plot::
:output: repr
Expand Down Expand Up @@ -40,7 +42,7 @@ in order to have a quantitative measurement to plot.
'group': rng.choice(['a', 'b', 'c'], size=n_rows)
})
# Compute the area as the proportion of pixels above a threshold
df[['image1_area', 'image2_area']] = df[['image1', 'image2']].applymap(lambda x: (x > 0.4).mean())
df[['image1_area', 'image2_area']] = df[['image1', 'image2']].map(lambda x: (x > 0.4).mean())
df

Next, we define the function
Expand Down Expand Up @@ -87,7 +89,7 @@ is in the form of an image and render it appropriately.
return f"data:image/png;base64,{img_str}"

# The column with the base64 image string must be called "image" in order for it to trigger the image rendering in the tooltip
df['image'] = df[['image1', 'image2']].apply(create_tooltip_image, axis=1)
df['image'] = df[['image1', 'image2']].map(create_tooltip_image, axis=1)

# Dropping the image arrays since they are large an no longer needed
df_plot = df.drop(columns=['image1', 'image2'])
Expand Down Expand Up @@ -150,7 +152,7 @@ instead of both the images concatenated together.
return f"data:image/png;base64,{img_str}"

# The column with the base64 image string must be called "image" in order for it to trigger the image rendering in the tooltip
df[['image1_base64', 'image2_base64']] = df[['image1', 'image2']].applymap(create_tooltip_image)
df[['image1_base64', 'image2_base64']] = df[['image1', 'image2']].map(create_tooltip_image)
# Dropping the image arrays since they are large an no longer needed
# Also drop the previous tooltip image for clarity
df_plot = df.drop(columns=['image1', 'image2', 'image'])
Expand Down
Loading