Converting davenport diagram

Question

I'm an intern at the education department of a hospital, I've been tasked to turn a davenport diagram into a working interactive tool so the teachers can use it in their presentations.

---

I have no background/knowledge in chemistry or equation solving of this level.

---

The Davenport Diagram in question: https://i.stack.imgur.com/LTphs.jpg (not enough reputation to post images)

I've been on it for a couple of day now and made alot of progression with it, I used Flot.js in combination with jQuery to achieve almost identical clone of it, with the ability to drag and drop a data point, but also use user input and change the point.

Since yesterday I've hit a roadblock, I've googled a whole lot and visited many chemistry based websites just to understand to formula used by this diagram. The diagram uses the Henderson-Hasselbalch equation (Link 1).

Now my first question is, I can draw a data point using the simple coordinate based system, i.e. x = 7.20, y = 8 so the patient has Metabolic acidosis. However, I have no clue how to even begin to build a formula that also incorporates the PCO2 values (red lines).

My second question is, only possible if the first question is solved, how would I turn that formula into the coordinate system used by Flot.js?

Even just gently nudging me in the right direction will greatly help me

---

EDIT 1: (working solution)

I managed to build a working tool with the example provided by Mark. Since I only needed a single point to be drawn, I took the formula's out of their respective for loops.

            $(".davenportInput").change(function() {
                // replace the , with . so Flot/math can actually use it
                var iX = $("#inputX").val().replace(',','.'); // pH
                //var iY = $("#inputY").val();  // HCO3/HCOmm
                var iA = $("#inputA").val(); // PCO2

                var HCOmm = 0.03 * iA * Math.pow(10, iX - 6.1);
                var pH = 6.1 + Math.log10(HCOmm / (0.03 * iA));

                $("#inputY").val(HCOmm.toFixed());

                updatePoint(pH, HCOmm); // Draws the x,y coordinates
            }); 

Answer 1

Those red lines are isopleths. In order to plot them you vary the independent variable against the equation with enough granularity to produce points to approximate the curve.

According to wikipedia, your Henderson–Hasselbalch equation for blood is:

pH = 6.1 + log(HCO3MM/(0.03*PCO2))

Where pH is x and HCO3MM is your y and PCO2 is a constant for each curve. I'm guessing you'll want to vary x so solving the equation for HCO3MM produces:

HCO3MM = 0.03*PCO2*10^(pH-6.1)

Now let's create javascript function to produce a curve with this function:

// minPH to maxPH is range of x-axis
// PCO2 is constant for curve
function HHIsoPleth(minPH, maxPH, PCO2){
  var isoPleth = [];
  for (var i = minPH; i < maxPH; i += 0.01){ // produce points every 0.01 pH
    HCOmm = 3 * PCO2 * Math.pow(10, i-8.1);
    isoPleth.push([i,HCOmm]);
  }
  return isoPleth;
}

We can now call this function to build out multiple isopleth curves:

var data = [];
data.push(HHIsoPleth(7.0, 7.6, 20));
data.push(HHIsoPleth(7.0, 7.6, 40));
data.push(HHIsoPleth(7.0, 7.6, 60));

Plotting this with flot produces (example here):