The Ultimate Guide to Using Ternary Equilibrium

Fabian Wolff

Fabian Wolff

12 min read

Ternary Equilibrium

This is the officially launch of my own space on the internet and my first application Ternary Equilibrium.πŸ₯³

It was quite a bumpy road learning web development whilst also building an application. I learned a lot and am really happy to finally release my work and share it with others! πŸŽ‰

You will first get a brief introduction to why we use ternary graphs and how to read them. After that we will dive straight into building our own!

The project is inspired by the observable notebook of Torben Jansen which served as a starting point.

If you already know about ternary graphs and want to start building, you can go to How to Use 🌍 or just launch the application πŸš€.

Why did I develop Ternary Equilibrium?

As a chemical engineer myself, I didn't know any good resource to build ternary graphs. I took that as a motivation to create one myself and learn web development along the way.

The bigger concept behind Ternary Equilibrium is an easy-to-use and easy-to-access resource to create ternary graphs for scientists. It is made for people that want a convenient way to create good looking graphs.

What is a Ternary Graph

In general a ternary graph is a triangular diagram used to display the proportion of three variables (a,b,c) that together compound to a constant. Usually the constant is either 1.0 or 100%. BecauseΒ (a+b+c)=100% adding a point to the graph only requires two coordinates.Β  The graph, therefore, has two degrees of freedom.

Reading a Ternary Graph

The three variables get displayed on three axes. For convenience I am going to name the axes:

  1. left
  2. bottom
  3. right

The values on each axis increase counterclockwise from 0 to 100.

Explanation of how to read a ternary diagram

Each vertice of the triangle represents a composition of 100% for one component and therefore 0% for the other two components (see the triangle in the next picture). To describe the composition more conveniently [30, 20, 50] equals a composition of 30% left, 20% bottom, 50% right (starting from the left axis and rotating counterclockwise). The bottom left vertice (red circle) therefore has the composition[100,0,0], the bottom right vertice (blue circle) [0,100,0] and the top vertice (green circle) [0,0,100].

Next, we focus on how to read an actual point inside the triangle.

If you look at the graph below, the black point has a composition of [30,20,50]. To understand this you have to follow each of the lines [red,blue,green] from the point, back to the corresponding axis. You then just read the value from the axis.

Explanation of how to read a point inside a ternary plot

Below is a visualization of the orientation of each axis line for every 10th percentile.

Explanation of how to read a ternary diagram

Usage in Chemical Engineering

Ternary graphs in chemical engineering are mainly used in the field of Liquid-Liquid Extraction. They visualize the equilibrium behavior of three-component systems.

What we want to visualize is the area where two components of the three are immiscible (Two-Phase-Region) and how a mixture within that area splits along the tie lines.

  • Two-Phase-Region (blue area):Β  Two of the three are immiscible. A mixture with a composition inside splits along a Tie-Line into two residue streams (Extract and Raffinate).
  • Single-Phase-Region (white area): All three components are miscible and exist as one phase.
  • Binodal: The line that separates the Two-Phase-Region and the Single-Phase-Region. Equilibrium Points lie on here.
  • Tie-Line: Line that connects the right and left Equilibrium Point
  • Equilibrium Point: Points that lie on the Binodal curve. They are connected by a Tie Line with their counterpart on the opposite side. (These are measured for developing a dataset)
Explanation of how to read each axis on a ternary graph

How to Use 🌍

Now that you know how to read and when you should use ternary graphs, we are going to make one ourselves.

The application is made up of 4 tabs (left bar):

  • Data Tab: Import and add data.
  • Mixture Tab: Donut chart that shows the composition at your mouse cursor when hovering over the triangle.
  • Styling Tab: Apply pre-made stylesheets or create your own by styling the graph with the provided options.
  • Trace Tab: Shows all added datasets, style equilibrium points, two-phase-region, tie-lines.

First, you need to import data into the table in the data tab. Each point you add should fill every column to a sum of 100 or 1 e.g [20,30,50].

