Hodograph

This page explains, how to add a hodograph to a thermodynamic diagram and how to style it.

Hodograph options

Construction

See How to create a thermodynamic diagram, how to place and size the hodograph and how to add it to the SVG image.

Mainly, this will we the following code:

import Hodograph from 'meteojs/thermodynamicDiagram/Hodograph';

const hodograph = new Hodograph({
  x: …,
  y: …,
  width: …,
  height: …
});
diagram.appendPlotArea(hodograph);

Futher options

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

const hodograph = new Hodograph({
  …,
  grid: { // options for the grid like the axes and the circels and its labels
    axes: { // options for the x- and y-axes
      visible: true, // visibility of the axes
      style: { // style of the two lines
        // By default, its a black line with width 1
        // All possibilities for a SVG line can be configured
        color: 'black',
        width: 1,
        opacity: undefined,
        linecap: undefined,
        linejoin: undefined,
        dasharray: undefined,
        dashoffset: undefined,
      }
    },
    circles: { // options for the windspeed-circles
      // 13.89 m/s are 50 km/h.
      // There are [https://chird.github.io/meteoJS/doc/module-meteoJS_calc.html#.windspeedKMHToMS|helper functions],
      // to easy calculate these values, like windspeedKMHToMS(50)
      interval: 13.89, // windspeed-interval between circles in m/s
      visible: true, // visibility of the circles
      style: { // style of the circles
        // By default, its a black line with width 1
        // All possibilities for a SVG line can be configured
        color: 'black',
        width: 1,
        opacity: undefined,
        linecap: undefined,
        linejoin: undefined,
        dasharray: undefined,
        dashoffset: undefined,
      }
    },
    labels: { // options for the labels of the circles
      // if the angel is 90 or 270 (horizontal), the labels are plotted below the axes
      angle: 225, // angle from the origin, to plot the labels. 0 is for northward direction.
      unit: 'km/h', // unit of the values in the label. As values 'm/s', 'kn' and 'km/h' are possible
      prefix: '', // label prefix of the values.
      decimalPlaces: 0, // decimal places of the values in the labels
      backdrop: { // backdrop of the labels
        visible: true, // visibility of the backdrops
        color: 'white' // color of the backdrop
      },
      visible: true, // visibility of the labels
      font: { // font style for the labels
        size: 10, // font size of the labels
        color: 'black', // font color of the labels
        // change this to 'start' or 'end', if you plot the labels vertically and
        // want to show the labels left or right of the y-axis
        anchor: undefined // sets the 'text-anchor' attribute
      }
    },
    // If undefined, the value of 'windspeedMax' will be used.
    max: undefined // In m/s. Circles will be plotted, up to this windspeed.
  },
  windspeedMax: 41.67,
  origin: [0.5, 0.5],
  hoverLabels: {
    maxDistance: 20,
    hodograph: {
      pressure: {
        visible: true,
        decimalPlaces: 0,
        prefix: ' hPa'
      },
      windspeed: {
        visible: true,
        unit: 'km/h',
        decimalPlaces: 0,
        prefix: ' kn'
      },
      winddir: {
        visible: true,
        decimalPlaces: 0,
        prefix: '°'
      },
      fill: {},
      horizontalMargin: 10,
      verticalMargin: 0,
      radius: undefined,
      radiusPlus: 2,
      font: {
        size: 12,
        color: 'black',
        anchor: 
      }
    }
  }
});

Update options

With the update method, parts of the style can be updated. The following code changes the hover labels. After that, the shown text at mouse over will display the windspeed in m/s with the prefix ' m/s'.

hodograph.update({
  hoverLabels: {
    hodograph: {
      windspeed: {
        unit: 'm/s',
        decimalPlaces: 1,
        prefix: ' m/s'
      }
    }
  }
});

Background

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

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

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