How to create a thermodynamic diagram

ThermodynamicDiagramPluggable

The class ThermodynamicDiagramPluggable is the starting point to create a thermodynamic diagram. It creates the SVG image and then places several so called PlotArea's into it.

const diagram = new ThermodynamicDiagramPluggable({
  renderTo: …,// HTMLElement to render SVG into it
  width: …, // width of the SVG image
  height: … // height of the SVG image
})

With the method appendPlotArea, you append different PlotArea's like a thermodynamic diagram, a hodograph or a wind speed profile.

But you can also manipulate the SVG by yourself. With the property svgNode you get a SVG.js object.

PlotArea's

Each of these classes has some common properties.

• x, y: Position of the top-left corner
• width, height: Extent of the area
• visible: Visibility of the area

These properties can be set on construction or can be changed during runtime.

Thermodynamic Diagram (TDDiagram)

The object for the real thermodynamic diagram.

const tdDiagram = new TDDiagram({
  x: …,
  y: …,
  width: …,
  height: …
});
diagram.appendPlotArea(tdDiagram);

Additionally, with the constructor, the diagram's style is defined. The API documentation gives detailed information about these options.

The coordinate system is defined via objects. Up to now these coordinate systems are implemented:

• SkewTlogPDiagram
• Emagram
• StueveDiagram

Either the object is passed to the constructor, or to the coordinateSystem property.

const skewTlogP = new SkewTlogPDiagram();
const tdDiagram = new TDDiagram({
  coordinateSystem: skewTlogP,
  x: …,
  y: …,
  width: …,
  height: …
});
const emagram = new Emagram();
tdDiagram.coordinateSystem = emagram // change coordinate system from Skew-T-log-P to Emagram

Sounding data