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", inset: 0.5}
    ),
    vg.intervalX({as: $brush}),
    vg.xDomain(vg.Fixed),
    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", inset: 0.5}
    ),
    vg.intervalX({as: $brush}),
    vg.xDomain(vg.Fixed),
    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", inset: 0.5}
    ),
    vg.intervalX({as: $brush}),
    vg.xDomain(vg.Fixed),
    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
    inset: 0.5
  - select: intervalX
    as: $brush
  xDomain: Fixed
  yTickFormat: s
  width: 600
  height: 200
- plot:
  - mark: rectY
    data: { from: flights, filterBy: $brush }
    x: { bin: time }
    y: { count: }
    fill: steelblue
    inset: 0.5
  - select: intervalX
    as: $brush
  xDomain: Fixed
  yTickFormat: s
  width: 600
  height: 200
- plot:
  - mark: rectY
    data: { from: flights, filterBy: $brush }
    x: { bin: distance }
    y: { count: }
    fill: steelblue
    inset: 0.5
  - select: intervalX
    as: $brush
  xDomain: Fixed
  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",
          "inset": 0.5
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "xDomain": "Fixed",
      "yTickFormat": "s",
      "width": 600,
      "height": 200
    },
    {
      "plot": [
        {
          "mark": "rectY",
          "data": {
            "from": "flights",
            "filterBy": "$brush"
          },
          "x": {
            "bin": "time"
          },
          "y": {
            "count": null
          },
          "fill": "steelblue",
          "inset": 0.5
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "xDomain": "Fixed",
      "yTickFormat": "s",
      "width": 600,
      "height": 200
    },
    {
      "plot": [
        {
          "mark": "rectY",
          "data": {
            "from": "flights",
            "filterBy": "$brush"
          },
          "x": {
            "bin": "distance"
          },
          "y": {
            "count": null
          },
          "fill": "steelblue",
          "inset": 0.5
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "xDomain": "Fixed",
      "yTickFormat": "s",
      "width": 600,
      "height": 200
    }
  ]
}