Creating Plots Interactive Demo doesn't work

[Kyxsune]

Describe the bug

So I'm testing out the scatterplot module with the demo https://www.gradio.app/guides/creating-plots and even the simple example won't work correctly. It appears to fail due to an error in svelte:

Index.svelte:215 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at Index.svelte:215:17
    at run (svelte.js:41:9)
    at Array.map (<anonymous>)
    at svelte.js:3182:48
    at flush (svelte.js:2141:5)

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

import gradio as gr
import pandas as pd
import numpy as np
import random

df = pd.DataFrame({
    'height': np.random.randint(50, 70, 25),
    'weight': np.random.randint(120, 320, 25),
    'age': np.random.randint(18, 65, 25),
    'ethnicity': [random.choice(["white", "black", "asian"]) for _ in range(25)]
})

with gr.Blocks() as demo:
    with gr.Row():
        ethnicity = gr.Dropdown(["all", "white", "black", "asian"], value="all")
        max_age = gr.Slider(18, 65, value=65)

    def filtered_df(ethnic, age):
        _df = df if ethnic == "all" else df[df["ethnicity"] == ethnic]
        _df = _df[_df["age"] < age]
        return _df

    gr.ScatterPlot(filtered_df, inputs=[ethnicity, max_age], x="weight", y="height", title="Weight x Height")
    gr.LinePlot(filtered_df, inputs=[ethnicity, max_age], x="age", y="height", title="Age x Height")

demo.launch()

Screenshot

Logs

Index.svelte:215 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at Index.svelte:215:17
    at run (svelte.js:41:9)
    at Array.map (<anonymous>)
    at svelte.js:3182:48
    at flush (svelte.js:2141:5)

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.44.0
gradio_client version: 1.3.0

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 4.4.0
fastapi: 0.112.4
ffmpy: 0.4.0
gradio-client==1.3.0 is not installed.
httpx: 0.27.2
huggingface-hub: 0.24.6
importlib-resources: 6.4.4
jinja2: 3.1.4
markupsafe: 2.1.5
matplotlib: 3.9.2
numpy: 2.1.1
orjson: 3.10.7
packaging: 24.1
pandas: 2.2.2
pillow: 10.4.0
pydantic: 2.9.0
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.2
ruff: 0.6.4
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.5
typing-extensions: 4.12.2
urllib3: 2.2.2
uvicorn: 0.30.6
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.9.0
httpx: 0.27.2
huggingface-hub: 0.24.6
packaging: 24.1
typing-extensions: 4.12.2
websockets: 12.0

Severity

Blocking usage of gradio

[Kyxsune]

Can be seen on the hosted instance as well: https://huggingface.co/spaces/gradio/plot_guide_interactive

[jayden-nnn]

I also experienced the same issue. Although I failed to identify where this error came from, I temporarily resolved this issue by using different dependency; While this issue still open, this specific dependency might be helpful for others who are experiencing the same error:

gradio = "4.38.0"
pandas = "^2.2.2"
pydantic = "2.9.0"
fastapi = "0.112.2"
pydantic-core = "2.23.2"