Density Groups

Density plots of penguin bill depths, grouped by species. The normalize parameter supports different forms of comparison, controlling if an individual density estimate is scaled by total point mass or normalized by the sum or max of the point mass. The stack and offset parameters control stacking of density areas.

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 $normalize = vg.Param.value("none");
const $stack = vg.Param.value(false);
const $offset = vg.Param.value(null);

export default vg.vconcat(
  vg.hconcat(
    vg.menu({label: "Normalize", as: $normalize, options: ["none", "sum", "max"]}),
    vg.menu({label: "Stack", as: $stack, options: [false, true]}),
    vg.menu({
      label: "Offset",
      as: $offset,
      options: [
      {label: "none", value: null},
      {label: "normalize", value: "normalize"},
      {label: "center", value: "center"}
    ]
    })
  ),
  vg.plot(
    vg.densityY(
      vg.from("penguins"),
      {
        x: "bill_depth",
        fill: "species",
        fillOpacity: 0.4,
        bandwidth: $bandwidth,
        normalize: $normalize,
        stack: $stack,
        offset: $offset
      }
    ),
    vg.marginLeft(50),
    vg.height(200)
  )
);

YAML

meta:
  title: Density Groups
  description: >
    Density plots of penguin bill depths, grouped by species.
    The normalize parameter supports different forms of comparison,
    controlling if an individual density estimate is scaled by total point
    mass or normalized by the sum or max of the point mass.
    The stack and offset parameters control stacking of density areas.
data:
  penguins: { file: data/penguins.parquet }
params:
  bandwidth: 20
  normalize: none
  stack: false
  offset: null
vconcat:
- hconcat:
  - input: menu
    label: Normalize
    as: $normalize
    options: [none, sum, max]
  - input: menu
    label: Stack
    as: $stack
    options: [false, true]
  - input: menu
    label: Offset
    as: $offset
    options:
      - { label: none, value: null }
      - { label: normalize, value: normalize }
      - { label: center, value: center }
- plot:
  - mark: densityY
    data: { from: penguins }
    x: bill_depth
    fill: species
    fillOpacity: 0.4
    bandwidth: $bandwidth
    normalize: $normalize
    stack: $stack
    offset: $offset
  marginLeft: 50
  height: 200

JSON

{
  "meta": {
    "title": "Density Groups",
    "description": "Density plots of penguin bill depths, grouped by species. The normalize parameter supports different forms of comparison, controlling if an individual density estimate is scaled by total point mass or normalized by the sum or max of the point mass. The stack and offset parameters control stacking of density areas.\n"
  },
  "data": {
    "penguins": {
      "file": "data/penguins.parquet"
    }
  },
  "params": {
    "bandwidth": 20,
    "normalize": "none",
    "stack": false,
    "offset": null
  },
  "vconcat": [
    {
      "hconcat": [
        {
          "input": "menu",
          "label": "Normalize",
          "as": "$normalize",
          "options": [
            "none",
            "sum",
            "max"
          ]
        },
        {
          "input": "menu",
          "label": "Stack",
          "as": "$stack",
          "options": [
            false,
            true
          ]
        },
        {
          "input": "menu",
          "label": "Offset",
          "as": "$offset",
          "options": [
            {
              "label": "none",
              "value": null
            },
            {
              "label": "normalize",
              "value": "normalize"
            },
            {
              "label": "center",
              "value": "center"
            }
          ]
        }
      ]
    },
    {
      "plot": [
        {
          "mark": "densityY",
          "data": {
            "from": "penguins"
          },
          "x": "bill_depth",
          "fill": "species",
          "fillOpacity": 0.4,
          "bandwidth": "$bandwidth",
          "normalize": "$normalize",
          "stack": "$stack",
          "offset": "$offset"
        }
      ],
      "marginLeft": 50,
      "height": 200
    }
  ]
}