feat(posts): slider for romer time dynamics

posts/economics/models-of-production.html

@@ -525,6 +525,24 @@
                     </li>
                   </ul>
                 </div>
+                <div style="padding-left: 20px">
+                  <ul start="3">
+                    <li>
+                      <div class="slider">
+                        <label for="slidert0">\(t_0:\)</label>
+                        <span id="outputt0">50</span>
+                        <input
+                          type="range"
+                          id="slidert0"
+                          min="1"
+                          max="99"
+                          step="1"
+                          value="50"
+                        />
+                      </div>
+                    </li>
+                  </ul>
+                </div>
               </div>
               <p>
                 Notably, while both the Romer and Solow Models help to analyze
@@ -588,6 +606,7 @@
               </div>
             </div>
             <div class="fold"><h3>solving the model</h3></div>
+            <div>
               <p>
                 Based on the the motivations for creating this model, it is more
                 useful to first analyze the growth rates of equilibrium long run
@@ -595,7 +614,7 @@
               </p>
               <p>
                 According to the production function, \[g_Y=g_A+\alpha
-              g_K+(1-\alpha)g_{L_{y}}\]
+                g_K+(1-\alpha)g_{L_y}\]
               </p>
               <p>
                 From previous analysis it was found that
@@ -637,19 +656,48 @@
               </p>
               <p>
                 Plugging in the known expressions for \(A_t^*\) and \(g_Y^*\), a
-              final expression for the Balanced Growth Path output as a function
+                final expression for the Balanced Growth Path output as a
-              of the endogenous parameters and time is obtained: \[
+                function of the endogenous parameters and time is obtained: \[
                 Y_t^*={(A_0(1+\bar{z}\bar{l}\bar{L})^t})^\frac{1}{1-\alpha}(\frac{\bar{s}}{\frac{\bar{z}\bar{l}\bar{L}}{1-\alpha}+\bar{d}})^\frac{\alpha}{1-\alpha}(1-\bar{l})\bar{L}\]
               </p>
             </div>
             <div class="fold"><h3>analysis</h3></div>
             <div>
               <p>
-              Intuitively, this means that idea-driving factors, as well as an
+                First looking at the growth rate of output,
-              increased allocation of labor to output, will increase the
+                \(g_Y^*=\frac{\bar{z}\bar{l}\bar{L}}{1-\alpha}\), idea-driving
-              Balanced Growth Path (the <i>level</i> of long-run growth),
+                factors and an increased allocation of labor to output increase
-              combining both the Romer and Solow model.
+                the equilibrium Balanced Growth Path&mdash;the
+                <i>level</i> of long-run growth. Thus, this model captures the
+                influences of both capital and ideas on economic growth.
+                <!-- TODO: t_0 graph break in romer-model and post -->
               </p>
+              <p>
+                Looking at \(Y_t^*\), ideas have both a direct and indirect
+                effect on output. Firstly, ideas raise output because they
+                increase productivity (directly); second, with the introduction
+                of capital stock, ideas also increase capital, in turn
+                increasing output further (indirectly). Mathematically, this is
+                evident in both instances of \(g_A^*\) in the formula for output
+                \(Y_t^*\)&mdash;note that
+                \(\frac{1}{1-\alpha},\frac{\alpha}{1-\alpha}>0\) for any
+                \(\alpha\in(0,1)\), so \(\frac{d}{dg_A^*}Y_t^*>0\).
+              </p>
+              <p>
+                Expectedly, output has a positive relationship with the savings
+                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.
+              </p>
+              <div class="graph">
+                <div id="romer-solow-visualization"></div>
+              </div>
+            </div>
           </div>
         </article>
       </div>

scripts/posts/models-of-production.js

@@ -303,13 +303,16 @@ function drawRomerlGraph() {
     A0 = 50;
   margin = { top: 20, right: 100, bottom: 20, left: 50 };
 
-  const slider = document.getElementById(`sliderlChange`);
+  ["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);
+  const l = parseFloat(document.getElementById("outputlChange").textContent),
+    t0 = parseFloat(document.getElementById("outputt0").textContent);
 
   const container = document.getElementById("romer-lchange-visualization");
   const width = container.clientWidth - margin.left - margin.right;
@@ -329,14 +332,14 @@ function drawRomerlGraph() {
     l_ = 0.1;
   const romerData = [];
 
-  for (let t = 1; t <= Math.floor(T_MAX / 2) - 1; ++t) {
+  for (let t = 1; t <= t0; ++t) {
     const A_t = A * (1 + z * l_ * L);
     const Y_t = A_t * (1 - l_) * L;
     romerData.push({ year: t, A: A_t, Y: Math.log10(Y_t) });
     A = A_t;
   }
 
-  for (let t = Math.floor(T_MAX / 2); t <= T_MAX; ++t) {
+  for (let t = t0 + 1; t <= T_MAX; ++t) {
     const A_t = A * (1 + z * l * L);
     const Y_t = A_t * (1 - l) * L;
     romerData.push({ year: t, A: A_t, Y: Math.log10(Y_t) });
@@ -385,11 +388,12 @@ function drawRomerlGraph() {
         .y((d) => y(d.Y)),
     );
 
+  console.log(t0)
   svg
     .append("line")
-    .attr("x1", x(T_MAX / 2))
+    .attr("x1", x(t0))
     .attr("y1", y(romerData[T_MAX - 1].Y))
-    .attr("x2", x(T_MAX / 2))
+    .attr("x2", x(t0))
     .attr("y2", height)
     .attr("stroke", "black")
     .attr("stroke-width", 1)
@@ -413,8 +417,8 @@ function drawRomerlGraph() {
     .append("foreignObject")
     .attr("width", "5em")
     .attr("height", "2em")
-    .attr("x", x(T_MAX / 2) + 15)
+    .attr("x", x(t0) + 15)
-    .attr("y", y(romerData[T_MAX / 2].Y))
+    .attr("y", y(romerData[t0].Y))
     .append("xhtml:body")
     .style("font-size", "0.6em")
     .html(`<div class="romer-changel-after"></div>`);