See the Pen Vue / graph.js – VdW eqn exploration by Jon Chui (@jkwchui) on CodePen.

The ideal gas equation PV = nRT assumes an ideal gas of which the individual gas molecule

  1. has no attraction for another gas molecule,
  2. occupies no volume of its own.

Real gases do not obey the Ideal Gas Law at some conditions, and their deviation can be corrected by using the Van der Waal equation instead.  In the VdW equation, an attraction constant a and a volume constant b is introduced to account for the two above properties of real gases.

A curious and diligent student revised over summer and asked about the VdW equation.  I tried to answer Matthew’s queries to the best of my ability (which isn’t much.  Sadly, after years with Tom Fyles I haven’t developed the taste or acumen for physical chemistry).  While doing so, I realized that a list of measured VdW constants is easy to find, but visualizing how this correction impacts the P-V isotherm is not available.  So I built one.

I used Vue.js for the two-way binding and reactivity, bulma for styling, and chart.js for graphing.  Panning and zooming used the Pan/Zoom plugin for chart.js.  I tried plotly.js for graphing but I could not get the reactivity to work.  Actually, I still don’t understand many aspects of the reactivity: somehow if the display of the array at the bottom is removed from the html, the logic in the javascript (specifically, computed properties) fails.  If you know why, or a better way to go about this, please enlighten me.

There are two chemistry aspects that I appreciated from the explorer.  First is how well the ideal gas law work: the red and gray curves coalesce almost perfectly.  As an IB chemistry teacher, every year some student wants to measure the VdW constant for their Internal Assessment.  Some inevitably think I am mean for rejecting their proposal (how do you know that I can’t do this?) — I think the visual would do wonder to convince them of the difficulty of what they propose to do.

Second is about the existence of the “oscillation”, which I have never thought about.  To see that for yourself you can choose a = 300, b = 0.1, and slide the temperature up from about 70 to 90.  This, of course, goes back to point out how I gravitate to the statistical rather than the analytical; the square term in V should have revealed that this cannot be monotonic.

Building this has been a fruitful learning experience for me, and I can see this framework being useful elsewhere.  I will next be looking to re-factor this out into a Vue component.