Density 2D

A 2D density plot in which circle size indicates the point density. The data is divided by fill color into three sets of densities. 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("penguins", "data/penguins.parquet")
]);

const $bandwidth = vg.Param.value(20);
const $bins = vg.Param.value(20);

export default vg.vconcat(
  vg.hconcat(
    vg.slider({label: "Bandwidth (σ)", as: $bandwidth, min: 1, max: 100}),
    vg.slider({label: "Bins", as: $bins, min: 10, max: 60})
  ),
  vg.plot(
    vg.density(
      vg.from("penguins"),
      {
        x: "bill_length",
        y: "bill_depth",
        r: "density",
        fill: "species",
        fillOpacity: 0.5,
        width: $bins,
        height: $bins,
        bandwidth: $bandwidth
      }
    ),
    vg.dot(
      vg.from("penguins"),
      {x: "bill_length", y: "bill_depth", fill: "currentColor", r: 1}
    ),
    vg.rRange([0, 16]),
    vg.xAxis("bottom"),
    vg.xLabelAnchor("center"),
    vg.yAxis("right"),
    vg.yLabelAnchor("center"),
    vg.margins({top: 5, bottom: 30, left: 5, right: 50}),
    vg.width(700),
    vg.height(480)
  )
);

YAML

meta:
  title: Density 2D
  description: >
    A 2D `density` plot in which circle size indicates the point density.
    The data is divided by fill color into three sets of densities.
    To change the amount of smoothing, use the slider to set the kernel bandwidth.
data:
  penguins: { file: data/penguins.parquet }
params:
  bandwidth: 20
  bins: 20
vconcat:
- hconcat:
  - input: slider
    label: Bandwidth (σ)
    as: $bandwidth
    min: 1
    max: 100
  - input: slider
    label: Bins
    as: $bins
    min: 10
    max: 60
- plot:
  - mark: density
    data: { from: penguins }
    x: bill_length
    y: bill_depth
    r: density
    fill: species
    fillOpacity: 0.5
    width: $bins
    height: $bins
    bandwidth: $bandwidth
  - mark: dot
    data: { from: penguins }
    x: bill_length
    y: bill_depth
    fill: currentColor
    r: 1
  rRange: [0, 16]
  xAxis: bottom
  xLabelAnchor: center
  yAxis: right
  yLabelAnchor: center
  margins: { top: 5, bottom: 30, left: 5, right: 50 }
  width: 700
  height: 480

JSON

{
  "meta": {
    "title": "Density 2D",
    "description": "A 2D `density` plot in which circle size indicates the point density. The data is divided by fill color into three sets of densities. To change the amount of smoothing, use the slider to set the kernel bandwidth.\n"
  },
  "data": {
    "penguins": {
      "file": "data/penguins.parquet"
    }
  },
  "params": {
    "bandwidth": 20,
    "bins": 20
  },
  "vconcat": [
    {
      "hconcat": [
        {
          "input": "slider",
          "label": "Bandwidth (σ)",
          "as": "$bandwidth",
          "min": 1,
          "max": 100
        },
        {
          "input": "slider",
          "label": "Bins",
          "as": "$bins",
          "min": 10,
          "max": 60
        }
      ]
    },
    {
      "plot": [
        {
          "mark": "density",
          "data": {
            "from": "penguins"
          },
          "x": "bill_length",
          "y": "bill_depth",
          "r": "density",
          "fill": "species",
          "fillOpacity": 0.5,
          "width": "$bins",
          "height": "$bins",
          "bandwidth": "$bandwidth"
        },
        {
          "mark": "dot",
          "data": {
            "from": "penguins"
          },
          "x": "bill_length",
          "y": "bill_depth",
          "fill": "currentColor",
          "r": 1
        }
      ],
      "rRange": [
        0,
        16
      ],
      "xAxis": "bottom",
      "xLabelAnchor": "center",
      "yAxis": "right",
      "yLabelAnchor": "center",
      "margins": {
        "top": 5,
        "bottom": 30,
        "left": 5,
        "right": 50
      },
      "width": 700,
      "height": 480
    }
  ]
}