From c9f195d38e5cb762d02c11d231250c162a9536b9 Mon Sep 17 00:00:00 2001
From: Barrett Ruth <br.barrettruth@gmail.com>
Date: Fri, 5 Jul 2024 11:23:24 -0500
Subject: [PATCH] feat(romer-solow): finish

---
 posts/economics/models-of-production.html | 243 ++++++++++++++----
 scripts/posts/models-of-production.js     | 290 +++++++++++++++++-----
 2 files changed, 424 insertions(+), 109 deletions(-)

diff --git a/posts/economics/models-of-production.html b/posts/economics/models-of-production.html
index ac48954..f51ad03 100644
--- a/posts/economics/models-of-production.html
+++ b/posts/economics/models-of-production.html
@@ -141,7 +141,7 @@
                   <ul>
                     <li>
                       <div class="slider">
-                        <label for="sliderSA">\(A:\)</label>
+                        <label for="sliderSA">\(\bar{A}:\)</label>
                         <span id="outputSA">1.00</span>
                         <input
                           type="range"
@@ -155,11 +155,11 @@
                     </li>
                     <li>
                       <div class="slider">
-                        <label for="sliderSD">\(d:\)</label>
-                        <span id="outputSD">0.50</span>
+                        <label for="sliderSd">\(\bar{d}:\)</label>
+                        <span id="outputSd">0.50</span>
                         <input
                           type="range"
-                          id="sliderSD"
+                          id="sliderSd"
                           min="0.01"
                           max="0.99"
                           step="0.01"
@@ -173,11 +173,11 @@
                   <ul start="3">
                     <li>
                       <div class="slider">
-                        <label for="sliderSS">\(s:\)</label>
-                        <span id="outputSS">0.50</span>
+                        <label for="sliderSs">\(\bar{s}:\)</label>
+                        <span id="outputSs">0.50</span>
                         <input
                           type="range"
-                          id="sliderSS"
+                          id="sliderSs"
                           min="0.01"
                           max="0.99"
                           step="0.01"
@@ -187,11 +187,11 @@
                     </li>
                     <li>
                       <div class="slider">
-                        <label for="sliderSAlpha">\(\alpha:\)</label>
-                        <span id="outputSAlpha">0.33</span>
+                        <label for="sliderSalpha">\(\alpha:\)</label>
+                        <span id="outputSalpha">0.33</span>
                         <input
                           type="range"
-                          id="sliderSAlpha"
+                          id="sliderSalpha"
                           min="0.01"
                           max="0.99"
                           step="0.01"
@@ -375,11 +375,11 @@
                   <ul>
                     <li>
                       <div class="slider">
-                        <label for="sliderRZ">\(\bar{z}:\)</label>
-                        <span id="outputRZ">0.50</span>
+                        <label for="sliderRz">\(\bar{z}:\)</label>
+                        <span id="outputRz">0.50</span>
                         <input
                           type="range"
-                          id="sliderRZ"
+                          id="sliderRz"
                           min="0.1"
                           max="0.99"
                           step="0.01"
@@ -422,14 +422,14 @@
                     <li>
                       <div class="slider">
                         <label for="sliderRA0">\(\bar{A}_0:\)</label>
-                        <span id="outputRA0">5000</span>
+                        <span id="outputRA0">500</span>
                         <input
                           type="range"
                           id="sliderRA0"
-                          min="1"
-                          max="10000"
+                          min="0"
+                          max="1000"
                           step="100"
-                          value="5000"
+                          value="500"
                         />
                       </div>
                     </li>
@@ -473,10 +473,6 @@
                 output can be solved the production function: \[Y_t=A_t
                 L_{yt}=A_0(1+\bar{z}\bar{l}\bar{L})^t(1-\bar{l})\bar{L}\]
               </p>
-              <!-- <p> -->
-              <!--   It follows that the intensive form can be written as: -->
-              <!--   \[y_t=\frac{Y_t}{\bar{L}}=A_0(1+\bar{z}\bar{l}\bar{L})(1-\bar{l})\]. -->
-              <!-- </p> -->
             </div>
             <div class="fold"><h3>analysis</h3></div>
             <div>
