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.
  },
  // 41.67 m/s are 150 km/h.
  // There are [https://chird.github.io/meteoJS/doc/module-meteoJS_calc.html#.windspeedKMHToMS|helper functions],
  // to easy calculate these values, like windspeedKNToMS(150)
  windspeedMax: 41.67, // maximum visible windspeed to show in the hodograph in m/s
    // If the origin is in the middle, the x- and y-axes will have at least this windspeed length.
    // If the origin is displaced, the longer part of the axes will have at least this length.
  origin: undefined, // The origin can be displaced with a 2-element array. The values have to be between -1 and 1.
    // The origin is displaced by the elemnts in left-right resp. downward-upward direction.
  hoverLabels: { // options for the labels shown on mouse hover
    maxDistance: 20, // maximum distance between mouse and date point to show the hover labels
    hodograph: {
      pressure: { // optionsn for the pressure value
        visible: true, // visibility of the pressure value
        decimalPlaces: 0, // decimal places of the pressure value
        prefix: ' hPa' // prefix of the pressure value
      },
      windspeed: { // optionsn for the windspeed value
        visible: true, // visibility of the windspeed value
        unit: 'km/h', // unit of the windspeed value. 'm/s', 'km/h' and 'kn' are possible values.
        decimalPlaces: 0, // decimal places of the windspeed value
        prefix: ' kn' // prefix of the windspeed value
      },
      winddir: { // optionsn for the winddir value
        visible: true, // visibility of the winddir value
        decimalPlaces: 0, // decimal places of the winddir value
        prefix: '°' // prefix of the winddir value
      },
      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.