Development of a Real-Time Dynamic Graphing Web Page

"Real-Time dynamic graphing" is intended here to mean graphs that users contribute to the formation of and graphs that change with time. These might be graphs that help a student explore a difficult subject or illustrate an important point.

Rather than simply present several examples of such graphs, this page focuses on the development of a page that will utilize the divgraph.js graphing package. This development involves four basic steps:

These subjects will be taken one at a time.

Development of the Concept

First, we need a concept. The idea for this page will be the presentation of the relationship between kinetics and equilibrium in chemical systems. In particular, a simple chemical system including just two compounds, A and B, will be considered:

This graphic was exported from ChemDraw using 24-pt fonts. It has a transparent background that is automatically created by ChemDraw.

This just says that if you mix A and B, A will react to become B, and B will react to become A. This equation also states that one molecule of A reacts to give one molecule of B. This will be an important part of the concept. A is just turning into B, and vice versa. No other substances are involved (presumably).

The goal will be to develop a web page that connects the concept of dynamic equilibrium with the concept of rates of chemical reactions. The objective will be to demonstrate the following statement, made in every first-year chemistry textbook:

When a chemical system is at equilibrium, the rate of the
forward reaction (A to B) is equal to the rate of the reverse reaction (B to A).

This is a perfect example of a concept that could benefit from dynamic graphing, because the amounts of A and B in solution (actually, their concentrations, in moles per liter) can be plotted against time, and it should be possible to demonstrate that equilibrium has been reached by those concentrations not changing any more.

The idea, then, is to produce a graph that shows the estabishment of equilibrium over the course of time. The user will decide how much A and B to put into the system and will also choose the value of the equilibrium constant, K. Then the JavaScript will take over and show the changes in concentration of A and B over time.

That's the concept. What we need now is the development of the theory.

back to the list of examples

copyright 2001 Robert M. Hanson. All rights reserved. divgraph.js is freely distributable for noncomercial purposes, provided reference is made as "divgraph.js was developed at St. Olaf College by Robert M. Hanson (" Commercial licensing is available for specific purposes.