Observable Framework: using DuckDBClient.sql() with vgplot

Community Help
1

I would like to load data using DuckDBClient.sql() and display with vgplot. I am able to do this with Observable Plot:

```js
const sql = DuckDBClient.sql({ rand: FileAttachment("./rand-xy.csv") });
```

```sql id=data
SELECT * FROM rand
```

```js
display(
  Plot.plot({
    height: 200,
    marks: [
      Plot.dot(data, {
        x: "x",
        y: "y",
      }),
    ],
  })
);
```

but what I thought would work with vgplot doesn’t:

```js
const sql = DuckDBClient.sql({ rand: FileAttachment("./rand-xy.csv") });
```

```js
display(
  vg.plot(
    vg.height(200),
    vg.dot(vg.from("rand"), {
      x: "x",
      y: "y",
    })
  )
);
```

I am expecting the table rand to be available, but this is not the case.

I can use sql front matter, but need to be able to dynamically choose files, which is why I would like to use DuckDBClient.sql.

Can anyone point me to where I am going wrong?

2

Overriding the definition of sql doesn’t work (currently) with our implementation of vgplot. You’ll need to use the SQL front matter instead.

The vgplot integration uses getDefaultClient which is defined here, and populated by calls to registerTable that is done automatically by generated code based on the SQL front matter:

3

No worries, thanks Mike :+1: