document Mosaic

docs/lib/mosaic.md

@@ -0,0 +1,82 @@
+---
+sql:
+  trips: nyc-taxi.parquet
+---
+
+# Mosaic
+
+[Mosaic](https://uwdata.github.io/mosaic/) is a system for linking data visualizations, tables, and input widgets, all leveraging a database (DuckDB) for scalable processing. With Mosaic, you can interactively visualize and explore millions —and even billions— of data points.
+
+The example below shows 1 million taxi rides pickup and dropoff points in New York City on Jan 1–3, 2010. The dataset is stored in a 8MB [Apache Parquet](./arrow#apache-parquet) file, generated with a data loader.
+
+${maps}
+
+${histogram}
+
+The map views for pickups and dropoffs are coordinated. You can also select an interval in the histogram to filter the maps. _What spatial patterns can you find?_
+
+---
+
+The code below creates three views, coordinated by Mosaic’s [crossfilter](https://uwdata.github.io/mosaic/api/core/selection.html#selection-crossfilter) helper.
+
+```js echo
+// Create a shared filter
+const $filter = vg.Selection.crossfilter();
+
+// Create the maps
+const defaultAttributes = [
+  vg.width(335),
+  vg.height(550),
+  vg.margin(0),
+  vg.xAxis(null),
+  vg.yAxis(null),
+  vg.xDomain([297000, 297000 + 28.36 * 335]),
+  vg.yDomain([57900, 57900 + 28.36 * 550]), // ensure aspect ratio of 1
+  vg.colorScale("symlog")
+];
+
+const maps = vg.hconcat(
+  vg.plot(
+    vg.raster(vg.from("trips", {filterBy: $filter}), {x: "px", y: "py", imageRendering: "pixelated"}),
+    vg.intervalXY({as: $filter}),
+    vg.text([{label: "Taxi Pickups"}], {
+      dx: 10,
+      dy: 10,
+      text: "label",
+      fill: "black",
+      fontSize: "1.2em",
+      frameAnchor: "top-left"
+    }),
+    ...defaultAttributes,
+    vg.colorScheme("blues")
+  ),
+  vg.hspace(10),
+  vg.plot(
+    vg.raster(vg.from("trips", {filterBy: $filter}), {x: "dx", y: "dy", imageRendering: "pixelated"}),
+    vg.intervalXY({as: $filter}),
+    vg.text([{label: "Taxi Dropoffs"}], {
+      dx: 10,
+      dy: 10,
+      text: "label",
+      fill: "black",
+      fontSize: "1.2em",
+      frameAnchor: "top-left"
+    }),
+    ...defaultAttributes,
+    vg.colorScheme("oranges")
+  )
+);
+
+// Create the histogram
+const histogram = vg.plot(
+  vg.rectY(vg.from("trips"), {x: vg.bin("time"), y: vg.count(), fill: "steelblue", inset: 0.5}),
+  vg.intervalX({as: $filter}),
+  vg.yTickFormat("s"),
+  vg.xLabel("Pickup Hour"),
+  vg.yLabel("Number of Rides"),
+  vg.width(680),
+  vg.height(100)
+);
+```
+
+For more Mosaic examples, see the [Mosaic + Framework](https://uwdata.github.io/mosaic-framework-example/) website.

docs/lib/nyc-taxi.parquet.sh

@@ -0,0 +1,25 @@
+duckdb :memory: << EOF
+-- Load spatial extension
+INSTALL spatial; LOAD spatial;
+
+-- Project coordinates, following the example at https://github.com/duckdb/duckdb_spatial
+CREATE TEMP TABLE rides AS SELECT
+  pickup_datetime::TIMESTAMP AS datetime,
+  ST_Transform(ST_Point(pickup_latitude, pickup_longitude), 'EPSG:4326', 'EPSG:32118') AS pick,
+  ST_Transform(ST_Point(dropoff_latitude, dropoff_longitude), 'EPSG:4326', 'EPSG:32118') AS drop
+FROM 'https://uwdata.github.io/mosaic-datasets/data/nyc-rides-2010.parquet';
+
+-- Write output parquet file
+COPY (SELECT
+  HOUR(datetime) + MINUTE(datetime) / 60 AS time,
+  ST_X(pick)::INTEGER AS px, -- extract pickup x-coord
+  ST_Y(pick)::INTEGER AS py, -- extract pickup y-coord
+  ST_X(drop)::INTEGER AS dx, -- extract dropff x-coord
+  ST_Y(drop)::INTEGER AS dy  -- extract dropff y-coord
+FROM rides
+ORDER BY 2,3,4,5,1 -- optimize output size by sorting
+) TO 'trips.parquet' (COMPRESSION 'ZSTD', row_group_size 10000000);
+EOF
+
+cat trips.parquet >&1  # Copy payload to stdout
+rm trips.parquet       # Clean up

observablehq.config.ts

@@ -70,6 +70,7 @@ export default {
         {name: "Mapbox GL JS", path: "/lib/mapbox-gl"},
         {name: "Mermaid", path: "/lib/mermaid"},
         {name: "Microsoft Excel (XLSX)", path: "/lib/xlsx"},
+        {name: "Mosaic", path: "/lib/mosaic"},
         {name: "Observable Generators", path: "/lib/generators"},
         {name: "Observable Inputs", path: "/lib/inputs"},
         {name: "Observable Plot", path: "/lib/plot"},