-
Notifications
You must be signed in to change notification settings - Fork 6
Hodograph
Ivo Sonderegger edited this page Jul 21, 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.
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.
The style in the hodograph of each sounding line can be defined. The following code shows all of them with the defaults.
import DiagramSounding from 'meteojs/thermodynamicDiagram/DiagramSounding';
// sounding is a object of the module:meteoJS/sounding.Sounding class
const diagramSounding = new DiagramSounding(sounding, {
…,
hodograph: { // options for the appearance of the line in the hodograph
visible: true, // visibility of the line in the hodograph
minPressure: undefined, // if not undefined, only wind values on a pressure level below this pressure value will be plotted. Unit: hPa.
maxPressure: undefined, // if not undefined, only wind values on a pressure level above this pressure value will be plotted. Unit: hPa.
style: { // style of the line
// By default, its a green line with width 2
// All possibilities for a SVG line can be configured
color: 'green',
width: 2,
opacity: undefined,
linecap: undefined,
linejoin: undefined,
dasharray: undefined,
dashoffset: undefined,
},
segments: [ // parts of the sounding line, so called segments, can be styled different
// per default, no segment will be configured. Afterwards the possible configuration possibilities:
/* {
minPressure: undefined, // if not undefined, only wind values on a pressure level below this pressure value will belong to the segment. Unit: hPa.
maxPressure: undefined, // if not undefined, only wind values on a pressure level above this pressure value will belong to the segment. Unit: hPa.
style: { // style of the segment line
// 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,
}
} */
]
}
});
The style options can be updated. With the update method, parts of the style can be updated. The following code changes the color of the line to red.
diagramSounding.update({
hodograph: {
style: {
color: 'red'
}
}
});