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

Allow vgplot to use DuckDBClient #1598

Open
angrytongan opened this issue Aug 22, 2024 · 5 comments
Open

Allow vgplot to use DuckDBClient #1598

angrytongan opened this issue Aug 22, 2024 · 5 comments
Labels
enhancement New feature or request

Comments

@angrytongan
Copy link
Contributor

From https://talk.observablehq.com/t/observable-framework-using-duckdbclient-sql-with-vgplot/9676/3:

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 not with vgplot:

```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",
    })
  )
);
```

@mbostock responded:

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

@angrytongan angrytongan added the enhancement New feature or request label Aug 22, 2024
@mbostock
Copy link
Member

For now, the easiest way to do this would be to provide your own definition of vg, replacing the use of the default DuckDB client in vgplot.js. That would look like this:

import * as vgplot from "npm:@uwdata/vgplot";

const db = await DuckDBClient.of({trips: FileAttachment("lib/nyc-taxi.parquet")});
const sql = db.sql.bind(db);

const coordinator = new vgplot.Coordinator();
const vg = vgplot.createAPIContext({coordinator});
coordinator.databaseConnector(vgplot.wasmConnector({duckdb: db._db}));

@angrytongan
Copy link
Contributor Author

Thanks @mbostock , works a treat 👍

@mbostock
Copy link
Member

mbostock commented Oct 9, 2024

Not sure what else there is to do here. Maybe the vg built-in should default to consuming sql._db as its DuckDB instance rather than the internal getDefaultClient method, so that when sql is redefined on the page, vg automatically inherits the altered definition?

Or is it sufficient to just have people redefine vg if they also want to redefine sql as shown in #1598 (comment)?

@angrytongan
Copy link
Contributor Author

🤔 I think my expectation was being able to use vg the same way as Plot. I don't know if / think this would be a common case. The workaround is fine and non-intrusive, so happy to use it.

This originally came about because we had a page with Plots we wanted to use a brush to control, and since vg has one, we used a vg graph rather than rewrite existing stuff. Definitely not a common case, and the workaround is great (and I guess will be obsoleted by #5).

@Fil
Copy link
Contributor

Fil commented Oct 15, 2024

Similar issue here #1747

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants