Wind Barbs SVG

This package will generate wind barb SVGs, similar to those found on NOAA's NWS website found here. It can be used to indicate wind direction and speed on a weather map.

Each wind barb SVG can be rotated about the "tip" of the wind barb, or the stem's base.

Redistributables are in umd format. There are no dependencies.

Table of Contents

• Installation
• Usage
  • In-browser DOM Element
  • React/JSX style
  • Non-exports Environments
• WIP
• License

Installation

You can install this package via npm:

npm install wind-barbs

Alternatively, you can use a <script> tag to include the library directly in your HTML:

<script src="path/to/wind-barbs.umd.min.js"></script>

The library will be available under the WindBarb namespace.

Usage

The only function as of now is:

generateWindBarbSvg(windSpeed, windDirection?, options?)

• windSpeed - Wind speed. Knots are usually used, but this library is unitless.

• windDirection (optional, default: 0) - Wind direction. This will rotate the barb by the number of degrees given (0-359)

• options (optional) - Options object when generating the SVG. Right now, the only option is which color the barb should be. The default is:

  {
    color: #000000
  }

In-browser DOM Element

There are two ways that may be used for generating wind barb SVGs. The first builds SVGs via the DOM and can be used as such:

import { generateWindBarbSvg } from 'wind-barbs'

const svg = generateWindBarbSvg(15, -90)

window.document.appendChild(svg)

Which will produce:

See examples/browser.html.

React/JSX style

The second way to use wind-barbs will produce a JSX element. Import from wind-barbs/react

import { generateWindBarbSvg } from 'wind-barbs/react'

const MyComponent = () => {
  const svg = generateWindBarbSvg(15, -90, { color: 'pink' })
  return <div>{svg}</div>
}

This will produce the same SVG as shown previously.

Non-exports environments

If your environment does not support exports in package.json, then you can use the bundled library, which contains the DOM and JSX-style functions. The type signature for this is:

import { generateWindBarbSvg } from '../index'
import { generateWindBarbSvg as generateWindBarbSvgReact } from '../react/index'
export { generateWindBarbSvg, generateWindBarbSvgReact }

WIP

This is a work in progress and may be updated in the future.

• [ ] Allow SVG to be justified to the left, removing blank space.

License

This project is licensed under the MIT License. See the LICENSE file for details.