Voronoi Diagram

The voronoi mark shows the regions closest to each point. It is constructed from its dual, a Delaunay triangle mesh. Reveal triangulations or convex hulls using the dropdowns.

Loading Example... ⏳

Credit: Adapted from an Observable Plot example.

Specification

JavaScript

import * as vg from "@uwdata/vgplot";

await vg.coordinator().exec([
  vg.loadParquet("penguins", "data/penguins.parquet")
]);

const $mesh = vg.Param.value(0);
const $hull = vg.Param.value(0);

export default vg.vconcat(
  vg.plot(
    vg.voronoi(
      vg.from("penguins"),
      {
        x: "bill_length",
        y: "bill_depth",
        stroke: "white",
        strokeWidth: 1,
        strokeOpacity: 0.5,
        fill: "species",
        fillOpacity: 0.2
      }
    ),
    vg.hull(
      vg.from("penguins"),
      {
        x: "bill_length",
        y: "bill_depth",
        stroke: "species",
        strokeOpacity: $hull,
        strokeWidth: 1.5
      }
    ),
    vg.delaunayMesh(
      vg.from("penguins"),
      {
        x: "bill_length",
        y: "bill_depth",
        z: "species",
        stroke: "species",
        strokeOpacity: $mesh,
        strokeWidth: 1
      }
    ),
    vg.dot(
      vg.from("penguins"),
      {x: "bill_length", y: "bill_depth", fill: "species", r: 2}
    ),
    vg.frame(),
    vg.inset(10),
    vg.width(680)
  ),
  vg.hconcat(
    vg.menu({
      label: "Delaunay Mesh",
      options: [{value: 0, label: "Hide"}, {value: 0.5, label: "Show"}],
      as: $mesh
    }),
    vg.hspace(5),
    vg.menu({
      label: "Convex Hull",
      options: [{value: 0, label: "Hide"}, {value: 1, label: "Show"}],
      as: $hull
    })
  )
);

YAML

meta:
  title: Voronoi Diagram
  description: >
    The `voronoi` mark shows the regions closest to each point.
    It is [constructed from its dual](https://observablehq.com/@mbostock/the-delaunays-dual), a Delaunay triangle mesh.
    Reveal triangulations or convex hulls using the dropdowns.
  credit: Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-voronoi-scatterplot).
data:
  penguins: { file: data/penguins.parquet }
params:
  mesh: 0
  hull: 0
vconcat:
- plot:
  - mark: voronoi
    data: { from: penguins }
    x: bill_length
    y: bill_depth
    stroke: white
    strokeWidth: 1
    strokeOpacity: 0.5
    fill: species
    fillOpacity: 0.2
  - mark: hull
    data: { from: penguins }
    x: bill_length
    y: bill_depth
    stroke: species
    strokeOpacity: $hull
    strokeWidth: 1.5
  - mark: delaunayMesh
    data: { from: penguins }
    x: bill_length
    y: bill_depth
    z: species
    stroke: species
    strokeOpacity: $mesh
    strokeWidth: 1
  - mark: dot
    data: { from: penguins }
    x: bill_length
    y: bill_depth
    fill: species
    r: 2
  - mark: frame
  inset: 10
  width: 680
- hconcat:
  - input: menu
    label: Delaunay Mesh
    options: [{ value: 0, label: Hide }, { value: 0.5, label: Show}]
    as: $mesh
  - hspace: 5
  - input: menu
    label: Convex Hull
    options: [{ value: 0, label: Hide }, { value: 1, label: Show}]
    as: $hull

JSON

{
  "meta": {
    "title": "Voronoi Diagram",
    "description": "The `voronoi` mark shows the regions closest to each point. It is [constructed from its dual](https://observablehq.com/@mbostock/the-delaunays-dual), a Delaunay triangle mesh. Reveal triangulations or convex hulls using the dropdowns.\n",
    "credit": "Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-voronoi-scatterplot)."
  },
  "data": {
    "penguins": {
      "file": "data/penguins.parquet"
    }
  },
  "params": {
    "mesh": 0,
    "hull": 0
  },
  "vconcat": [
    {
      "plot": [
        {
          "mark": "voronoi",
          "data": {
            "from": "penguins"
          },
          "x": "bill_length",
          "y": "bill_depth",
          "stroke": "white",
          "strokeWidth": 1,
          "strokeOpacity": 0.5,
          "fill": "species",
          "fillOpacity": 0.2
        },
        {
          "mark": "hull",
          "data": {
            "from": "penguins"
          },
          "x": "bill_length",
          "y": "bill_depth",
          "stroke": "species",
          "strokeOpacity": "$hull",
          "strokeWidth": 1.5
        },
        {
          "mark": "delaunayMesh",
          "data": {
            "from": "penguins"
          },
          "x": "bill_length",
          "y": "bill_depth",
          "z": "species",
          "stroke": "species",
          "strokeOpacity": "$mesh",
          "strokeWidth": 1
        },
        {
          "mark": "dot",
          "data": {
            "from": "penguins"
          },
          "x": "bill_length",
          "y": "bill_depth",
          "fill": "species",
          "r": 2
        },
        {
          "mark": "frame"
        }
      ],
      "inset": 10,
      "width": 680
    },
    {
      "hconcat": [
        {
          "input": "menu",
          "label": "Delaunay Mesh",
          "options": [
            {
              "value": 0,
              "label": "Hide"
            },
            {
              "value": 0.5,
              "label": "Show"
            }
          ],
          "as": "$mesh"
        },
        {
          "hspace": 5
        },
        {
          "input": "menu",
          "label": "Convex Hull",
          "options": [
            {
              "value": 0,
              "label": "Hide"
            },
            {
              "value": 1,
              "label": "Show"
            }
          ],
          "as": "$hull"
        }
      ]
    }
  ]
}