Linked data selection points obscured for high density plots

user_13158616 0
Viewed 50

For linked brush selection plots with high density of data it’s often not possible to see selected points in a secondary chart very well (or at all) when the associated points are selected in the primary chart. This is just because they are frequently obscured by the non-selected points. This can even be seen to some degree in the Bindings, Selections and Conditions example plots in the Altair documentations. I'm referring to points selected on plot X that highlight associated points on plot Y.

I wonder if there is way to have the associated points be brought to the 'front' (top) automatically? Or if the opacity (or point size) can be set low for out of selection data so the linked selection points are more emphasized? It seems like the alt.condition command didn’t accept these options.

altair python
1 Answers

There is no way to change the z-order of a group of points based on the selection. As you have seen this leads to sub-optimal results when using conditional colors, because selected points may be obscured by unselected points. For example:

import altair as alt
from vega_datasets import data

selection = alt.selection_single(encodings=['color'])

alt.Chart(data.cars()).mark_circle(size=200).encode(
    x='Miles_per_Gallon',
    y='Horsepower',
    color=alt.condition(selection, 'Origin:N', alt.value('lightgray'))
).add_selection(selection)

enter image description here

One useful workaround in this situation is to draw both background and foreground points, and use a condition on the opacity rather than a color: then the selected points are always in the foreground:

import altair as alt
from vega_datasets import data

selection = alt.selection_single(encodings=['color'])

background = alt.Chart(data.cars()).mark_circle(size=200).encode(
    x='Miles_per_Gallon',
    y='Horsepower',
    color=alt.value('lightgray')
)

foreground = background.encode(
    color='Origin:N',
    opacity=alt.condition(selection, alt.value(0.8), alt.value(0))
).add_selection(selection)

background + foreground

enter image description here

user_29378310
Related