Symbol Plots

Two scatter plots with dot marks: one with stroked symbols, the other filled.

Loading Example... ⏳

Specification

JavaScript

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

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

export default vg.vconcat(
  vg.hconcat(
    vg.plot(
      vg.dot(
        vg.from("penguins"),
        {
          x: "body_mass",
          y: "flipper_length",
          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: "body_mass",
          y: "flipper_length",
          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.
data:
  penguins: { file: data/penguins.parquet }
vconcat:
- hconcat:
  - name: stroked
    plot:
    - mark: dot
      data: { from: penguins }
      x: body_mass
      y: flipper_length
      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: body_mass
      y: flipper_length
      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.\n"
  },
  "data": {
    "penguins": {
      "file": "data/penguins.parquet"
    }
  },
  "vconcat": [
    {
      "hconcat": [
        {
          "name": "stroked",
          "plot": [
            {
              "mark": "dot",
              "data": {
                "from": "penguins"
              },
              "x": "body_mass",
              "y": "flipper_length",
              "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": "body_mass",
              "y": "flipper_length",
              "fill": "species",
              "symbol": "species"
            }
          ],
          "grid": true,
          "xLabel": "Body mass (g) →",
          "yLabel": "↑ Flipper length (mm)"
        },
        {
          "legend": "symbol",
          "for": "filled",
          "columns": 1
        }
      ]
    }
  ]
}