Blank Mollier Diagram

A Mollier diagram (or enthalpy-entropy diagram) has the same underlying principle as a psychrometric chart, except that the X and Y axes are flipped, and humidity ratio is plotted on the (now) horizontal axis instead of dew point.

In this example, we use Psychart to render a blank Mollier diagram on an empty HTML page. This example demonstrates some of the basic configuration options for Psychart.

Installation

Follow these steps to create a new webpack project and install the psychart dependency to run this example.

# Create and open project folder
mkdir Mollier_Diagram_demo
cd Mollier_Diagram_demo
# Initialize project and install dependencies
npm init -y
npm pkg set type="module"
npm i psychart@0.2.2 webpack-cli
# Create source files
touch index.html
mkdir src
touch src/index.js
# Open new files
open index.html
open src/index.js

Source

Copy and paste the following source code blocks into the newly created files.

index.html

<html>

<head>
    <script type="text/javascript" src="dist/main.js"></script>
</head>

<body></body>

</html>

index.js

import { Psychart } from 'psychart';

const ps = new Psychart(
    {
        padding: { x: 40, y: 20 },
        size: { x: 800, y: 600 },
    },
    {
        altitude: 100, // [m]
        count: 0,
        dbMin: 10, // [degC]
        dbMax: 50, // [degC]
        dpMax: 40, // [degC]
        flipXY: true,
        showUnits: 'both',
        regions: [],
        series: {},
        unitSystem: 'SI',
        yAxis: 'hr', // Humidity ratio
    },
    Psychart.getDefaultStyleOptions(false)
);

window.addEventListener('load', () => {
    document.body.append(ps.getElement());
});

Build Project

In the base project directory Mollier_Diagram_demo/, run the following commands, and then open your index.html file in any web browser of your choice! Uncomment the second line to open the project in Firefox, for example.

npx webpack --mode development # or --mode production
# firefox index.html