## 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:

Development of the

*concept*Development of the

*theory*Implementation of the theory as

*code*Implementation of a

*user interface*

These subjects will be taken one at a time.

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 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

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 (AtoB) is equal to the rate of the reverse reaction (BtoA).

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

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

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 (http://www.stolaf.edu/people/hansonr/divgraph)." Commercial licensing is available for specific purposes.