crossfilter

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.xLabelAnchor("center"),
    vg.yTickFormat("s"),
    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.xLabelAnchor("center"),
    vg.yTickFormat("s"),
    vg.height(200)
  )
);

YAML

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)
  xLabelAnchor: center
  yTickFormat: s
  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)
  xLabelAnchor: center
  yTickFormat: s
  height: 200

JSON

{
  "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)",
      "xLabelAnchor": "center",
      "yTickFormat": "s",
      "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)",
      "xLabelAnchor": "center",
      "yTickFormat": "s",
      "height": 200
    }
  ]
}

Python

import vgplot as vg

flights = vg.parquet("data/flights-200k.parquet")

brush = vg.selection.crossfilter()

view = vg.vconcat(
    vg.plot(
        vg.rect_y(
            data=flights,
            filter_by=brush,
            x=vg.bin("delay"),
            y=vg.count(),
            fill="steelblue",
            inset_left=0.5,
            inset_right=0.5,
        ),
        vg.interval_x(bind=brush),
        vg.x_domain("Fixed"),
        vg.x_label("Arrival Delay (min)"),
        vg.x_label_anchor("center"),
        vg.y_tick_format("s"),
        vg.height(200),
    ),
    vg.plot(
        vg.rect_y(
            data=flights,
            filter_by=brush,
            x=vg.bin("time"),
            y=vg.count(),
            fill="steelblue",
            inset_left=0.5,
            inset_right=0.5,
        ),
        vg.interval_x(bind=brush),
        vg.x_domain("Fixed"),
        vg.x_label("Departure Time (hour)"),
        vg.x_label_anchor("center"),
        vg.y_tick_format("s"),
        vg.height(200),
    ),
)