Vector chart

Use a vector chart for a field that has a direction as well as a size, such as wind, currents or the gradient of a surface.

The wind swings from east to north as it strengthens

Wind at a 5 km grid, direction in degrees counter-clockwise from east, illustrative values

This chart cannot be displayed here: it needs JavaScript and WebGL.

direction is the angle in degrees counter-clockwise from east · arrow length and colour follow Wind speed (m/s); the longest arrow is the largest value

The same chart in each style

Source

Open in playground

Rich Markdown

```chart
type: vector
title: The wind swings from east to north as it strengthens
subtitle: Wind at a 5 km grid, direction in degrees counter-clockwise from east, illustrative values
data:
  inline:
    - {east: 0, north: 0, direction: 10, speed: 2.0}
    - {east: 5, north: 0, direction: 24, speed: 2.8}
    - {east: 10, north: 0, direction: 38, speed: 3.6}
    - {east: 15, north: 0, direction: 52, speed: 4.4}
    - {east: 20, north: 0, direction: 66, speed: 5.2}
    - {east: 25, north: 0, direction: 80, speed: 6.0}
    - {east: 0, north: 5, direction: 4, speed: 2.4}
    - {east: 5, north: 5, direction: 18, speed: 3.5}
    - {east: 10, north: 5, direction: 32, speed: 4.6}
    - {east: 15, north: 5, direction: 46, speed: 4.8}
    - {east: 20, north: 5, direction: 60, speed: 5.9}
    - {east: 25, north: 5, direction: 74, speed: 7.0}
    - {east: 0, north: 10, direction: -2, speed: 2.8}
    - {east: 5, north: 10, direction: 12, speed: 4.2}
    - {east: 10, north: 10, direction: 26, speed: 4.7}
    - {east: 15, north: 10, direction: 40, speed: 5.2}
    - {east: 20, north: 10, direction: 54, speed: 6.6}
    - {east: 25, north: 10, direction: 68, speed: 7.1}
    - {east: 0, north: 15, direction: -8, speed: 3.2}
    - {east: 5, north: 15, direction: 6, speed: 4.0}
    - {east: 10, north: 15, direction: 20, speed: 4.8}
    - {east: 15, north: 15, direction: 34, speed: 5.6}
    - {east: 20, north: 15, direction: 48, speed: 6.4}
    - {east: 25, north: 15, direction: 62, speed: 7.2}
encoding: {x: east, y: north, angle: direction, size: speed}
axes:
  x: {label: East (km)}
  y: {label: North (km)}
  color: {label: Wind speed (m/s)}
```

Fields that matter

type: vector with encoding.x and encoding.y for the position and encoding.angle for the direction in degrees counter-clockwise from east, so 0 points right and 90 points up
encoding.size is optional: with it an arrow is as long as its value is large against the largest value and is coloured along the style’s ramp, with a key under the chart, and axes.color names and formats it; without it every arrow has the same length and colour
Arrows are centred on their position, are never longer than the spacing of the positions allows, and the axes leave room for every arrow; an arrow of zero length is a dot
A row without an x, a y, an angle or, when size is given, a value of zero or more is left out and reported; a panel takes at most 1,500 arrows, and above that the chart is not drawn and check raises chart.limit-exceeded naming the limit and the count
Nothing is computed: every number in a readout is the author’s
encoding.facet makes one field per value on shared axes and one scale for the arrows

Interactions

Hover or focus an arrow to read its position, direction and value.
Zoom the x axis to look at part of the field; arrows outside the window are not drawn.
Open the Table view, Download PNG or CSV, or Expand the chart.