Possible to use a Scatter Plot's Zoom as a Filter for other charts?

[sluke-nuix]

Question

I have several bar and line graphs on a dashboard, and a scatter plot. The Y axis of the other graphs are plotted as X/Y on the scatterplot but then organized via different bins or groups. With the filter interaction I can click on a point in the scatter plot and can filter the other graphs on based on that one clicked point, but what I would like to do is have either the Selection or the Zoom for the scatter plot set the filter ranges for the other graphs. Is that possible?

Code/Examples

No response

Which package?

vizro

Code of Conduct

• I agree to follow the Code of Conduct.

[sluke-nuix]

Here is what I have as a starting point:

I have a scatter plot defined like this:

score_scatter = px.scatter(score_data,
                           x="Top Cat 2 Score",
                           y="Top Cat 1 Score",
                           color="Top Cat 1 Name",
                           custom_data=["Top Cat 1 Score", "Top Cat 2 Score"])
score_scatter.update_layout(clickmode='event+select')

The update_layout lets me use dash callbacks for when the selection changes. I have these filters defined:

score_1_filter = vm.Filter(column="Top Cat 1 Score")
score_2_filter = vm.Filter(column="Top Cat 2 Score")

So the idea would be to have the selection from the score_scatter adjust the two filters. I have the following Dash callback so far:

@callback(
    Output('holder', 'children'),
    Input('score_scatter', 'selectedData'))
def display_selected_data(selectedData):
    selection = "No Selection"
    print(selectedData)
    if selectedData is not None:
        score_1_range = selectedData['range']['y']
        score_2_range = selectedData['range']['x']

        selection = json.dumps(selectedData['range'])

        # score_1_filter.value = score_1_range
        # score_2_filter.value = score_2_range

    return selection

This responds to the selection and gets the range in a usable format. But I don't know how to change the filters (the commented code doesn't work - no 'value' attribute).

[Joseph-Perkins]

hi @sluke-nuix! Thank you for the detailed description in the comments above - that makes it very clear

(Also, our apologies for a delayed response - since there has been limited team capacity over the recent holiday period)

I believe the functionality you are describing may not be currently possible natively within Vizro (at least, not exactly in the way you have described). During Q1 2025 the filtering functionality within Vizro is likely to be refactored, which may enable this natively - however we cannot yet give a definitive indication when that will be completed

In the meantime however, there may temporarily be a (semi) alternative which might potentially be suitable for your use case

If you review one of the previous issues in the Vizro repo here, you can see a discussion about using callbacks to target Parameters instead of Filters (under the section subtitled "Approach 2: update parameter")

I wonder whether it may be possible to use a similar approach to control a Parameter (with a RangeSlider selector) from the scatter chart user selections (instead of controlling a Filter) - and then have the Parameter connected to the input arguments of custom chart functions for the remaining charts on the page which need to be "filtered". If these remaining charts were defined as custom chart functions, which themselves contain code to filter the Pandas data frame according to the specified ranges passed in by the Parameter, then it might be possible to replicate the outcome you describe above?

(In this case, the Parameters would need to avoid targeting the source chart, ie. the scatter chart, since otherwise that might risk creating a circularity which could cause problems)

Alternatively if you are able to wait until Monday, then I hope the remaining members of the team who are experts in the callbacks and filters may be able to give a more definitive answer, if route above is not a suitable approach