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.

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")
]);

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

export default vg.vconcat(
  vg.colorLegend({for: "wind-map", label: "Speed (m/s)"}),
  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)`
      }
    ),
    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.
  credit: Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-wind-map).
data:
  wind: { file: data/wind.parquet }
params:
  length: 2
vconcat:
- legend: color
  for: wind-map
  label: Speed (m/s)
- 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) }
  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.\n",
    "credit": "Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-wind-map)."
  },
  "data": {
    "wind": {
      "file": "data/wind.parquet"
    }
  },
  "params": {
    "length": 2
  },
  "vconcat": [
    {
      "legend": "color",
      "for": "wind-map",
      "label": "Speed (m/s)"
    },
    {
      "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)"
          }
        }
      ],
      "lengthScale": "identity",
      "colorZero": true,
      "inset": 10,
      "aspectRatio": 1,
      "width": 680
    },
    {
      "input": "slider",
      "min": 1,
      "max": 7,
      "step": 0.1,
      "as": "$length",
      "label": "Vector Length"
    }
  ]
}