Cross-Filter Flights (10M)

Histograms showing arrival delay, departure time, and distance flown for 10 million flights. Once loaded, automatically-generated indexes 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 TEMP 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://uwdata.github.io/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", inset: 0.5}
    ),
    vg.intervalX({as: $brush}),
    vg.xDomain(vg.Fixed),
    vg.marginLeft(75),
    vg.width(600),
    vg.height(200)
  ),
  vg.plot(
    vg.rectY(
      vg.from("flights10m", {filterBy: $brush}),
      {x: vg.bin("time"), y: vg.count(), fill: "steelblue", inset: 0.5}
    ),
    vg.intervalX({as: $brush}),
    vg.xDomain(vg.Fixed),
    vg.marginLeft(75),
    vg.width(600),
    vg.height(200)
  ),
  vg.plot(
    vg.rectY(
      vg.from("flights10m", {filterBy: $brush}),
      {x: vg.bin("distance"), y: vg.count(), fill: "steelblue", inset: 0.5}
    ),
    vg.intervalX({as: $brush}),
    vg.xDomain(vg.Fixed),
    vg.marginLeft(75),
    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, automatically-generated indexes 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://uwdata.github.io/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
    inset: 0.5
  - select: intervalX
    as: $brush
  xDomain: Fixed
  marginLeft: 75
  width: 600
  height: 200
- plot:
  - mark: rectY
    data: { from: flights10m, filterBy: $brush }
    x: { bin: time }
    y: { count: }
    fill: steelblue
    inset: 0.5
  - select: intervalX
    as: $brush
  xDomain: Fixed
  marginLeft: 75
  width: 600
  height: 200
- plot:
  - mark: rectY
    data: { from: flights10m, filterBy: $brush }
    x: { bin: distance }
    y: { count: }
    fill: steelblue
    inset: 0.5
  - select: intervalX
    as: $brush
  xDomain: Fixed
  marginLeft: 75
  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, automatically-generated indexes 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://uwdata.github.io/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",
          "inset": 0.5
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "xDomain": "Fixed",
      "marginLeft": 75,
      "width": 600,
      "height": 200
    },
    {
      "plot": [
        {
          "mark": "rectY",
          "data": {
            "from": "flights10m",
            "filterBy": "$brush"
          },
          "x": {
            "bin": "time"
          },
          "y": {
            "count": null
          },
          "fill": "steelblue",
          "inset": 0.5
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "xDomain": "Fixed",
      "marginLeft": 75,
      "width": 600,
      "height": 200
    },
    {
      "plot": [
        {
          "mark": "rectY",
          "data": {
            "from": "flights10m",
            "filterBy": "$brush"
          },
          "x": {
            "bin": "distance"
          },
          "y": {
            "count": null
          },
          "fill": "steelblue",
          "inset": 0.5
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "xDomain": "Fixed",
      "marginLeft": 75,
      "width": 600,
      "height": 200
    }
  ]
}