Overview + Detail

Select the top "overview" series to zoom the "focus" view below. An intervalX interactor updates a selection that filters the focus view. The line and area marks can apply M4 optimization to reduce the number of data points returned: rather than draw all points, a dramatically smaller subset can still faithfully represent these area charts.

Loading Example... ⏳

Specification

JavaScript

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

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

const $brush = vg.Selection.intersect();

export default vg.vconcat(
  vg.plot(
    vg.areaY(
      vg.from("walk"),
      {x: "t", y: "v", fill: "steelblue"}
    ),
    vg.intervalX({as: $brush}),
    vg.width(680),
    vg.height(200)
  ),
  vg.plot(
    vg.areaY(
      vg.from("walk", {filterBy: $brush}),
      {x: "t", y: "v", fill: "steelblue"}
    ),
    vg.yDomain(vg.Fixed),
    vg.width(680),
    vg.height(200)
  )
);

YAML

meta:
  title: Overview + Detail
  description: >
    Select the top "overview" series to zoom the "focus" view below.
    An `intervalX` interactor updates a selection that filters the focus view.
    The `line` and `area` marks can apply
    [M4](https://observablehq.com/@uwdata/m4-scalable-time-series-visualization)
    optimization to reduce the number of data points returned:
    rather than draw all points, a dramatically smaller subset can still
    faithfully represent these area charts.
data:
  walk: { file: data/random-walk.parquet }
vconcat:
- plot:
  - mark: areaY
    data: { from: walk }
    x: t
    y: v
    fill: steelblue
  - select: intervalX
    as: $brush
  width: 680
  height: 200
- plot:
  - mark: areaY
    data: { from: walk, filterBy: $brush }
    x: t
    y: v
    fill: steelblue
  yDomain: Fixed
  width: 680
  height: 200

JSON

{
  "meta": {
    "title": "Overview + Detail",
    "description": "Select the top \"overview\" series to zoom the \"focus\" view below. An `intervalX` interactor updates a selection that filters the focus view. The `line` and `area` marks can apply [M4](https://observablehq.com/@uwdata/m4-scalable-time-series-visualization) optimization to reduce the number of data points returned: rather than draw all points, a dramatically smaller subset can still faithfully represent these area charts.\n"
  },
  "data": {
    "walk": {
      "file": "data/random-walk.parquet"
    }
  },
  "vconcat": [
    {
      "plot": [
        {
          "mark": "areaY",
          "data": {
            "from": "walk"
          },
          "x": "t",
          "y": "v",
          "fill": "steelblue"
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "width": 680,
      "height": 200
    },
    {
      "plot": [
        {
          "mark": "areaY",
          "data": {
            "from": "walk",
            "filterBy": "$brush"
          },
          "x": "t",
          "y": "v",
          "fill": "steelblue"
        }
      ],
      "yDomain": "Fixed",
      "width": 680,
      "height": 200
    }
  ]
}