@@ -688,11 +684,13 @@
                 rate and a negative relationship with the depreciation rate.
               </p>
               <p>
-                However, do economics grow <i>faster</i>/<i>slower</i> the
-                further <i>below</i>/<i>above</i> they are from their Balanced
-                Growth Path, as initially desired? While this can be
-                mathematically proven (of course), sometimes a visualization
-                helps.
+                Using the visualization below, we see a growth pattern similar
+                to that of the Romer Model. However, the Romer-Solow economy
+                indeed grows at a faster rate than the Romer model&mdash;I had
+                to cap \(\bar{L}\) at \(400\) and \(\alpha\) at \(0.4\) because
+                output would be
+                <i> too large </i> for JavaScript to contain in a number (the
+                graph would disappear).
               </p>
               <div class="graph">
                 <div id="romer-solow-visualization"></div>
@@ -702,25 +700,53 @@
                   <ul>
                     <li>
                       <div class="slider">
-                        <label for="sliderRSA">\(A:\)</label>
-                        <span id="outputRSA">1.00</span>
+                        <label for="sliderRSz">\(\bar{z}:\)</label>
+                        <span id="outputRSz">0.50</span>
                         <input
                           type="range"
-                          id="sliderRSA"
+                          id="sliderRSz"
                           min="0.1"
-                          max="2"
+                          max="0.99"
                           step="0.01"
-                          value="1"
+                          value="0.50"
                         />
                       </div>
                     </li>
                     <li>
                       <div class="slider">
-                        <label for="sliderRSD">\(d:\)</label>
-                        <span id="outputRSD">0.50</span>
+                        <label for="sliderRSA0">\(A_0:\)</label>
+                        <span id="outputRSA0">500</span>
                         <input
                           type="range"
-                          id="sliderRSD"
+                          id="sliderRSA0"
+                          min="0"
+                          max="1000"
+                          step="10"
+                          value="500"
+                        />
+                      </div>
+                    </li>
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSd">\(\bar{d}:\)</label>
+                        <span id="outputRSd">0.50</span>
+                        <input
+                          type="range"
+                          id="sliderRSd"
+                          min="0.01"
+                          max="0.99"
+                          step="0.01"
+                          value="0.50"
+                        />
+                      </div>
+                    </li>
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSs">\(\bar{s}:\)</label>
+                        <span id="outputRSs">0.50</span>
+                        <input
+                          type="range"
+                          id="sliderRSs"
                           min="0.01"
                           max="0.99"
                           step="0.01"
@@ -734,11 +760,25 @@
                   <ul start="3">
                     <li>
                       <div class="slider">
-                        <label for="sliderRSS">\(s:\)</label>
-                        <span id="outputRSS">0.50</span>
+                        <label for="sliderRSalpha">\(\alpha:\)</label>
+                        <span id="outputRSalpha">0.33</span>
                         <input
                           type="range"
-                          id="sliderRSS"
+                          id="sliderRSalpha"
+                          min="0.01"
+                          max="0.40"
+                          step="0.01"
+                          value="0.33"
+                        />
+                      </div>
+                    </li>
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSl">\(\bar{l}:\)</label>
+                        <span id="outputRSl">0.50</span>
+                        <input
+                          type="range"
+                          id="sliderRSl"
                           min="0.01"
                           max="0.99"
                           step="0.01"
@@ -748,21 +788,136 @@
                     </li>
                     <li>
                       <div class="slider">
-                        <label for="sliderRSAlpha">\(\alpha:\)</label>
-                        <span id="outputRSAlpha">0.33</span>
+                        <label for="sliderRSL">\(\bar{L}:\)</label>
+                        <span id="outputRSL">200</span>
                         <input
                           type="range"
-                          id="sliderRSAlpha"
-                          min="0.01"
-                          max="0.99"
-                          step="0.01"
-                          value="0.33"
+                          id="sliderRSL"
+                          min="0"
+                          max="400"
+                          step="10"
+                          value="200"
                         />
                       </div>
                     </li>
                   </ul>
                 </div>
               </div>
