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.

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

Error: "Cannot read properties of undefined (reading '0')" when trying to link selections between a probability density histogram and a scatterplot #9390

Open
1 task done
NateLanza opened this issue Jul 17, 2024 · 2 comments
Labels

Comments

@NateLanza
Copy link

Bug Description

I've been attempting to create a visualization in react-vega that links a histogram to a scatterplot with an interval selection brush and accepts default values for the brush. I've noticed that, when a default value is provided to the scatterplot, the histogram generates an error Cannot read properties of undefined (reading '0') (no error is generated for two linked scatterplots). In react, this manifests as no lines rendering in the histogram. In the vega editor, the histogram instead does not update when the selection is cleared (the pink line should only appear when a selection is active): Open the Chart in the Vega Editor. This vega chart appears perfectly correct when you load it but clicking the scatterplot once immediately creates the bug.

{
  "$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"
                        },
                        "value": {
                            "x": [3000, 4000],
                            "y": [200, 300]
                        }
                    }
                ],
                "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": "#e377c2"
                        }
                    }
                }
            }
        ]
    },
    {
        "hconcat": [
            {
                "width": 200,
                "height": 200,
                "layer": [
                    {
                        "transform": [
                            {
                                "density": "Displacement"
                            },
                            {
                                "calculate": "datum[\"value\"]",
                                "as": "Displacement"
                            }
                        ],
                        "params": [
                            {
                                "name": "brush",
                                "select": {
                                    "type": "interval",
                                    "encodings": [
                                        "x"
                                    ],
                                    "clear": "mousedown"
                                }
                            }
                        ],
                        "mark": "line",
                        "encoding": {
                            "x": {
                                "field": "Displacement",
                                "type": "quantitative",
                                "title": "Displacement"
                            },
                            "y": {
                                "field": "density",
                                "type": "quantitative",
                                "title": "probabiity"
                            },
                            "opacity": {
                                "condition": [
                                    {
                                        "param": "brush",
                                        "empty": false,
                                        "value": 1
                                    }
                                ],
                                "value": 0.4
                            }
                        }
                    },
                    {
                        "transform": [
                            {
                                "filter": {
                                    "param": "brush"
                                }
                            },
                            {
                                "density": "Displacement"
                            },
                            {
                                "calculate": "datum[\"value\"]",
                                "as": "Displacement"
                            }
                        ],
                        "mark": "line",
                        "encoding": {
                            "x": {
                                "field": "Displacement",
                                "type": "quantitative",
                                "title": "Displacement"
                            },
                            "y": {
                                "field": "density",
                                "type": "quantitative",
                                "title": "probability",
                                "scale": {"domain": [0, 0.1]}
                            },
                            "color": {"value": "#e377c2"},
                            "opacity": {
                                "value": 1
                            }
                        }
                    }
                ]
            }
        ]
    }
]
}

You'll note that, when dragging a new selection, the histogram bugs out with tons of errors: Cannot read properties of undefined (reading 'marktype'). This appears to be caused by encoding.color on the histogram. Before entirely narrowing down this minimal example, I produced this error on this chart without the marktype error. The only difference is encoding.color on the histogram, which is set to an object related to my dataset that shouldn't work as well in the vega editor, but somehow works better. In this example, no selection line is displayed on the second histogram due to the color being incorrect, but it does produce the titular error message with no additional errors. I'm not sure whether this difference in behavior between the two is a second bug that deserves its own issue.

Checklist

  • I checked for duplicate issues.
@NateLanza
Copy link
Author

If it helps, the stacktrace in React:

TypeError: Cannot read properties of undefined (reading '0')
    at Object.eval (eval at Fd (vega-runtime.module.js:88:14), <anonymous>:3:102)
    at Ot._update (vega-dataflow.module.js:965:19)
    at Ot.evaluate (vega-dataflow.module.js:576:20)
    at Ot.run (vega-dataflow.module.js:601:17)
    at ij.Nue [as evaluate] (vega-dataflow.module.js:1525:17)
    at ij.evaluate (vega-view.module.js:1087:39)
    at ij.Due [as run] (vega-dataflow.module.js:1633:48)
    at Vega.js:46:23
    at VegaEmbed.js:36:13

Per the debugger, this comes from the following anonymous function, which I assume is eval'd:

var datum=event.item&&event.item.datum;
return [this.scale("concat_1_concat_0_x",_["$brush_AvgRating"][0]),this.scale("concat_1_concat_0_x",_["$brush_AvgRating"][1])]; 

Let me know if a separate issue in react-vega would be helpful.

@NateLanza
Copy link
Author

Here's a slightly simpler version where the issue still occurs; I've removed the calculation to rename "value" to the name of the field in the density plot. I wanted the signal to include the name of the field being brushed over because my application listens to signals & saves brush values externally, but this issues still occurs without the calculation.

I've also noticed that removing the params field entirely from the histogram solves this issue, as seen here. However, since I want the selection to go both ways, this doesn't really solve my issue. It appears that the density calculation in general doesn't work well with linking selections to other plots.

@NateLanza NateLanza changed the title Error: "Cannot read properties of undefined (reading '0')" from histogram when providing a default value to a linked scatterplot Error: "Cannot read properties of undefined (reading '0')" when trying to link selections between a density histogram and a scatterplot Aug 6, 2024
@NateLanza NateLanza changed the title Error: "Cannot read properties of undefined (reading '0')" when trying to link selections between a density histogram and a scatterplot Error: "Cannot read properties of undefined (reading '0')" when trying to link selections between a probability density histogram and a scatterplot Aug 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant