Select data from Cross Plot and have images from the selected samples display corresponding images #2278

Philliec459 · 2020-09-05T16:51:28Z

Hello,

I am not sure if this is a capability yet in Altair, but the following image illustrates the function that I would like Altair if possible. I created this in Spotfire, but it would be nice to do in Altair.

Philliec459 · 2022-08-08T12:59:11Z

I love the interactive aspects of Altair. At this moment I do not know how to select samples from the cross plot as shown above and render the images associated with then, but tooltips does allow you to render the images if you hover over the sample point as shown below. This is great. Thank you for developing this excellent tool. Now to figure out how to show the tooltips for all the selected points on the cross plot????

joelostblom · 2022-08-08T15:54:22Z

It is possible to show the images of selected points by using two layered charts:

import altair as alt
import pandas as pd

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'}]
)

brush = alt.selection_interval()
points = alt.Chart(source).mark_circle(size=200).encode(
    x='a',
    y='b',
).add_selection(
    brush
)

imgs = alt.Chart(source).mark_image(width=100, height=100).encode(
    x='a',
    y='b',
    url='image'
).transform_filter(
    brush
)

points + imgs

There is no automatic dodging as in your example from Spotfire, so they will likely show up on top of each other. An alternative is to use a faceted chart below the original chart:

brush = alt.selection_interval()
points = alt.Chart(source).mark_circle(size=200).encode(
    x='a',
    y='b',
).add_selection(
    brush
)

imgs = alt.Chart(source, width=200, height=200).mark_image().encode(
    url='image'
).facet(
    alt.Facet('image', title='', header=alt.Header(labelFontSize=0))
).transform_filter(
    brush
)

points & imgs

You can play around starting from these two examples and see if you can get the results you want. See this issue for how to use local image via base64 encoding instead of a URL #2318 and this issue for automatic resizing of the overall chart area #2512

If you want more explicit control over the selected points, you could try the Dashboarding library Panel which support custom interactions with Altair selections.

Philliec459 · 2022-08-11T15:39:07Z

This is finally what I was looking to do. I would say this is complete. Thank you for your help.

Brush for selection

brush = alt.selection(type='interval')

vega_pane = pn.pane.Vega(chart.add_selection(
brush
))

imgs = alt.Chart(source).mark_image(width=50, height=50).encode(
url='image'
).facet(
alt.Facet('image',title='Select Thin Sections', header=alt.Header(labelFontSize=0)),
columns=2
).transform_window(
row_number='row_number()'
).transform_filter(
brush
).transform_window(
rank='rank(row_number)'
).transform_filter(
alt.datum.rank<15
)

#------------------------------------------------

Text Data for Routine Core Analysis data

#------------------------------------------------

Base chart for data tables

ranked_text = alt.Chart(source7).mark_text(align='right').encode(
y=alt.Y('row_number:O',axis=None)
).transform_window(
row_number='row_number()'
).transform_filter(
brush
).transform_window(
rank='rank(row_number)'
).transform_filter(
alt.datum.rank<28
)

Data Tables

Porosity = ranked_text.encode(text='Porosity:N').properties(title=alt.TitleParams(text='Porosity', align='right'))
Permeability = ranked_text.encode(text='Permeability:N').properties(title=alt.TitleParams(text='Permeability', align='right'))
Sample = ranked_text.encode(text='Sample:N').properties(title=alt.TitleParams(text='Sample', align='right'))
sqrt = ranked_text.encode(text='sqrt(k/phi):N').properties(title=alt.TitleParams(text ='sqrt(k/phi)', align='right'))
#Image = ranked_text.encode(tooltip ='image').properties(title=alt.TitleParams(text ='image', align='right'))
RI = ranked_text.encode(text='ROCK_INDEX:N').properties(title=alt.TitleParams(text='PRT', align='right'))
lith = ranked_text.encode(text='Lith:N').properties(title=alt.TitleParams(text='Lith', align='right'))

text = alt.hconcat(Sample, Porosity, Permeability,lith) # Combine data tables

#------------------------------------------------

Gray Image Data Cross Plot

#------------------------------------------------
kurt = alt.Chart(source).mark_circle(size=300).encode(
alt.X('Mode_image:Q',
scale=alt.Scale(domain=(0, 1))),
#y='Perm',
alt.Y('Kurtosis:Q',scale=alt.Scale( domain=(.0, 12))),

color=alt.condition( brush,'ROCK_INDEX:O', alt.value('lightgray'),
                    scale=alt.Scale(
                    domain=[ 1,         2,         3  ,     4         ,5,       6],
                    range =['cyan', '#1e90ff',  'blue'  , 'orange','brown' ,'black'  ])),

tooltip=['image','Sample','Porosity','Permeability','Lith'],  # Must be a list for the image to render

).properties(
width=500,
height=500,
title='Mode of Gray Image vs. Kurtosis Colored by Lithology',
).add_selection(brush)