+              <p>
+                Playing with the parameters, the previous mathematical findings
+                are validated. For example, because
+                \(g_Y^*=\frac{\bar{z}\bar{l}\bar{L}}{1-\alpha}\), only changes
+                in parameters \(\alpha,\bar{z},\bar{l}\), and \(\bar{L}\) affect
+                the growth rate of output, manifesting as the y-axis scaling
+                up/down on a ratio scale.
+              </p>
+              <p>
+                However, do economics grow <i>faster</i>/<i>slower</i> the
+                further <i>below</i>/<i>above</i> they are from their Balanced
+                Growth Path, as initially desired? While this can be
+                mathematically proven (of course), sometimes a visualization
+                helps.
+              </p>
+              <p>
+                The graph below illustrates the transition dynamics of
+                Romer-Solow Model. Namely, \((\bar{z}, \bar{l}, \bar{L},
+                \alpha)=(0.5, 0.5, 100, 0.33)\forall t&lt;t_0\), then update to
+                the slider values when \(t>t_0\).
+              </p>
+              <div class="graph">
+                <div id="romer-solow-change-visualization"></div>
+              </div>
+              <div class="sliders">
+                <div style="padding-right: 20px">
+                  <ul>
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSCz0">\(\bar{z}_0:\)</label>
+                        <span id="outputRSCz0">0.50</span>
+                        <input
+                          type="range"
+                          id="sliderRSCz0"
+                          min="0.1"
+                          max="0.99"
+                          step="0.01"
+                          value="0.50"
+                        />
+                      </div>
+                    </li>
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSCalpha0">\(\alpha_0:\)</label>
+                        <span id="outputRSCalpha0">0.33</span>
+                        <input
+                          type="range"
+                          id="sliderRSCalpha0"
+                          min="0.01"
+                          max="0.54"
+                          step="0.01"
+                          value="0.33"
+                        />
+                      </div>
+                    </li>
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSCL0">\(\bar{L}_0:\)</label>
+                        <span id="outputRSCL0">100</span>
+                        <input
+                          type="range"
+                          id="sliderRSCL0"
+                          min="0"
+                          max="200"
+                          step="10"
+                          value="100"
+                        />
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+                <div style="padding-left: 20px">
+                  <ul start="3">
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSCl0">\(\bar{l}_0:\)</label>
+                        <span id="outputRSCl0">0.50</span>
+                        <input
+                          type="range"
+                          id="sliderRSCl0"
+                          min="0.01"
+                          max="0.99"
+                          step="0.01"
+                          value="0.50"
+                        />
+                      </div>
+                    </li>
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSCt0">\(t_0:\)</label>
+                        <span id="outputRSCt0">50</span>
+                        <input
+                          type="range"
+                          id="sliderRSCt0"
+                          min="0"
+                          max="100"
+                          step="1"
+                          value="50"
+                        />
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <p>
+                Finally, it is clear that economies converge to their Balanced
+                Growth Path as desired&mdash;something slightly more convoluted
+                to prove from the complex expression for \(Y^*\) derived
+                earlier. For example, with an increase in \(\alpha_0\), output
+                grows at an increasing rate after the change, then increases at
+                a decreasing rate as it converges to the new higher Balanced
+                Growth Path. Increasing parameters \(\bar{z},\bar{l},\bar{L}\)
+                yield similar results, although the changes are visually less
+                obvious.
+              </p>
             </div>
           </div>
         </article>
