Wind Map

vector marks on a grid show both direction and intensity—here, the speed of winds. Expressions for rotate, length, and stroke values are evaluated in the database. Both the legend and map support interactive selections to highlight values.

Loading Example... ⏳

Credit: Adapted from an Observable Plot example.

Specification

JavaScript

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

await vg.coordinator().exec([
  vg.loadParquet("wind", "data/wind.parquet", {select: ["*", "row_number() over () as id"]})
]);

const $selected = vg.Selection.union();
const $length = vg.Param.value(2);

export default vg.vconcat(
  vg.colorLegend({for: "wind-map", label: "Speed (m/s)", as: $selected}),
  vg.plot(
    vg.vector(
      vg.from("wind"),
      {
        x: "longitude",
        y: "latitude",
        rotate: vg.sql`degrees(atan2(u, v))`,
        length: vg.sql`${$length} * sqrt(u * u + v * v)`,
        stroke: vg.sql`sqrt(u * u + v * v)`,
        channels: {id: "id"}
      }
    ),
    vg.region({as: $selected, channels: ["id"]}),
    vg.highlight({by: $selected}),
    vg.name("wind-map"),
    vg.lengthScale("identity"),
    vg.colorZero(true),
    vg.inset(10),
    vg.aspectRatio(1),
    vg.width(680)
  ),
  vg.slider({min: 1, max: 7, step: 0.1, as: $length, label: "Vector Length"})
);

YAML

meta:
  title: Wind Map
  description: >
    `vector` marks on a grid show both direction and intensity—here, the speed of winds.
    Expressions for `rotate`, `length`, and `stroke` values are evaluated in the database.
    Both the legend and map support interactive selections to highlight values.
  credit: Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-wind-map).
data:
  wind:
    file: data/wind.parquet
    select: ['*', 'row_number() over () as id']
params:
  selected: { select: union }
  length: 2
vconcat:
- legend: color
  for: wind-map
  label: Speed (m/s)
  as: $selected
- name: wind-map
  plot:
  - mark: vector
    data: { from: wind }
    x: longitude
    y: latitude
    rotate: { sql: "degrees(atan2(u, v))" }
    length: { sql: $length * sqrt(u * u + v * v) }
    stroke: { sql: sqrt(u * u + v * v) }
    channels: { id: id }
  - select: region
    as: $selected
    channels: ['id']
  - select: highlight
    by: $selected
  lengthScale: identity
  colorZero: true
  inset: 10
  aspectRatio: 1
  width: 680
- input: slider
  min: 1
  max: 7
  step: 0.1
  as: $length
  label: Vector Length

JSON

{
  "meta": {
    "title": "Wind Map",
    "description": "`vector` marks on a grid show both direction and intensity—here, the speed of winds. Expressions for `rotate`, `length`, and `stroke` values are evaluated in the database. Both the legend and map support interactive selections to highlight values.\n",
    "credit": "Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-wind-map)."
  },
  "data": {
    "wind": {
      "file": "data/wind.parquet",
      "select": [
        "*",
        "row_number() over () as id"
      ]
    }
  },
  "params": {
    "selected": {
      "select": "union"
    },
    "length": 2
  },
  "vconcat": [
    {
      "legend": "color",
      "for": "wind-map",
      "label": "Speed (m/s)",
      "as": "$selected"
    },
    {
      "name": "wind-map",
      "plot": [
        {
          "mark": "vector",
          "data": {
            "from": "wind"
          },
          "x": "longitude",
          "y": "latitude",
          "rotate": {
            "sql": "degrees(atan2(u, v))"
          },
          "length": {
            "sql": "$length * sqrt(u * u + v * v)"
          },
          "stroke": {
            "sql": "sqrt(u * u + v * v)"
          },
          "channels": {
            "id": "id"
          }
        },
        {
          "select": "region",
          "as": "$selected",
          "channels": [
            "id"
          ]
        },
        {
          "select": "highlight",
          "by": "$selected"
        }
      ],
      "lengthScale": "identity",
      "colorZero": true,
      "inset": 10,
      "aspectRatio": 1,
      "width": 680
    },
    {
      "input": "slider",
      "min": 1,
      "max": 7,
      "step": 0.1,
      "as": "$length",
      "label": "Vector Length"
    }
  ]
}