# Observable Framework: using DuckDBClient.sql() with vgplot

**URL:** <https://talk.observablehq.com/t/observable-framework-using-duckdbclient-sql-with-vgplot/9676>\
**Category:** Help\
**Created:** [August 22, 2024, 6:54am UTC](https://talk.observablehq.com/t/observable-framework-using-duckdbclient-sql-with-vgplot/9676 "2024-08-22T06:54:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![angrytongan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/angrytongan/32/9125_2.png) [@angrytongan](https://talk.observablehq.com/u/angrytongan)\
**Post date:** [August 22, 2024, 6:54am UTC](https://talk.observablehq.com/t/observable-framework-using-duckdbclient-sql-with-vgplot/9676/1 "2024-08-22T06:54:04Z")

</div>

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

````auto
```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:

````auto
```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?

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 22, 2024, 12:25pm UTC](https://talk.observablehq.com/t/observable-framework-using-duckdbclient-sql-with-vgplot/9676/2 "2024-08-22T12:25:14Z")

</div>

Overriding the definition of `sql` doesn’t work (currently) with our implementation of vgplot. You’ll need to use the [SQL front matter](https://observablehq.com/framework/sql) 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:

> <https://github.com/observablehq/framework/blob/ea9ffc818f1fa415fb1202eff93275416ce8de24/src/client/stdlib/duckdb.js#L65-L68>

---

<div class="post-metadata">

**Author:** ![angrytongan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/angrytongan/32/9125_2.png) [@angrytongan](https://talk.observablehq.com/u/angrytongan)\
**Post date:** [August 22, 2024, 9:16pm UTC](https://talk.observablehq.com/t/observable-framework-using-duckdbclient-sql-with-vgplot/9676/3 "2024-08-22T21:16:21Z")

</div>

No worries, thanks Mike 👍