Two-dimensional vector field

Source

43 chart lines · 2 files · 1.5 kBBenchmark harness excluded · shared/mount.ts

Gridded surface wind4,800 records · CSV · 164.0 kB

@charts-poc/demo-data/wind

Selection: Complete published snapshot

longitude: number
latitude: number
u: number
v: number

Remote Sensing Systems / giCentreobservablehq/plot@356f579b1d94 · revision 356f579b1d94 · test/data/wind.csv · Observable Plot repository MIT; upstream source credited · SHA-256 906a2dcf864aPinned snapshot

cases/42-vector-field/tanstack.ts25 lines · entry

cases/42-vector-field/tanstack.ts

import { defineChart, vector } from '@tanstack/charts'
import { wind } from '@charts-poc/demo-data/wind'
import { scaleLinear, scaleSqrt } from 'd3-scale'
import { sampleWind } from './selection'
import { tanstackMount } from '../../shared/mount'

const speed = scaleSqrt().domain([0, 14]).range([0, 22])
const sampledWind = sampleWind(wind)

const definition = () =>
  defineChart({
    marks: [
      vector(sampledWind, {
        x: 'longitude',
        y: 'latitude',
        length: (row) => speed(Math.hypot(row.u, row.v)),
        rotate: (row) => (Math.atan2(row.u, row.v) * 180) / Math.PI,
        stroke: '#2563eb',
      }),
    ],
    x: { scale: scaleLinear, grid: true, axis: { label: 'Longitude' } },
    y: { scale: scaleLinear, grid: true, axis: { label: 'Latitude' } },
  })

export const mount = tanstackMount(definition, 'Two-dimensional vector field')

cases/42-vector-field/selection.ts18 lines · support

cases/42-vector-field/selection.ts

import type { WindRow } from '@charts-poc/demo-data/wind'

export function sampleWind(rows: readonly WindRow[]) {
  const longitudes = [...new Set(rows.map((row) => row.longitude))]
  const latitudes = [...new Set(rows.map((row) => row.latitude))]
  const selectedLongitudes = new Set(
    [0, 16, 32, 48, 64, 79].map((index) => longitudes[index]),
  )
  const selectedLatitudes = new Set(
    [0, 15, 30, 45, 59].map((index) => latitudes[index]),
  )

  return rows.filter(
    (row) =>
      selectedLongitudes.has(row.longitude) &&
      selectedLatitudes.has(row.latitude),
  )
}