Use existing duckdb wasm database to render charts

[kalyanm2305]

Hi,

I have an angular application where users can interact with parquet files and perform some basic data transformations like filter,sort, pivot . For all the above mentioned transformations, the uploaded file gets stored into a duckdb wasm db as a table. Now I plan to use the same db to create charts using uwdata/mosaic and came across this https://observablehq.com/framework/lib/mosaic.

import {DuckDBClient} from "npm:@observablehq/duckdb";
import * as vgplot from "npm:@uwdata/vgplot";

const db = await DuckDBClient.of({trips: FileAttachment("nyc-taxi.parquet")});
const coordinator = new vgplot.Coordinator();
coordinator.databaseConnector(vgplot.wasmConnector({duckdb: db._db}));
const vg = vgplot.createAPIContext({coordinator});

Could you please let me know if there is a way to do so? I understand that there is an instance of duckdb wasm that gets created by default and I want to avoid and instead use the tables in the existing duckdb wasm database that my application is using.

Thanks
Kalyan

[mbostock]

How are you integrating Framework with your Angular application? Are you using Angular within Framework, or are you embedding Framework in an iframe, or something else?

[kalyanm2305]

I would prefer using an iframe, but the primary questions is around being able to re-use the existing duckdb with observablehq to render simple charts

[mbostock]

If you’re using an iframe, you probably need to use postMessage for cross-origin communication, where your Framework code posts a message to the parent iframe to run the query. You’d only be able to expose the DuckDB-Wasm instance from the parent frame to the child frame if they run on the same origin.

[mbostock]

(And if you want to create a DuckDBClient from an existing DuckDB-Wasm AsyncDuckDB instance, you can pass it to the DuckDBClient constructor.)