Density 1D

Density plots (densityY mark) for over 200,000 flights, created using kernel density estimation. Binning is performned in-database, subsequent smoothing in-browser. The distance density uses a log-scaled domain. To change the amount of smoothing, use the slider to set the kernel bandwidth.

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();
const $bandwidth = vg.Param.value(20);

export default vg.vconcat(
  vg.slider({label: "Bandwidth (σ)", as: $bandwidth, min: 0.1, max: 100, step: 0.1}),
  vg.plot(
    vg.densityY(
      vg.from("flights", {filterBy: $brush}),
      {x: "delay", fill: "#888", fillOpacity: 0.5, bandwidth: $bandwidth}
    ),
    vg.intervalX({as: $brush}),
    vg.yAxis(null),
    vg.xDomain(vg.Fixed),
    vg.width(600),
    vg.marginLeft(10),
    vg.height(200)
  ),
  vg.plot(
    vg.densityY(
      vg.from("flights", {filterBy: $brush}),
      {x: "distance", fill: "#888", fillOpacity: 0.5, bandwidth: $bandwidth}
    ),
    vg.intervalX({as: $brush}),
    vg.yAxis(null),
    vg.xScale("log"),
    vg.xDomain(vg.Fixed),
    vg.width(600),
    vg.marginLeft(10),
    vg.height(200)
  )
);

YAML

meta:
  title: Density 1D
  description: >
    Density plots (`densityY` mark) for over 200,000 flights, created using kernel density estimation.
    Binning is performned in-database, subsequent smoothing in-browser.
    The distance density uses a log-scaled domain.
    To change the amount of smoothing, use the slider to set the kernel bandwidth.
data:
  flights: { file: data/flights-200k.parquet }
params:
  brush: { select: crossfilter }
  bandwidth: 20
vconcat:
- input: slider
  label: Bandwidth (σ)
  as: $bandwidth
  min: 0.1
  max: 100
  step: 0.1
- plot:
  - mark: densityY
    data: { from: flights, filterBy: $brush }
    x: delay
    fill: '#888'
    fillOpacity: 0.5
    bandwidth: $bandwidth
  - select: intervalX
    as: $brush
  yAxis: null
  xDomain: Fixed
  width: 600
  marginLeft: 10
  height: 200
- plot:
  - mark: densityY
    data: { from: flights, filterBy: $brush }
    x: distance
    fill: '#888'
    fillOpacity: 0.5
    bandwidth: $bandwidth
  - select: intervalX
    as: $brush
  yAxis: null
  xScale: log
  xDomain: Fixed
  width: 600
  marginLeft: 10
  height: 200

JSON

{
  "meta": {
    "title": "Density 1D",
    "description": "Density plots (`densityY` mark) for over 200,000 flights, created using kernel density estimation. Binning is performned in-database, subsequent smoothing in-browser. The distance density uses a log-scaled domain. To change the amount of smoothing, use the slider to set the kernel bandwidth.\n"
  },
  "data": {
    "flights": {
      "file": "data/flights-200k.parquet"
    }
  },
  "params": {
    "brush": {
      "select": "crossfilter"
    },
    "bandwidth": 20
  },
  "vconcat": [
    {
      "input": "slider",
      "label": "Bandwidth (σ)",
      "as": "$bandwidth",
      "min": 0.1,
      "max": 100,
      "step": 0.1
    },
    {
      "plot": [
        {
          "mark": "densityY",
          "data": {
            "from": "flights",
            "filterBy": "$brush"
          },
          "x": "delay",
          "fill": "#888",
          "fillOpacity": 0.5,
          "bandwidth": "$bandwidth"
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "yAxis": null,
      "xDomain": "Fixed",
      "width": 600,
      "marginLeft": 10,
      "height": 200
    },
    {
      "plot": [
        {
          "mark": "densityY",
          "data": {
            "from": "flights",
            "filterBy": "$brush"
          },
          "x": "distance",
          "fill": "#888",
          "fillOpacity": 0.5,
          "bandwidth": "$bandwidth"
        },
        {
          "select": "intervalX",
          "as": "$brush"
        }
      ],
      "yAxis": null,
      "xScale": "log",
      "xDomain": "Fixed",
      "width": 600,
      "marginLeft": 10,
      "height": 200
    }
  ]
}