Symbol Plots

Two scatter plots with dot marks: one with stroked symbols, the other filled. Drop-down menus control which data table columns are plotted.

Loading Example... ⏳

Specification

JavaScript

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

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

const $x = vg.Param.value("body_mass");
const $y = vg.Param.value("flipper_length");

export default vg.vconcat(
  vg.hconcat(
    vg.menu({
      label: "Y",
      options: ["body_mass", "flipper_length", "bill_depth", "bill_length"],
      as: $y
    }),
    vg.menu({
      label: "X",
      options: ["body_mass", "flipper_length", "bill_depth", "bill_length"],
      as: $x
    })
  ),
  vg.vspace(10),
  vg.hconcat(
    vg.plot(
      vg.dot(
        vg.from("penguins"),
        {
          x: vg.column($x),
          y: vg.column($y),
          stroke: "species",
          symbol: "species"
        }
      ),
      vg.name("stroked"),
      vg.grid(true),
      vg.xLabel("Body mass (g) →"),
      vg.yLabel("↑ Flipper length (mm)")
    ),
    vg.symbolLegend({for: "stroked", columns: 1})
  ),
  vg.vspace(20),
  vg.hconcat(
    vg.plot(
      vg.dot(
        vg.from("penguins"),
        {x: vg.column($x), y: vg.column($y), fill: "species", symbol: "species"}
      ),
      vg.name("filled"),
      vg.grid(true),
      vg.xLabel("Body mass (g) →"),
      vg.yLabel("↑ Flipper length (mm)")
    ),
    vg.symbolLegend({for: "filled", columns: 1})
  )
);

YAML

meta:
  title: Symbol Plots
  description: >
    Two scatter plots with `dot` marks: one with stroked symbols, the other filled.
    Drop-down menus control which data table columns are plotted.
data:
  penguins: { file: data/penguins.parquet }
params:
  x: body_mass
  y: flipper_length
vconcat:
- hconcat:
  - input: menu
    label: Y
    options: [body_mass, flipper_length, bill_depth, bill_length]
    as: $y
  - input: menu
    label: X
    options: [body_mass, flipper_length, bill_depth, bill_length]
    as: $x
- vspace: 10
- hconcat:
  - name: stroked
    plot:
    - mark: dot
      data: { from: penguins }
      x: { column: $x }
      y: { column: $y }
      stroke: species
      symbol: species
    grid: true
    xLabel: Body mass (g) →
    yLabel: ↑ Flipper length (mm)
  - legend: symbol
    for: stroked
    columns: 1
- vspace: 20
- hconcat:
  - name: filled
    plot:
    - mark: dot
      data: { from: penguins }
      x: { column: $x }
      y: { column: $y }
      fill: species
      symbol: species
    grid: true
    xLabel: Body mass (g) →
    yLabel: ↑ Flipper length (mm)
  - legend: symbol
    for: filled
    columns: 1

JSON

{
  "meta": {
    "title": "Symbol Plots",
    "description": "Two scatter plots with `dot` marks: one with stroked symbols, the other filled. Drop-down menus control which data table columns are plotted.\n"
  },
  "data": {
    "penguins": {
      "file": "data/penguins.parquet"
    }
  },
  "params": {
    "x": "body_mass",
    "y": "flipper_length"
  },
  "vconcat": [
    {
      "hconcat": [
        {
          "input": "menu",
          "label": "Y",
          "options": [
            "body_mass",
            "flipper_length",
            "bill_depth",
            "bill_length"
          ],
          "as": "$y"
        },
        {
          "input": "menu",
          "label": "X",
          "options": [
            "body_mass",
            "flipper_length",
            "bill_depth",
            "bill_length"
          ],
          "as": "$x"
        }
      ]
    },
    {
      "vspace": 10
    },
    {
      "hconcat": [
        {
          "name": "stroked",
          "plot": [
            {
              "mark": "dot",
              "data": {
                "from": "penguins"
              },
              "x": {
                "column": "$x"
              },
              "y": {
                "column": "$y"
              },
              "stroke": "species",
              "symbol": "species"
            }
          ],
          "grid": true,
          "xLabel": "Body mass (g) →",
          "yLabel": "↑ Flipper length (mm)"
        },
        {
          "legend": "symbol",
          "for": "stroked",
          "columns": 1
        }
      ]
    },
    {
      "vspace": 20
    },
    {
      "hconcat": [
        {
          "name": "filled",
          "plot": [
            {
              "mark": "dot",
              "data": {
                "from": "penguins"
              },
              "x": {
                "column": "$x"
              },
              "y": {
                "column": "$y"
              },
              "fill": "species",
              "symbol": "species"
            }
          ],
          "grid": true,
          "xLabel": "Body mass (g) →",
          "yLabel": "↑ Flipper length (mm)"
        },
        {
          "legend": "symbol",
          "for": "filled",
          "columns": 1
        }
      ]
    }
  ]
}