Population Models

Comparison of linear and logistic growth curves

HTML

<div id="linear" style="border: 2px solid black;border-radius:5px;box-shadow: 3px 3px 3px black">
</div><br>

<div id="logistic" style="border: 2px solid black;border-radius:5px;box-shadow: 3px 3px 3px black">
</div><br>

Base Growth Rate: <input type="number" value="0.1" max="1" step="0.1" min="0" onchange="changeGrowth(this.value)"><br>
Available Land (in bn. inhabitants): <input type="number" value="1" max="5" step="0.1" min="0.1" onchange="changeLand(this.value)"><br>
Starting Population (in bn. inhabitants): <input type="number" value="0.5" max="1" min="0.1" step="0.1" onchange="changePop(this.value)"><br>

JavaScript

var deathRate = 0.0;
var growthRate = 0.1;
var landAvail = 1.0;
var startPop = 0.5;

function getLinPopulationAt(tf)
{
    var P = startPop;
    
    for (var t=0;t<tf;t+=0.25)
    {
        P = P + 0.25*( growthRate - deathRate )*P;
        if (P<0) P=0;
        if (P>landAvail) P=landAvail;
    }
    
    return P;
}

function getLogPopulationAt(tf)
{
    var P = startPop;
    
    for (var t=0;t<tf;t+=0.25)
    {
        P = P + 0.25*( growthRate * P - deathRate * P * P / landAvail );
        if (P<0) P=0;
        if (P>2*landAvail) P=2*landAvail;
    }
    
    return P;
}

function changeGrowth(val)
{
    growthRate = val;
    updateGraphs();
}

function changeLand(val)
{
    landAvail = val;
    updateGraphs();
}

function changePop(val)
{
    startPop = val;
    if (startPop < 0.1) startPop=0.1;
    updateGraphs();
}

var margin = {top: 20, right: 20, bottom: 50, left: 50},
    width = 500 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
	.tickValues([0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0])
	.tickSize(2)
	.tickPadding(6)

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
	.tickValues([0,1,2,3,4,5,6,7,8,9,10])
	.tickSize(2)
	.tickPadding(6)

var line = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

var svg_linear = d3.select("#linear").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var svg_log = d3.select("#logistic").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var...