-
Notifications
You must be signed in to change notification settings - Fork 6
Hodograph
Ivo Sonderegger edited this page Jul 19, 2021
·
10 revisions
This page explains, how to add a hodograph to a thermodynamic diagram and how to style it.
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);
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: { // options 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: { // options for the windspeed value
visible: true, // visibility of the windspeed value
unit: 'kn', // 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: { // options 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: { // 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.
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'
}
}
}
});
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.