Contour Plot

Here heatmap and contour marks visualize the density of data points in a scatter plot of penguin measurments. Setting the fill color to "species" subdivides the data into three sets of densities.

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(40);
const $thresholds = vg.Param.value(10);

export default vg.vconcat(
  vg.hconcat(
    vg.slider({label: "Bandwidth (σ)", as: $bandwidth, min: 1, max: 100}),
    vg.slider({label: "Thresholds", as: $thresholds, min: 2, max: 20})
  ),
  vg.plot(
    vg.heatmap(
      vg.from("penguins"),
      {
        x: "bill_length",
        y: "bill_depth",
        fill: "species",
        bandwidth: $bandwidth
      }
    ),
    vg.contour(
      vg.from("penguins"),
      {
        x: "bill_length",
        y: "bill_depth",
        stroke: "species",
        bandwidth: $bandwidth,
        thresholds: $thresholds
      }
    ),
    vg.dot(
      vg.from("penguins"),
      {x: "bill_length", y: "bill_depth", fill: "currentColor", r: 1}
    ),
    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: Contour Plot
  description: >
    Here `heatmap` and `contour` marks visualize the density of
    data points in a scatter plot of penguin measurments.
    Setting the `fill` color to `"species"` subdivides
    the data into three sets of densities.
data:
  penguins: { file: data/penguins.parquet }
params:
  bandwidth: 40
  thresholds: 10
vconcat:
- hconcat:
  - input: slider
    label: Bandwidth (σ)
    as: $bandwidth
    min: 1
    max: 100
  - input: slider
    label: Thresholds
    as: $thresholds
    min: 2
    max: 20
- plot:
  - mark: heatmap
    data: { from: penguins }
    x: bill_length
    y: bill_depth
    fill: species
    bandwidth: $bandwidth
  - mark: contour
    data: { from: penguins }
    x: bill_length
    y: bill_depth
    stroke: species
    bandwidth: $bandwidth
    thresholds: $thresholds
  - mark: dot
    data: { from: penguins }
    x: bill_length
    y: bill_depth
    fill: currentColor
    r: 1
  xAxis: bottom
  xLabelAnchor: center
  yAxis: right
  yLabelAnchor: center
  margins: { top: 5, bottom: 30, left: 5, right: 50 }
  width: 700
  height: 480

JSON

{
  "meta": {
    "title": "Contour Plot",
    "description": "Here `heatmap` and `contour` marks visualize the density of data points in a scatter plot of penguin measurments. Setting the `fill` color to `\"species\"` subdivides the data into three sets of densities.\n"
  },
  "data": {
    "penguins": {
      "file": "data/penguins.parquet"
    }
  },
  "params": {
    "bandwidth": 40,
    "thresholds": 10
  },
  "vconcat": [
    {
      "hconcat": [
        {
          "input": "slider",
          "label": "Bandwidth (σ)",
          "as": "$bandwidth",
          "min": 1,
          "max": 100
        },
        {
          "input": "slider",
          "label": "Thresholds",
          "as": "$thresholds",
          "min": 2,
          "max": 20
        }
      ]
    },
    {
      "plot": [
        {
          "mark": "heatmap",
          "data": {
            "from": "penguins"
          },
          "x": "bill_length",
          "y": "bill_depth",
          "fill": "species",
          "bandwidth": "$bandwidth"
        },
        {
          "mark": "contour",
          "data": {
            "from": "penguins"
          },
          "x": "bill_length",
          "y": "bill_depth",
          "stroke": "species",
          "bandwidth": "$bandwidth",
          "thresholds": "$thresholds"
        },
        {
          "mark": "dot",
          "data": {
            "from": "penguins"
          },
          "x": "bill_length",
          "y": "bill_depth",
          "fill": "currentColor",
          "r": 1
        }
      ],
      "xAxis": "bottom",
      "xLabelAnchor": "center",
      "yAxis": "right",
      "yLabelAnchor": "center",
      "margins": {
        "top": 5,
        "bottom": 30,
        "left": 5,
        "right": 50
      },
      "width": 700,
      "height": 480
    }
  ]
}