The table is split into three columns:

  1. First column for the composition of the left axis
  2. Second column for the composition of the bottom axis
  3. Third column for the composition of the right axis

Each data point in the table is going to represent one equilibrium point on the binodal. Don't worry about the order you put them in. The application does the connecting for you. πŸ§™β€β™‚οΈ

Importing ✨

The most convenient way to add data is to use an Excel or CSV file. Here are two examples to copy the format

PS.: Don't worry about your data. Nothing gets stored or processed on the server. Everything stays on your computer!

Step-through

  1. Activate the Data Tab.
  2. Upload a .csv or .xlsx file (drag&drop or file menu) / Use a example dataset / Type in your values.
  3. Add the data to the plot by clicking on the green "Add" button.
  4. Continue to Explore 🍩 / Repeat with another dataset.

Where do I find the data tab?

The data tab is the first tab (left bar) with the table icon.

What data formats can I Import?

You have 3 options to choose from:

  1. Upload a .csv file.
  2. Upload a .xlsx file.
  3. Type in the values yourself.

How should I upload the data?

Either use the file menu or drag&drop your files into the area.

I don't have data yet but I want to try your application...

Don't be afraid. I got you covered! Just use one of the three example datasets by using the dropdown on the top of the data tab.

Can I add more than one dataset?

Just add another dataset in the table you can add as many as you want. When it gets a bit crowdy in the graph just click the legend entries to hide individual datasets. Go try it out!

Explore 🍩

Probably the best feature 😎

Step-through

  1. Activate the Mixture Tab.
  2. Activate the Orientation Crosshair.
  3. Hover over the diagram and look at the 🍩.
  4. Watch the magic. πŸ§™β€β™‚οΈ

Where do I find the Mixture Tab?

The Mixture Tab is the second tab (left bar) with the donut icon.

Where do I find the crosshair button?

The crosshair button is the second round blue button on the right top corner.

Style πŸ’…

The approach for styling was to provide good-looking defaults and also give you the freedom to customize everything to your needs.

Step-through

  1. Activate the Styling Tab.
  2. Select a theme or use the default one.
  3. Let your imagination out. 🎨
  4. Switch to the Trace Tab and customize your dataset.
  5. Let your imagination out. 🎨

You keep redoing the same styles over and over?

Got you covered! You can export your beautiful custom styles ("Style" option in the export section) as JSON files and reimport them for all your future plots in the drag&drop area in the data tab.

Is there an option to export my datasets so I can reuse them again?

You can export the datasets you added and your style ("Traces" option in the export section) into JSON files.

Can I change the font to LaTeX?

I also included LaTeX as a font so it looks professional!

What is customizable?

Graph:

  • Global: Theme, Fonts, Triangle Fill, Background Fill
  • Grid: Color, Line Opacity, Line Width
  • Ticks: Enable/Disable, Color, Size
  • Axes: Color, Width
  • Labels: Text, Text Color, Font Size
  • Title: Text, Color, Font Size
  • Legend: Enable/Disable

Traces:

  • Equilibrium Points: Enable/Disable, Symbols, Symbol Size, Symbol Opacity, Symbol Fill, Border Color, Border Width
  • Conodes: Enable/Disable, Line Style, Line Color, Opacity, Line Width
  • Binodal: Enable/Disable, Fill Color, Line Color, Line Style, Line Width, Area Opacity

Export πŸŽ‰

You are close to the finish line 🏁. Now you only have to export what you created.

Step-through

  1. Click the export circle button on the right top corner
  2. Select the options you want to export
    • Graph as image
    • Configurations for reusing dataset and style
  3. Click the download button
  4. You did it! Enjoy your Ternary Graph! ✌

Which formats are available

  • .pdf
  • .svg
  • .png

Final Words

First blog post is done πŸ₯³! Thank you for reading. I would love to get your thoughts and feedback. Write me on my socials down below πŸ‘‡πŸ‘‡πŸ‘‡

Join the newsletter

Be part of my journey and get informed about interesting new articles, topics and projects πŸš€