Pan & Zoom

Linked panning and zooming across plots: drag to pan, scroll to zoom. panZoom interactors update a set of bound selections, one per unique axis.

Loading Example... ⏳

Specification

JavaScript

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

await vg.coordinator().exec([
  vg.loadParquet("penguins", "data/penguins.parquet")
]);

const $xs = vg.Selection.intersect();
const $ys = vg.Selection.intersect();
const $zs = vg.Selection.intersect();
const $ws = vg.Selection.intersect();

export default vg.hconcat(
  vg.vconcat(
    vg.plot(
      vg.frame(),
      vg.dot(
        vg.from("penguins"),
        {x: "bill_length", y: "bill_depth", fill: "species", r: 2, clip: true}
      ),
      vg.panZoom({x: $xs, y: $ys}),
      vg.width(320),
      vg.height(240)
    ),
    vg.vspace(10),
    vg.plot(
      vg.frame(),
      vg.dot(
        vg.from("penguins"),
        {
          x: "bill_length",
          y: "flipper_length",
          fill: "species",
          r: 2,
          clip: true
        }
      ),
      vg.panZoom({x: $xs, y: $zs}),
      vg.width(320),
      vg.height(240)
    )
  ),
  vg.hspace(10),
  vg.vconcat(
    vg.plot(
      vg.frame(),
      vg.dot(
        vg.from("penguins"),
        {x: "body_mass", y: "bill_depth", fill: "species", r: 2, clip: true}
      ),
      vg.panZoom({x: $ws, y: $ys}),
      vg.width(320),
      vg.height(240)
    ),
    vg.vspace(10),
    vg.plot(
      vg.frame(),
      vg.dot(
        vg.from("penguins"),
        {x: "body_mass", y: "flipper_length", fill: "species", r: 2, clip: true}
      ),
      vg.panZoom({x: $ws, y: $zs}),
      vg.width(320),
      vg.height(240)
    )
  )
);

YAML

meta:
  title: Pan & Zoom
  description: >
    Linked panning and zooming across plots: drag to pan, scroll to zoom.
    `panZoom` interactors update a set of bound selections, one per unique axis.
data:
  penguins: { file: data/penguins.parquet }
hconcat:
- vconcat:
  - plot:
    - mark: frame
    - { mark: dot, data: { from: penguins },
        x: bill_length, y: bill_depth, fill: species, r: 2, clip: true }
    - { select: panZoom, x: $xs, y: $ys }
    width: 320
    height: 240
  - vspace: 10
  - plot:
    - mark: frame
    - { mark: dot, data: { from: penguins },
        x: bill_length, y: flipper_length, fill: species, r: 2, clip: true }
    - { select: panZoom, x: $xs, y: $zs }
    width: 320
    height: 240
- hspace: 10
- vconcat:
  - plot:
    - mark: frame
    - { mark: dot, data: { from: penguins },
        x: body_mass, y: bill_depth, fill: species, r: 2, clip: true }
    - { select: panZoom, x: $ws, y: $ys }
    width: 320
    height: 240
  - vspace: 10
  - plot:
    - mark: frame
    - { mark: dot, data: { from: penguins },
        x: body_mass, y: flipper_length, fill: species, r: 2, clip: true }
    - { select: panZoom, x: $ws, y: $zs }
    width: 320
    height: 240

JSON

{
  "meta": {
    "title": "Pan & Zoom",
    "description": "Linked panning and zooming across plots: drag to pan, scroll to zoom. `panZoom` interactors update a set of bound selections, one per unique axis.\n"
  },
  "data": {
    "penguins": {
      "file": "data/penguins.parquet"
    }
  },
  "hconcat": [
    {
      "vconcat": [
        {
          "plot": [
            {
              "mark": "frame"
            },
            {
              "mark": "dot",
              "data": {
                "from": "penguins"
              },
              "x": "bill_length",
              "y": "bill_depth",
              "fill": "species",
              "r": 2,
              "clip": true
            },
            {
              "select": "panZoom",
              "x": "$xs",
              "y": "$ys"
            }
          ],
          "width": 320,
          "height": 240
        },
        {
          "vspace": 10
        },
        {
          "plot": [
            {
              "mark": "frame"
            },
            {
              "mark": "dot",
              "data": {
                "from": "penguins"
              },
              "x": "bill_length",
              "y": "flipper_length",
              "fill": "species",
              "r": 2,
              "clip": true
            },
            {
              "select": "panZoom",
              "x": "$xs",
              "y": "$zs"
            }
          ],
          "width": 320,
          "height": 240
        }
      ]
    },
    {
      "hspace": 10
    },
    {
      "vconcat": [
        {
          "plot": [
            {
              "mark": "frame"
            },
            {
              "mark": "dot",
              "data": {
                "from": "penguins"
              },
              "x": "body_mass",
              "y": "bill_depth",
              "fill": "species",
              "r": 2,
              "clip": true
            },
            {
              "select": "panZoom",
              "x": "$ws",
              "y": "$ys"
            }
          ],
          "width": 320,
          "height": 240
        },
        {
          "vspace": 10
        },
        {
          "plot": [
            {
              "mark": "frame"
            },
            {
              "mark": "dot",
              "data": {
                "from": "penguins"
              },
              "x": "body_mass",
              "y": "flipper_length",
              "fill": "species",
              "r": 2,
              "clip": true
            },
            {
              "select": "panZoom",
              "x": "$ws",
              "y": "$zs"
            }
          ],
          "width": 320,
          "height": 240
        }
      ]
    }
  ]
}