Skip to content

Instantly share code, notes, and snippets.

@ikr7 ikr7/index.html
Created Dec 23, 2018

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Population Pyramid Simulation</title>
<style media="screen">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
}
canvas {
background: #def;
}
div {
position: absolute;
top: 1em;
left: 1em;
}
</style>
</head>
<body>
<canvas></canvas>
<div id="pop"></div>
<script>
const $ = document.querySelector.bind(document);
const width = 1000;
const height = 505;
const canvas = $('canvas');
const context = canvas.getContext('2d');
const pop = $('#pop');
document.body.style.width = width;
document.body.style.height = height;
canvas.width = width;
canvas.height = height;
const N = 101;
let pyramid = [];
for (let i = 0; i < N; i++) {
pyramid[i] = 500 - 5 * (i + 1);
}
let mr = [2.1, 0.3, 0.2, 0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.3, 0.3, 0.3, 0.3, 0.3, 0.4, 0.4, 0.4, 0.4, 0.4, 0.5, 0.5, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 0.8, 0.8, 1.2, 1.2, 1.2, 1.2, 1.2, 1.9, 1.9, 1.9, 1.9, 1.9, 2.7, 2.7, 2.7, 2.7, 2.7, 3.9, 3.9, 3.9, 3.9, 3.9, 5.8, 5.8, 5.8, 5.8, 5.8, 9.4, 9.4, 9.4, 9.4, 9.4, 17.4, 17.4, 17.4, 17.4, 17.4, 34.4, 34.4, 34.4, 34.4, 34.4, 68.5, 68.5, 68.5, 68.5, 68.5, 133.7, 133.7, 133.7, 133.7, 133.7, 238, 238, 238, 238, 238, 404.3];
function draw (year) {
context.clearRect(0, 0, width, height);
let sum = 0;
for (let i = 0; i < N; i++) {
const p = pyramid[i];
context.fillRect(
width / 2 - p / 2,
(N - i - 1) * (height / N),
p,
height / N,
);
sum += p;
}
pop.innerText = `YEAR ${year} \n POPULATION ${Math.round(sum)}`;
}
const tfr = 2.019;
function step () {
const new_pyramid = [];
for (let i = 0; i < N - 1; i++) {
new_pyramid[i + 1] = (1 - mr[i] / 1000) * pyramid[i];
}
new_pyramid[N - 1] += (1 - mr[N - 1] / 1000) * pyramid[N - 1];
let hm = 0;
for (let i = 15; i <= 49; i++) {
hm += 1.0 / (pyramid[i] / 2);
}
new_pyramid[0] = (49 - 15 + 1) * tfr / hm;
pyramid = new_pyramid;
}
canvas.addEventListener('click', () => {
draw(0);
step();
}, false);
function animate (year) {
draw(year);
step();
setTimeout(() => {
animate(year + 1)
}, 1000 / 50);
}
animate(0);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.