Public
Edited
Oct 25, 2024
Plot.plot({
height: 600,
y: {type: "log", domain: [1050, 100]},
x: {domain: [-100, 20]},
clip: true,
marks: [
Plot.gridY(),
Plot.gridX(),
Plot.ruleX([0]),
Plot.line(dryAdiabatics, { x: 'x', y: 'y', stroke: 'label', strokeWidth: .5} ),
Plot.lineX(sounding, {x: "temperature", y: "pressure", stroke: 'red'}),
Plot.lineX(sounding, {x: "dewpoint", y: "pressure", stroke : 'green'}),
Plot.crosshairY(sounding, {x: "temperature", y: "pressure", stroke: 'red'}),
Plot.crosshairY(sounding, {x: "dewpoint", y: "pressure", stroke: 'green'}),
]
})
Skewed chart
Plot.plot({
height: 700,
marginTop: 30,
marginRight: 40,
marginBottom: 40,
marginLeft: 40,
color: {legend: true},
style: {
fontSize: 12
},
// margin: { top: 20, bottom: 20, left: 40, right: 40},
y: {type: "log", domain: [1050, 100], label: "pressure (hPa)", labelArrow: false, labelOffset: 0},
x: {type: "linear", domain: [-40, 30], label: "Temperature", labelAnchor: "center", labelArrow: false},
clip: true,
marks: [
Plot.frame({ stroke: 'currentColor', fill: 'rgb(223, 223, 223)'}),
Plot.gridY( { stroke: 'white', strokeWidth: 1, strokeOpacity: 1, strokeDasharray: [4, 2]}),
// Plot.ruleX([0, 20]),
Plot.line(isoTherms, { x: 'x', y: 'y', z: "label", stroke: 'white', strokeWidth: 1, strokeDasharray:[4,2]} ),
Plot.line(dryAdiabatics, { x: 'xS', y: 'y', z: "label", stroke: 'white', curve: "monotone-y", strokeWidth: .5} ),
Plot.lineX(skewtSounding, {x: "skewedTemperature", y: "pressure", stroke: 'red'}),
Plot.lineX(skewtSounding, {x: "skewedDewPoint", y: "pressure", stroke: 'green'}),
// Plot.ruleY(skewtSounding, Plot.pointerY({ y: "pressure", stroke: 'gray', strokeDasharray: [4,2]})),
Plot.dot(skewtSounding, Plot.pointerY({x: "skewedTemperature", y: "pressure", stroke: 'red'})),
Plot.dot(skewtSounding, Plot.pointerY({x: "skewedDewPoint", y: "pressure", stroke: 'green'})),
Plot.crosshairY(skewtSounding, {x: "skewedTemperature", y: "pressure"}),
Plot.crosshairY(skewtSounding, {x: "skewedDewPoint", y: "pressure"}),
]
})
dryAdiabatics = initialTemperatures.flatMap( (T0) => {
const H = 7000; // meters
const P0 = 1050; // Reference pressure (hPa)
const Rd = 287.058;
const Cp =1005.2;
const lapseRate = 9.8 / 1000; // Dry adiabatic lapse rate in °C/m
const pressures = [1050, 1000, 900, 800, 700, 500, 300, 200, 150, 120, 100];
return pressures.map( (P) => {
const temperature = (T0 + 272.15) * Math.pow( P/ P0, Rd/Cp) -272.15;
const logPressure = Math.log(P) - Math.log(1050);
return {label: T0, x: temperature, xS: temperature - skewFactor * logPressure , y: P}
})
})
isoTherms = initialTemperatures.flatMap((d) => {
return [
{label: d, x: -skewFactor * (Math.log(1050)-Math.log(1050)) + d, y: 1050 },
{label: d, x: -skewFactor * (Math.log(100)-Math.log(1050)) + d, y: 100 }
]
})
elevations = pressures.map ( (P) => {
const H = 7000; // meters
const P0 = 1050; // Reference pressure (hPa)
const lapseRate = 9.8 / 1000; // Dry adiabatic lapse rate in °C/m
const pressures = [1050, 850, 700, 500, 300, 200, 100];
const z = H * Math.log(P0 / P); // Height corresponding to this pressure }
return z})
pressures = [1050, 850, 700, 500, 300, 200, 100];
skewtSounding = sounding.map( (point) => {
const { pressure, temperature, dewpoint } = point;
// Logarithmic scale for pressure (assuming pressure is in hPa)
const logPressure = Math.log(pressure) - Math.log(1050)
// Skew the temperature and dew point by the skew factor and pressure
const skewedTemperature = temperature - skewFactor * logPressure;
const skewedDewPoint = dewpoint - skewFactor * logPressure;
// Return the new skewed data point
return {
pressure,
temperature,
skewedTemperature,
dewpoint,
skewedDewPoint
};
})
initialTemperatures = [-130, -120, -110, -100, -90, -80, -70, -60, -50, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130];
skewFactor = 35
sounding.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
