"Thermodiagram"
-
visualization class for JS.

It`s based on native html-canvas.

Usage:

import Thermodiagram from './thermodiagram.js'; const td = new Thermodiagram({ container: document.getElementById('div_id'), diagram_type: 'tephigram', // 'cartesian', 'emagram', 'stuvegram', 'skewt', 'tephigram' min_p: 100, min_t: -40, max_p: 1020, max_t: 60,
// optional:
step_p: 100, step_t: 10, left_ruler: true, right_ruler: true, left_wind: false, right_wind: true, background_color: '#FFFFFF', headers: [ "It may be", "a multyline header", "defined by", "an array" ], language: 'en', // 'en', 'ru' may be expanded in dictionary.js hodograph_placement: null, // 'left', 'right', 'internal', width: container.getBoundingClientRect().width, height: container.getBoundingClientRect().height, font: "12px Curier", big_font: "14px Curier", large_font: "16px Curier", huge_font: "24px Curier", wind_colors: ['#e0a', '#c0a', '#a0a', '#80a', '#60a', '#40a', '#20a', '#01a', '#02a', '#03a', '#04a', '#058', '#066', '#074', '#282', '#490', '#6a0', '#8b0'], mouse_stickiness: 20, dot_radius: 2, background_color: 'transparent', foreground_color: '#111111', dew_point_color: '#07b307', temperature_color: '#FE0909', wet_bulb_color: '#0A0AFF', parcel_profile_color: '#0F0A0A', isobar_color: 'darkgrey', isogram_color: 'darkgreen', isotherm_color: 'darkgrey', isotherm_zero_color: '#990022', dry_adiabata_color: '#FF5533', moist_adiabata_color: '#3355FF', hodograph_color: '#111111', dew_point_type: 'solid', temperature_type: 'solid', wet_bulb_type: 'solid', parcel_profile_type: 'solid', isobar_type: 'dashed', isogram_type: 'dotted', isotherm_type: 'solid', dry_adiabata_type: 'solid', moist_adiabata_type: 'solid', hodograph_type: 'dotted', dew_point_width: 2, temperature_width: 2, wet_bulb_width: 2, parcel_profile_width: 2, hodograph_width: 1, });

Methods:

Visualisation (all arguments are optional):
td.showBackPlan(background_color = 'transparent', z_index = undefined); td.showHeader(textes = this.headers, left_indent = 0.5, align = 'center'); td.showText(textes = [], layer_name = 'text', left_indent = 0.65, clear_all = false, align = 'left', font = this.font, color = this.axis_color, background_color = 'transparent', z_index = undefined); td.showDewPoint(background_color = 'transparent', z_index = undefined); td.showTemperature(background_color = 'transparent', z_index = undefined); td.showWind(background_color = '#FFFFFF', z_index = undefined); td.hideBackPlan(); td.hideHeader(); td.hideText(layer_name = 'text'); td.hideDewPoint(); td.hideTemperature(); td.hideWind();
Image getting:
td.downloadPicture(filename = 'diagram.png', imagetype = 'image/png'); td.getPicture(imagetype = 'image/png'); // returns byte-array
Events processing, as usual:
td.addEventListener(type, listener, options);
Methods for calculating coefficients:
td.calc_LCL(t_dew, base_t); // returns three numbers in array [temperature, pressure, height], i.e. [°C, hPa, m] or null td.calc_CCL(temperature[], pressure[], t_dew); // returns three numbers in array [temperature, pressure, height], i.e. [°C, hPa, m] or null td.calc_CT(temperature[], pressure[], t_dew); // returns °C or null td.calc_FL(temperature[], pressure[]); // returns two numbers in array [pressure, height], i.e. [hPa, m] or null td.cacl_EL(temperature[], pressure[], base_t); // returns three numbers in array [temperature, pressure, height], i.e. [°C, hPa, m] or null td.cacl_LFC(temperature[], pressure[], base_t); // returns three numbers in array [temperature, pressure, height], i.e. [°C, hPa, m] or null td.cacl_CIN(temperature[], pressure[], t_dew); // returns one number td.cacl_SBCIN = td.cacl_CIN; cacl_MLCIN(temperature[], pressure[], t_dew); cacl_MUCIN(temperature[], pressure[], t_dew) td.cacl_CAPE(temperature[], pressure[], t_dew, base_t, shift = 0); // returns one number td.cacl_SBCAPE = td.cacl_CAPE; td.cacl_MLCAPE(temperature[], pressure[], t_dew); td.cacl_MUCAPE(temperature[], pressure[], t_dew); td.cacl_Ki(temperature[], pressure[], dew_temp, dew_press); // returns one number td.cacl_LI(temperature[], pressure[]); // returns two numbers in array [temperature, pressure], i.e. [°C, hPa] or null cacl_SHEAR(pressure[], speed[], direction[], height); // returns an object
Left Cartesian coordinates const td1 = new Thermodiagram({ container: document.getElementById('diagram-1'), diagram_type: 'cartesian', min_p: 100, min_t: -40, max_p: 1020, max_t: 60, step_p: 100, step_t: 10, left_ruler: true, right_ruler: true, left_wind: true, right_wind: true, headers: ["Widespread electrification", "of the southern provinces will give a powerful impetus", "to the rise of agriculture."], });
Emagram const td2 = new Thermodiagram({ container: document.getElementById('diagram-2'), diagram_type: 'emagram', min_p: 100, min_t: -40, max_p: 1020, max_t: 60, step_p: 100, step_t: 10, left_ruler: true, right_ruler: true, left_wind: true, right_wind: true, background_color: '#FFFFEE', headers: ["Widespread electrification", "of the southern provinces will give a powerful impetus", "to the rise of agriculture."], });
Stuvegram const td3 = new Thermodiagram({ container: document.getElementById('diagram-3'), diagram_type: 'stuvegram', min_p: 100, min_t: -40, max_p: 1020, max_t: 60, step_p: 100, step_t: 10, left_ruler: true, right_ruler: true, left_wind: true, right_wind: true, background_color: '#FFEEFF', headers: ["Widespread electrification", "of the southern provinces will give a powerful impetus", "to the rise of agriculture."], hodograph_placement: 'left', });
Skew-T Log-P const td4 = new Thermodiagram({ container: document.getElementById('diagram-4'), diagram_type: 'skewt', min_p: 100, min_t: -40, max_p: 1020, max_t: 60, step_p: 100, step_t: 10, left_ruler: true, right_ruler: true, left_wind: true, right_wind: true, background_color: '#EEFFFF', headers: ["Widespread electrification", "of the southern provinces will give a powerful impetus", "to the rise of agriculture."], hodograph_placement: 'right', });
Tephigram const td5 = new Thermodiagram({ container: document.getElementById('diagram-5'), diagram_type: 'tephigram', min_p: 100, min_t: -40, max_p: 1020, max_t: 60, step_p: 100, step_t: 10, left_ruler: true, right_ruler: true, left_wind: false, right_wind: true, background_color: '#FFFFFF', headers: ["Widespread electrification", "of the southern provinces will give a powerful impetus", "to the rise of agriculture."], hodograph_placement: 'internal', });