Examples

Mosaic-powered visualizations created with vgplot. These visualizations can be specified using a JavaScript API, or in a standalone YAML or JSON file. Each example includes code for all three specification formats.

For example, here is a line chart of historical Apple stock prices:

Loading Example... ⏳

JavaScriptYAMLJSON

import * as vg from "@uwdata/vgplot";

await vg.coordinator().exec([
  vg.loadParquet("aapl", "data/stocks.parquet", {where: "Symbol = 'AAPL'"})
]);

export default vg.plot(
  vg.lineY(
    vg.from("aapl"),
    {x: "Date", y: "Close"}
  ),
  vg.width(680),
  vg.height(200)
);

yaml

data:
  aapl: { file: data/stocks.parquet, where: Symbol = 'AAPL' }
plot:
- mark: lineY
  data: { from: aapl }
  x: Date
  y: Close
width: 680
height: 200

json

{
  "data": {
    "aapl": {
      "file": "data/stocks.parquet",
      "where": "Symbol = 'AAPL'"
    }
  },
  "plot": [
    {
      "mark": "lineY",
      "data": {
        "from": "aapl"
      },
      "x": "Date",
      "y": "Close"
    }
  ],
  "width": 680,
  "height": 200
}

WARNING

By default Mosaic connects to a DuckDB server. To use a different database connector (such as DuckDB-WASM in the browser), you must first configure the connector. For example:

import { coordinator, wasmConnector } from "@uwdata/vgplot";
coordinator().databaseConnector(wasmConnector());

TIP

For greater scalability and performance, consider using a local DuckDB data server or viewing examples in Jupyter.

Examples ​

Examples