Cross-Filter Flights (10M)

Histograms showing arrival delay, departure time, and distance flown for 10 million flights. Once loaded, automatic pre-aggregation optimizations enable efficient cross-filtered selections.

You may need to wait a few seconds for the dataset to load.

Loading Example... ⏳

Specification

JavaScript

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

await vg.coordinator().exec([
  `CREATE TABLE IF NOT EXISTS flights10m AS SELECT GREATEST(-60, LEAST(ARR_DELAY, 180))::DOUBLE AS delay, DISTANCE AS distance, DEP_TIME AS time FROM 'https://idl.uw.edu/mosaic-datasets/data/flights-10m.parquet'`
]);

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

export default vg.vconcat(
  vg.plot(
    vg.rectY(
      vg.from("flights10m", {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("flights10m", {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("flights10m", {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 (10M)
  description: |
    Histograms showing arrival delay, departure time, and distance flown for 10 million flights.
    Once loaded, automatic pre-aggregation optimizations enable efficient cross-filtered selections.

    _You may need to wait a few seconds for the dataset to load._
data:
  flights10m: SELECT
    GREATEST(-60, LEAST(ARR_DELAY, 180))::DOUBLE AS delay,
    DISTANCE AS distance,
    DEP_TIME AS time
    FROM 'https://idl.uw.edu/mosaic-datasets/data/flights-10m.parquet'
params:
  brush: { select: crossfilter }
vconcat:
- plot:
  - mark: rectY
    data: { from: flights10m, 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: flights10m, 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: flights10m, 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 (10M)",
    "description": "Histograms showing arrival delay, departure time, and distance flown for 10 million flights.\nOnce loaded, automatic pre-aggregation optimizations enable efficient cross-filtered selections.\n\n_You may need to wait a few seconds for the dataset to load._\n"
  },
  "data": {
    "flights10m": "SELECT GREATEST(-60, LEAST(ARR_DELAY, 180))::DOUBLE AS delay, DISTANCE AS distance, DEP_TIME AS time FROM 'https://idl.uw.edu/mosaic-datasets/data/flights-10m.parquet'"
  },
  "params": {
    "brush": {
      "select": "crossfilter"
    }
  },
  "vconcat": [
    {
      "plot": [
        {
          "mark": "rectY",
          "data": {
            "from": "flights10m",
            "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": "flights10m",
            "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": "flights10m",
            "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
    }
  ]
}