An example integrating the MotherDuck WASM Client library with Mosaic to produce interactive visualizations.
Install dependencies and run the dev server:
npm install
npm run dev
Navigate to the localhost URL displayed.
Copy your MotherDuck service token from your account (in the Settings area of the user menu) and paste it into the input field indicated. Click "Connect". If you need to reconnect, first refresh the page.
The example contains multiple visualizations. Select between them using the selector at the top.
The "Mark Types" example reproduces the Mosaic example of the same name. By default, it generates local data, but an option can be toggled in code to use a MotherDuck share instead. See instructions in MarkTypesViz.ts.
The "NYPD Complaints" example implements a Mosaic version of the MotherDuck WASM Client example of the same name. It similarly depends on the sample_data database automatically attached to MotherDuck accounts. If your account does not have this database, you can reattach it by running:
ATTACH 'md:_share/sample_data/23b0d623-1361-421d-ae77-62d701d471e6';The "Flights" (both 200K and 10M row versions), "Earthquakes", "Gaia Star Catalog" and "Seattle Weather" examples reproduce the similarly-named Mosaic examples, see: Cross-Filter Flights (200K), Cross-Filter Flights (10M), Earthquakes, Gaia Star Catalog and Seattle Weather. They all depend on access to a MotherDuck share. To attach this share to your account, run:
ATTACH 'md:_share/mosaic_examples/b01cfda8-239e-4148-a228-054b94cdc3b4';These example demonstrate using MotherDuck's hybrid execution to materialize remote data into temporary local tables to improve interactive performance. See, for example, the initialize method in NYPDComplaintsViz.ts.
The main integration with Mosiac is in mdConnector.ts. This implements a custom Mosaic Connector that connects to MotherDuck, given a MotherDuck service token.
Because Mosaic expects results in Arrow Table format in some cases, this connector uses the MotherDuck WASM Client API that returns the underlying Arrow RecordBatch stream, reads all batches from that stream, and constructs an Arrow Table from them.
The singleton Mosaic Coordinator is configured with this custom connector in App.tsx, after receiving the MotherDuck service token from the user.