Observable JS plot not rendering

[kamransoomro84]

Description

I have the followin quarto document in which I am trying to creat a simple OJS plot:

---
format: html
---

```{python}
import numpy as np

# import seaborn as sn


# def quad(x, a=3, b=2, c=1):
#     return a * x**2 + b * x + c


ojs_define(x=np.linspace(-10, 10, 20).tolist())

# sn.lineplot(quad(x))
```

```{ojs}
function quad(x, a=3, b=2, c=1) {
    return x.map(x => a * (x ** 2) + b * x + c);
}

Plot.plot({
    marks: [
        Plot.line({x: x, y: quad(x)})
    ]
})
```

But when I preview this document, I see the code but no plot. I am new to OJS so not sure what I'm doing wrong?

The output I see is shown below:

[cderv]

It could just be how you create your plot in OJS.

Using a data object shows the plot

---
format: html
---

```{python}
import numpy as np

ojs_define(x=np.linspace(-10, 10, 20).tolist())

```

```{ojs}
function quad(x, a=3, b=2, c=1) {
    return x.map(x => a * (x ** 2) + b * x + c);
}

data = x.map(xi => ({x: xi, y: quad([xi])[0]}))

Plot.plot({
    marks: [
        Plot.line(data, {x: "x", y: "y"})
    ]
})
```

[kamransoomro84]

Thanks. This works but I don't quite understand why I can't do this?

data = {
x: x,
y: quad(x)
}

I get an error when I try this:

OJS Syntax Error (line 25, column 1)Unexpected token

[kamransoomro84]

Nevermind I answered my own question. I was thinking data needs to be an object with two attributes but it's actually an array of objects with two attributes.