Cross-Filter Flights (200k)

Histograms showing arrival delay, departure time, and distance flown for over 200,000 flights. Select a histogram region to cross-filter the charts. Each plot uses an intervalX interactor to populate a shared Selection with crossfilter resolution.

Loading Example... ⏳

Specification

JavaScript

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

await vg.coordinator().exec([
  vg.loadParquet("flights", "data/flights-200k.parquet")
]);

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

export default vg.vconcat(
  vg.plot(
    vg.rectY(
      vg.from("flights", {filterBy: $brush}),
      {
        x: vg.bin("delay"),
        y: vg.count(),
        fill: "steelblue",
        insetLeft: 0.5,
        insetRight: 0.5
      }
    ),
    vg.intervalX({as: $brush}),
    vg.xDomain(vg.Fixed),
    vg.xLabel("Arrival Delay (min)"),
    vg.yTickFormat("s"),
    vg.width(600),
    vg.height(200)
  ),
  vg.plot(
    vg.rectY(
      vg.from("flights", {filterBy: $brush}),
      {
        x: vg.bin("time"),
        y: vg.count(),
        fill: "steelblue",
        insetLeft: 0.5,
        insetRight: 0.5
      }
    ),
    vg.intervalX({as: $brush}),
    vg.xDomain(vg.Fixed),
    vg.xLabel("Departure Time (hour)"),
    vg.yTickFormat("s"),
    vg.width(600),
    vg.height(200)
  ),
  vg.plot(
    vg.rectY(
      vg.from("flights", {filterBy: $brush}),
      {
        x: vg.bin("distance"),
        y: vg.count(),
        fill: "steelblue",
        insetLeft: 0.5,
        insetRight: 0.5
      }
    ),
    vg.intervalX({as: $brush}),
    vg.xDomain(vg.Fixed),
    vg.xLabel("Flight Distance (miles)"),
    vg.yTickFormat("s"),
    vg.width(600),
    vg.height(200)
  )
);

YAML

meta:
  title: Cross-Filter Flights (200k)
  description: >
    Histograms showing arrival delay, departure time, and distance flown for over 200,000 flights.
    Select a histogram region to cross-filter the charts.
    Each plot uses an `intervalX` interactor to populate a shared Selection
    with `crossfilter` resolution.
data:
  flights: { file: data/flights-200k.parquet }
params:
  brush: { select: crossfilter }
vconcat:
- plot:
  - mark: rectY
    data: { from: flights, filterBy: $brush }
    x: { bin: delay }
    y: { count: }
    fill: steelblue
    insetLeft: 0.5
    insetRight: 0.5
  - select: intervalX
    as: $brush
  xDomain: Fixed
  xLabel: Arrival Delay (min)
  yTickFormat: s
  width: 600
  height: 200
- plot:
  - mark: rectY
    data: { from: flights, filterBy: $brush }
    x: { bin: time }
    y: { count: }
    fill: steelblue
    insetLeft: 0.5
    insetRight: 0.5
  - select: intervalX
    as: $brush
  xDomain: Fixed
  xLabel: Departure Time (hour)
  yTickFormat: s
  width: 600
  height: 200
- plot:
  - mark: rectY
    data: { from: flights, filterBy: $brush }
    x: { bin: distance }
    y: { count: }
    fill: steelblue
    insetLeft: 0.5
    insetRight: 0.5
  - select: intervalX
    as: $brush
  xDomain: Fixed
  xLabel: Flight Distance (miles)
  yTickFormat: s
  width: 600
  height: 200

JSON

{
  "meta": {
    "title": "Cross-Filter Flights (200k)",
    "description": "Histograms showing arrival delay, departure time, and distance flown for over 200,000 flights. Select a histogram region to cross-filter the charts. Each plot uses an `intervalX` interactor to populate a shared Selection with `crossfilter` resolution.\n"
  },
  "data": {
    "flights": {
      "file": "data/flights-200k.parquet"
    }
  },
  "params": {
    "brush": {
      "select": "crossfilter"
    }
  },
  "vconcat": [
    {
      "plot": [
        {
          "mark": "rectY",
          "data": {
            "from": "flights",
            "filterBy": "$brush"
          },
          "x": {
            "bin": "delay"
          },
          "y": {
            "count": null
          },
          "fill": "steelblue",
          "insetLeft": 0.5,
          "insetRight": 0.5
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "xDomain": "Fixed",
      "xLabel": "Arrival Delay (min)",
      "yTickFormat": "s",
      "width": 600,
      "height": 200
    },
    {
      "plot": [
        {
          "mark": "rectY",
          "data": {
            "from": "flights",
            "filterBy": "$brush"
          },
          "x": {
            "bin": "time"
          },
          "y": {
            "count": null
          },
          "fill": "steelblue",
          "insetLeft": 0.5,
          "insetRight": 0.5
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "xDomain": "Fixed",
      "xLabel": "Departure Time (hour)",
      "yTickFormat": "s",
      "width": 600,
      "height": 200
    },
    {
      "plot": [
        {
          "mark": "rectY",
          "data": {
            "from": "flights",
            "filterBy": "$brush"
          },
          "x": {
            "bin": "distance"
          },
          "y": {
            "count": null
          },
          "fill": "steelblue",
          "insetLeft": 0.5,
          "insetRight": 0.5
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "xDomain": "Fixed",
      "xLabel": "Flight Distance (miles)",
      "yTickFormat": "s",
      "width": 600,
      "height": 200
    }
  ]
}