diff --git a/scripts/posts/models-of-production.js b/scripts/posts/models-of-production.js
index e82e2cc..ae3afef 100644
--- a/scripts/posts/models-of-production.js
+++ b/scripts/posts/models-of-production.js
@@ -1,23 +1,31 @@
+function setUpParameters(render, parameters, modelPrefix) {
+  parameters.forEach((param) => {
+    const slider = document.getElementById(`slider${modelPrefix}${param}`);
+    slider.oninput = function () {
+      slider.previousElementSibling.innerText = this.value;
+      render();
+    };
+  });
+  return parameters.map((param) => {
+    return parseFloat(
+      document.getElementById(`output${modelPrefix}${param}`).textContent,
+    );
+  });
+}
+
 function drawSolowGraph() {
   const L = 150,
     K_MAX = 500,
     margin = { top: 20, right: 30, bottom: 20, left: 50 };
 
-  ["A", "D", "S", "Alpha"].forEach((param) => {
-    const slider = document.getElementById(`sliderS${param}`);
-    slider.oninput = function () {
-      slider.previousElementSibling.innerText = this.value;
-      drawSolowGraph();
-    };
-  });
-
-  const A = parseFloat(document.getElementById("outputSA").textContent),
-    D = parseFloat(document.getElementById("outputSD").textContent),
-    S = parseFloat(document.getElementById("outputSS").textContent),
-    alpha = parseFloat(document.getElementById("outputSAlpha").textContent);
+  const [A, d, s, alpha] = setUpParameters(
+    drawSolowGraph,
+    ["A", "d", "s", "alpha"],
+    "S",
+  );
   const solowOutput = (K) => A * Math.pow(K, alpha) * Math.pow(L, 1 - alpha);
-  const solowDepreciation = (K) => D * K;
-  const solowInvestment = (Y) => S * Y;
+  const solowDepreciation = (K) => d * K;
+  const solowInvestment = (Y) => s * Y;
 
   const container = document.getElementById("solow-visualization");
   const width = container.clientWidth - margin.left - margin.right;
@@ -145,11 +153,11 @@ function drawSolowGraph() {
     .html(`<div class="solow-visualization-i"></div>`);
   katex.render("I", document.querySelector(".solow-visualization-i"));
 
-  const k_star = L * Math.pow((S * A) / D, 1 / (1 - alpha));
+  const k_star = L * Math.pow((s * A) / d, 1 / (1 - alpha));
   svg
     .append("line")
     .attr("x1", x(k_star))
-    .attr("y1", y((D * k_star) / S))
+    .attr("y1", y((d * k_star) / s))
     .attr("x2", x(k_star))
     .attr("y2", y(0))
     .attr("stroke", "black")
@@ -200,21 +208,14 @@ const updateRomerTable = (romerData) => {
 };
 
 function drawRomerGraph() {
-  const T_MAX = 100;
-  margin = { top: 20, right: 100, bottom: 20, left: 50 };
+  const T_MAX = 100,
+    margin = { top: 20, right: 100, bottom: 20, left: 50 };
 
-  ["Z", "L", "l", "A0"].forEach((param) => {
-    const slider = document.getElementById(`sliderR${param}`);
-    slider.oninput = function () {
-      slider.previousElementSibling.innerText = this.value;
-      drawRomerGraph();
-    };
-  });
-
-  const z = parseFloat(document.getElementById("outputRZ").textContent),
-    L = parseFloat(document.getElementById("outputRL").textContent),
-    l = parseFloat(document.getElementById("outputRl").textContent),
-    A0 = parseFloat(document.getElementById("outputRA0").textContent);
+  const [z, L, l, A0] = setUpParameters(
+    drawRomerGraph,
+    ["z", "L", "l", "A0"],
+    "R",
+  );
 
   const container = document.getElementById("romer-visualization");
   const width = container.clientWidth - margin.left - margin.right;
@@ -300,19 +301,10 @@ function drawRomerlGraph() {
   const T_MAX = 100,
     z = 0.01,
     L = 50,
-    A0 = 50;
-  margin = { top: 20, right: 100, bottom: 20, left: 50 };
+    A0 = 50,
+    margin = { top: 20, right: 100, bottom: 20, left: 50 };
 
-  ["lChange", "t0"].forEach((param) => {
-    const slider = document.getElementById(`slider${param}`);
-    slider.oninput = function () {
-      slider.previousElementSibling.innerText = this.value;
-      drawRomerlGraph();
-    };
-  });
-
-  const l = parseFloat(document.getElementById("outputlChange").textContent),
-    t0 = parseFloat(document.getElementById("outputt0").textContent);
+  const [l, t0] = setUpParameters(drawRomerlGraph, ["lChange", "t0"], "");
 
   const container = document.getElementById("romer-lchange-visualization");
   const width = container.clientWidth - margin.left - margin.right;
@@ -438,15 +430,36 @@ function drawRomerlGraph() {
   katex.render("log_{10}Y", document.querySelector(".romer-changel-y"));
 }
 
-function calculateRomerSolowData(T_MAX, L, l, A0, alpha, K0, s, d, z) {
+function calculateRomerSolowData(
+  T_MAX,
+  L,
+  l,
+  A0,
+  alpha,
+  s,
+  d,
+  z,
+  t0 = Infinity,
+  L0,
+  l0,
+  alpha0,
+  z0,
+) {
   let A = A0,
-    K = K0,
+    K_t = 1,
     romerSolowData = [];
 
-  for (let t = 1; t <= T_MAX; t++) {
-    const Y_t = A * Math.pow(K, alpha) * Math.pow((1 - l) * L, 1 - alpha);
+  for (let t = 1; t <= T_MAX; ++t) {
+    if (t > t0) {
+      alpha = alpha0;
+      z = z0;
+      l = l0;
+      L = L0;
+    }
+
+    const Y_t = A * Math.pow(K_t, alpha) * Math.pow((1 - l) * L, 1 - alpha);
     const A_t = A * (1 + z * l * L);
-    K = K + s * Y_t - d * K;
+    K_t = K_t + s * Y_t - d * K_t;
     romerSolowData.push({ year: t, A: A_t, K: K_t, Y: Math.log10(Y_t) });
     A = A_t;
   }
@@ -454,22 +467,15 @@ function calculateRomerSolowData(T_MAX, L, l, A0, alpha, K0, s, d, z) {
   return romerSolowData;
 }
 
-function drawRomerSolow() {
-  const T_MAX = 100;
-  margin = { top: 20, right: 100, bottom: 20, left: 50 };
+function drawRomerSolowGraph() {
+  const T_MAX = 100,
+    margin = { top: 20, right: 100, bottom: 20, left: 50 };
 
-  ["Z", "L", "l", "A0"].forEach((param) => {
-    const slider = document.getElementById(`sliderRS${param}`);
-    slider.oninput = function () {
-      slider.previousElementSibling.innerText = this.value;
-      drawRomerSolowGraph();
-    };
-  });
-
-  const z = parseFloat(document.getElementById("outputRSZ").textContent),
-    L = parseFloat(document.getElementById("outputRSL").textContent),
-    l = parseFloat(document.getElementById("outputRSl").textContent),
-    A0 = parseFloat(document.getElementById("outputRSA0").textContent);
+  const [z, l, L, A0, s, d, alpha] = setUpParameters(
+    drawRomerSolowGraph,
+    ["z", "l", "L", "A0", "s", "d", "alpha"],
+    "RS",
+  );
 
   const container = document.getElementById("romer-solow-visualization");
   const width = container.clientWidth - margin.left - margin.right;
@@ -485,7 +491,16 @@ function drawRomerSolow() {
     .append("g")
     .attr("transform", `translate(${margin.left}, ${margin.top})`);
 
-  const romerSolowData = calculateRomerSolowData();
+  const romerSolowData = calculateRomerSolowData(
+    T_MAX,
+    L,
+    l,
+    A0,
+    alpha,
+    s,
+    d,
+    z,
+  );
 
   const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]);
   svg
@@ -514,6 +529,148 @@ function drawRomerSolow() {
     .style("text-anchor", "start")
     .style("font-size", "1.5em")
     .text("log(Y)");
+
+  svg
+    .append("path")
+    .datum(romerSolowData)
+    .attr("fill", "none")
+    .attr("stroke", getTopicColor(urlToTopic()))
+    .attr("stroke-width", 2)
+    .attr(
+      "d",
+      d3
+        .line()
+        .x((d) => x(d.year))
+        .y((d) => y(d.Y)),
+    );
+
+  svg
+    .append("foreignObject")
+    .attr("width", "4em")
+    .attr("height", "2em")
+    .attr("x", x(T_MAX))
+    .attr("y", y(romerSolowData[T_MAX - 1].Y))
+    .append("xhtml:body")
+    .style("font-size", "0.75em")
+    .html(`<div class="romer-solow-visualization-y"></div>`);
+  katex.render(
+    "log_{10}Y",
+    document.querySelector(".romer-solow-visualization-y"),
+  );
+}
+
+function drawRomerSolowChangeGraph() {
+  const T_MAX = 100,
+    margin = { top: 20, right: 100, bottom: 20, left: 50 },
+    s = 0.2,
+    d = 0.2,
+    A0 = 50,
+    alpha = 0.33,
+    l = 0.5,
+    L = 100,
+    z = 0.5;
+
+  const [z0, l0, L0, alpha0, t0] = setUpParameters(
+    drawRomerSolowChangeGraph,
+    ["z0", "l0", "L0", "alpha0", "t0"],
+    "RSC",
+  );
+
+  const container = document.getElementById("romer-solow-change-visualization");
+  const width = container.clientWidth - margin.left - margin.right;
+  const height = container.clientHeight - margin.top - margin.bottom;
+
+  container.innerHTML = "";
+
+  const svg = d3
+    .select("#romer-solow-change-visualization")
+    .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})`);
+
+  const romerSolowData = calculateRomerSolowData(
+    T_MAX,
+    L,
+    l,
+    A0,
+    alpha,
+    s,
+    d,
+    z,
+    t0,
+    L0,
+    l0,
+    alpha0,
+    z0,
+  );
+
+  const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]);
+  svg
+    .append("g")
+    .attr("transform", `translate(0, ${height})`)
+    .call(d3.axisBottom(x))
+    .append("text")
+    .attr("fill", "#000")
+    .attr("x", width + 10)
+    .attr("y", -10)
+    .style("text-anchor", "end")
+    .style("font-size", "1.5em")
+    .text("t");
+
+  const y = d3
+    .scaleLinear()
+    .domain([0, romerSolowData[romerSolowData.length - 1].Y])
+    .range([height, 0]);
+  svg
+    .append("g")
+    .call(d3.axisLeft(y).ticks(10, d3.format(".1s")))
+    .append("text")
+    .attr("fill", "#000")
+    .attr("x", 0)
+    .attr("y", -10)
+    .style("text-anchor", "start")
+    .style("font-size", "1.5em")
+    .text("log(Y)");
+
+  svg
+    .append("path")
+    .datum(romerSolowData)
+    .attr("fill", "none")
+    .attr("stroke", getTopicColor(urlToTopic()))
+    .attr("stroke-width", 2)
+    .attr(
+      "d",
+      d3
+        .line()
+        .x((d) => x(d.year))
+        .y((d) => y(d.Y)),
+    );
+
+  svg
+    .append("line")
+    .attr("x1", x(t0))
+    .attr("y1", y(romerSolowData[T_MAX - 1].Y))
+    .attr("x2", x(t0))
+    .attr("y2", height)
+    .attr("stroke", "black")
+    .attr("stroke-width", 1)
+    .attr("stroke-dasharray", "4");
+
+  svg
+    .append("foreignObject")
+    .attr("width", "4em")
+    .attr("height", "2em")
+    .attr("x", x(T_MAX))
+    .attr("y", y(romerSolowData[T_MAX - 1].Y))
+    .append("xhtml:body")
+    .style("font-size", "0.75em")
+    .html(`<div class="romer-solow-change-visualization-y"></div>`);
+  katex.render(
+    "log_{10}Y",
+    document.querySelector(".romer-solow-change-visualization-y"),
+  );
 }
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -526,6 +683,9 @@ document.addEventListener("DOMContentLoaded", function () {
   drawRomerlGraph();
   window.onresize = drawRomerlGraph;
 
-  drawRomerSolow();
-  window.onresize = drawRomerSolow;
+  drawRomerSolowGraph();
+  window.onresize = drawRomerSolowGraph;
+
+  drawRomerSolowChangeGraph();
+  window.onresize = drawRomerSolowChangeGraph();
 });