#------------------------------------------------

Concatenate Cross Plot, Text and Pc curves

#------------------------------------------------

Build visualization

#imgs|kurt|text works
kurt|imgs|text

joelostblom · 2022-08-11T20:42:17Z

Great! Thanks for sharing your code! I will keep this open as a reminder to add something along these lines to the docs.

Philliec459 · 2022-08-15T14:04:05Z

Thank you for you suggestions and ideas. We were able to implement your last comments in Altair to create the following visualization. Thank you. Best Regards,

…

_______________________________ E. Craig Phillips CEO and Chief Petrophysicist Crested Butte Petrophysical Consultants 459 Cisneros Lane Crested Butte, CO 81224 USA Office: +1 970-343-0730 Mobile: +1 970-343-0730 email: ***@***.*** Website: www.cbpetro.com GitHub: https://github.com/Philliec459 On Aug 8, 2022, at 11:54 AM, Joel Ostblom ***@***.***> wrote: It is possible to show the images of selected points by using two layered charts: import altair as alt import pandas as pd 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'}] ) brush = alt.selection_interval() points = alt.Chart(source).mark_circle(size=200).encode( x='a', y='b', ).add_selection( brush ) imgs = alt.Chart(source).mark_image(width=100, height=100).encode( x='a', y='b', url='image' ).transform_filter( brush ) points + imgs <https://user-images.githubusercontent.com/4560057/183458561-e52a45af-6fae-425f-825e-9be4c2a83537.gif> There is no automatic dodging as in your example from Spotfire, so they will likely show up on top of each other. An alternative is to use a faceted chart below the original chart: brush = alt.selection_interval() points = alt.Chart(source).mark_circle(size=200).encode( x='a', y='b', ).add_selection( brush ) imgs = alt.Chart(source, width=200, height=200).mark_image().encode( url='image' ).facet( alt.Facet('image', title='', header=alt.Header(labelFontSize=0)) ).transform_filter( brush ) points & imgs <https://user-images.githubusercontent.com/4560057/183458930-f3946780-e80c-48fb-b58c-a843f6da28ea.gif> You can play around starting from these two examples and see if you can get the results you want. See this issue for how to use local image via base64 encoding instead of a URL #2318 <#2318> and this issue for automatic resizing of the overall chart area #2512 <#2512> If you want more explicit control over the selected points, you could try the Dashboarding library Panel <https://pyviz-dev.github.io/panel/reference/panes/Vega.html> which support custom interactions with Altair selections. — Reply to this email directly, view it on GitHub <#2278 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANSKYPFDFOGGZJPTHULAATLVYEUTRANCNFSM4Q3DQLTQ>. You are receiving this because you authored the thread.

joelostblom · 2023-10-16T03:17:32Z

This is now part of the documentation after #3219, so closing this.

joelostblom added the question label Feb 23, 2021

joelostblom added the documentation label Aug 8, 2022

joelostblom mentioned this issue Dec 1, 2022

Improve the image mark documentation #2739

Closed

joelostblom mentioned this issue Oct 7, 2023

[Doc] Add Show Image Marks With Selection/Show Local Images Examples #3219

Merged

joelostblom closed this as completed Oct 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Select data from Cross Plot and have images from the selected samples display corresponding images #2278

Select data from Cross Plot and have images from the selected samples display corresponding images #2278

Philliec459 commented Sep 5, 2020

Philliec459 commented Aug 8, 2022

joelostblom commented Aug 8, 2022

Philliec459 commented Aug 11, 2022

joelostblom commented Aug 11, 2022

Philliec459 commented Aug 15, 2022 via email

joelostblom commented Oct 16, 2023

Select data from Cross Plot and have images from the selected samples display corresponding images #2278

Select data from Cross Plot and have images from the selected samples display corresponding images #2278

Comments

Philliec459 commented Sep 5, 2020

Philliec459 commented Aug 8, 2022

joelostblom commented Aug 8, 2022

Philliec459 commented Aug 11, 2022

Brush for selection

Text Data for Routine Core Analysis data

Base chart for data tables

Data Tables

Gray Image Data Cross Plot

Concatenate Cross Plot, Text and Pc curves

Build visualization

joelostblom commented Aug 11, 2022

Philliec459 commented Aug 15, 2022 via email

joelostblom commented Oct 16, 2023