vega / vega-lite

A concise grammar of interactive graphics, built on Vega.
https://vega.github.io/vega-lite/
BSD 3-Clause "New" or "Revised" License
4.62k stars 598 forks source link

Default value for param linked between plots only works on the first concatenated plot #9391

Open NateLanza opened 1 month ago

NateLanza commented 1 month ago

Bug Description

I'm trying to create a sequence of plots that share a single brush param, which is an interval selection on 2 axis for scatterplots and 1 axis for histograms. Any plot should be brushable, which filters the other plots accordingly. This works fine, but I also need to be able to provide default values to any of the plots, and I've found that the default value only works if it's provided to the first plot. Since the other plots may have different axis from the first plot, it's not possible to provide default values that accurately reflect selections made in any plots other than the first. In this example, you can see that I've provided a default value to the second scatterplot, but when run no selection appears. However, if you drag over the second scatterplot, the brush selection behaves as desired. JSON spec for this example:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "vconcat": [
    {
        "hconcat": [
            {
                "width": 200,
                "height": 200,
                "mark": {
                    "type": "point"
                },
                "params": [
                    {
                        "name": "brush",
                        "select": {
                            "type": "interval",
                            "clear": "mousedown"
                        }
                    }
                ],
                "encoding": {
                    "x": {
                        "field": "Weight_in_lbs",
                        "type": "quantitative",
                        "scale": {
                            "zero": false,
                            "type": "linear"
                        }
                    },
                    "y": {
                        "field": "Displacement",
                        "type": "quantitative",
                        "scale": {
                            "zero": false,
                            "type": "linear"
                        }
                    },
                    "color": {
                        "condition": {
                            "param": "brush",
                            "empty": false,
                            "value": "#9467bd"
                        },
                        "value": "#990044"
                    }
                }
            },
            {
                "width": 200,
                "height": 200,
                "mark": {
                    "type": "point"
                },
                "params": [
                    {
                        "name": "brush",
                        "select": {
                            "type": "interval",
                            "clear": "mousedown"
                        },
                        "value": {
                          "x": [200, 300],
                          "y": [15, 20]
                        }
                    }
                ],
                "encoding": {
                    "x": {
                        "field": "Displacement",
                        "type": "quantitative",
                        "scale": {
                            "zero": false,
                            "type": "linear"
                        }
                    },
                    "y": {
                        "field": "Acceleration",
                        "type": "quantitative",
                        "scale": {
                            "zero": false,
                            "type": "linear"
                        }
                    },
                    "color": {
                        "condition": {
                            "param": "brush",
                            "empty": false,
                            "value": "#9467bd"
                        },
                        "value": "#aa0044"
                    }
                }
            }
        ]
    },
    {
        "hconcat": [
            {
                "width": 200,
                "height": 200,
                "layer": [
                    {
                        "params": [
                            {
                                "name": "brush",
                                "select": {
                                    "type": "interval",
                                    "encodings": [
                                        "x"
                                    ],
                                    "clear": "mousedown"
                                },
                            }
                        ],
                        "mark": "bar",
                        "encoding": {
                            "x": {
                                "bin": true,
                                "field": "Acceleration"
                            },
                            "y": {
                                "aggregate": "count",
                                "title": "Frequency"
                            },
                            "opacity": {
                                "value": 0.4
                            }
                        }
                    },
                    {
                        "transform": [
                            {
                                "filter": {
                                    "param": "brush"
                                }
                            }
                        ],
                        "mark": "bar",
                        "encoding": {
                            "x": {
                                "field": "Acceleration",
                                "bin": true
                            },
                            "y": {
                                "aggregate": "count",
                                "title": "Frequency"
                            },
                            "opacity": {
                                "value": 1
                            }
                        }
                    }
                ]
            }
        ]
    }
]
}

Additionally, here you can see that the default value works as expected when provided to the first scatterplot. Finally, here you can see that providing the default value to the histogram does not work.

Checklist

NateLanza commented 1 month ago

This does appear to be a vega-lite issue and not a vega issue; comparing the compiled version of the working example (where value is given to the param in the first plot) and the compiled version of the broken example (where value is given to the param in the second plot) reveals that "brush_store" (in the data field) has a value in the working example but not in the broken example.

NateLanza commented 1 month ago

Also of note: if the params field is excluded from the first plot, the default value works fine on the second plot. This doesn't entirely solve the issue as excluding the params field on the first plot prevents selections on that plot.