Windspeed profile

This page explains, how to add a windspeed profile and a corresponding axis to a thermodynamic diagram and how to style it.

Basic construction

See How to create a thermodynamic diagram, how to place and size the windspeed profile and its axis and how to add it to the SVG image.

Mainly, this will we the following code:

import WindspeedProfile from 'meteojs/thermodynamicDiagram/WindspeedProfile';

const windspeedProfile = new WindspeedProfile({
  x: …,
  y: …,
  width: …,
  height: …
});
diagram.appendPlotArea(windspeedProfile);
const windspeedProfileAxis = new WindspeedProfileAxis({
  x: …,
  y: …,
  width: …,
  height: …
});
diagram.appendPlotArea(windspeedProfileAxis);

Windspeed profile area

Construction options

There are several possibilities to style the area of the windspeed profile. The following code shows all of them with the defaults.

const windspeedProfile = new WindspeedProfile({
  …,
  // 77.17 m/s are 150 knots.
  // There are [https://chird.github.io/meteoJS/doc/module-meteoJS_calc.html#.windspeedKMHToMS|helper functions],
  // to easy calculate these values, like windspeedKNToMS(150)
  windspeedMax: 77.17, // maximum visible windspeed in m/s
  grid: { // options for the grid
    isotachs: { // options for the vertical lines of same windspeed
      max: 77.17, // by default its the same as 'windspeedMax', in m/s
      min: 0, // value of the first grid line, in m/s
      // 25.72 m/s are 50 knots.
      interval: 25.72, // interval between the isotachs, in m/s
      visible: true, // visibility of the isotachs
      style: { // style of the lines
        // By default, its a grey dashed line with width 1
        // All possibilities for a SVG line can be configured
        color: 'grey',
        width: 1,
        opacity: undefined,
        linecap: undefined,
        linejoin: undefined,
        dasharray: '2 2',
        dashoffset: undefined,
      }
    },
    isobars: { // options for the horizontal lines of same pressure
      // min/max is determined by default by the passed coordinate system
      max: 1050, // value of the lowest grid line, in hPa
      min: 100, // value of the most top grid line, in hPa
      interval: 100, // interval between the isobars, in hPa
      visible: true, // visibility of the isobars
      style: { // style of the lines
        // By default, its a grey dotted line with width 1
        // All possibilities for a SVG line can be configured
        color: 'grey',
        width: 1,
        opacity: undefined,
        linecap: undefined,
        linejoin: undefined,
        dasharray: '1 3',
        dashoffset: undefined,
      }
    }
  }
  hoverLabels: { // options for the labels shown on mouse hover
    maxDistance: 20, // maximum distance between mouse and pressure level of a data point to show the hover labels
    remote: true, // if true, the hover labels are also shown, when the mouse pointer isn't on the windspeed profile profile
    windspeed: {
      visible: true, // visiblity of the hover labels
      fill: { // option for the backdrop of the hover labels
        color: 'white', // color of the backdrop
        opacity: 0.7 // opacity of the backdrop
      },
      horizontalMargin: 10, // horizontal distance in pixel between hover labels and mouse pointer
      verticalMargin: 0, // vertical distance in pixel between hover labels and mouse pointer
      radius: undefined, // Fix radius for the circle to highlight the data point.
      radiusPlus: 2, // radius for the circle to highlight the data point.
        // The radius of the circle will be this value plus the line width of the data line.
        // will be ignored, if 'radius' is set
      font: { // font style for the hover labels
        size: 12, // font size of the hover labels
        color: 'black', // font color of the hover labels
        // the hover label switch the position relative to the mouse pointer, if it will be cropped by the border
        anchor: 'end', // sets the 'text-anchor' attribute
        'alignment-baseline': 'bottom' // sets the 'alignment-baseline' attribute
      }
    },
    getHoverSounding: soundings => soundings.shift() // defines the sounding, for which the hover labels are shown
      // by default, the first sounding will be selected.
  }
});

Everything is documented in the API documentation.

Background

The windspeed profile is displayed without border and background by default. This can be added simply:

windspeedProfile.on('prebuild:background', ({ node }) => {
  // Rectangle with black border and white background
  node
    .rect(windspeedProfile.width, windspeedProfile.height)
    .fill({ color: 'white' })
    .stroke({ color: 'black', width: 1 });
});

This code will be re-executed, if the area is resized.