From 3e7dea4ff8024b88de63b65761c72c1f55773da4 Mon Sep 17 00:00:00 2001
From: Barrett Ruth <br.barrettruth@gmail.com>
Date: Thu, 4 Jul 2024 15:19:13 -0500
Subject: [PATCH] feat: namespace graph ids, sliders, and namespace

---
 posts/economics/models-of-production.html | 114 +++++++++++++++++-----
 scripts/posts/models-of-production.js     | 102 ++++++++++++++++---
 2 files changed, 181 insertions(+), 35 deletions(-)

diff --git a/posts/economics/models-of-production.html b/posts/economics/models-of-production.html
index 1648df6..ac48954 100644
--- a/posts/economics/models-of-production.html
+++ b/posts/economics/models-of-production.html
@@ -141,11 +141,11 @@
                   <ul>
                     <li>
                       <div class="slider">
-                        <label for="sliderA">\(A:\)</label>
-                        <span id="outputA">1.00</span>
+                        <label for="sliderSA">\(A:\)</label>
+                        <span id="outputSA">1.00</span>
                         <input
                           type="range"
-                          id="sliderA"
+                          id="sliderSA"
                           min="0.1"
                           max="2"
                           step="0.01"
@@ -155,11 +155,11 @@
                     </li>
                     <li>
                       <div class="slider">
-                        <label for="sliderD">\(d:\)</label>
-                        <span id="outputD">0.50</span>
+                        <label for="sliderSD">\(d:\)</label>
+                        <span id="outputSD">0.50</span>
                         <input
                           type="range"
-                          id="sliderD"
+                          id="sliderSD"
                           min="0.01"
                           max="0.99"
                           step="0.01"
@@ -173,11 +173,11 @@
                   <ul start="3">
                     <li>
                       <div class="slider">
-                        <label for="sliderS">\(s:\)</label>
-                        <span id="outputS">0.50</span>
+                        <label for="sliderSS">\(s:\)</label>
+                        <span id="outputSS">0.50</span>
                         <input
                           type="range"
-                          id="sliderS"
+                          id="sliderSS"
                           min="0.01"
                           max="0.99"
                           step="0.01"
@@ -187,11 +187,11 @@
                     </li>
                     <li>
                       <div class="slider">
-                        <label for="sliderAlpha">\(\alpha:\)</label>
-                        <span id="outputAlpha">0.33</span>
+                        <label for="sliderSAlpha">\(\alpha:\)</label>
+                        <span id="outputSAlpha">0.33</span>
                         <input
                           type="range"
-                          id="sliderAlpha"
+                          id="sliderSAlpha"
                           min="0.01"
                           max="0.99"
                           step="0.01"
@@ -375,11 +375,11 @@
                   <ul>
                     <li>
                       <div class="slider">
-                        <label for="sliderZ">\(\bar{z}:\)</label>
-                        <span id="outputZ">0.50</span>
+                        <label for="sliderRZ">\(\bar{z}:\)</label>
+                        <span id="outputRZ">0.50</span>
                         <input
                           type="range"
-                          id="sliderZ"
+                          id="sliderRZ"
                           min="0.1"
                           max="0.99"
                           step="0.01"
@@ -389,11 +389,11 @@
                     </li>
                     <li>
                       <div class="slider">
-                        <label for="sliderL">\(\bar{L}:\)</label>
-                        <span id="outputL">505</span>
+                        <label for="sliderRL">\(\bar{L}:\)</label>
+                        <span id="outputRL">505</span>
                         <input
                           type="range"
-                          id="sliderL"
+                          id="sliderRL"
                           min="10"
                           max="1000"
                           step="19"
@@ -407,11 +407,11 @@
                   <ul start="3">
                     <li>
                       <div class="slider">
-                        <label for="sliderl">\(\bar{l}:\)</label>
-                        <span id="outputl">0.50</span>
+                        <label for="sliderRl">\(\bar{l}:\)</label>
+                        <span id="outputRl">0.50</span>
                         <input
                           type="range"
-                          id="sliderl"
+                          id="sliderRl"
                           min="0.01"
                           max="0.99"
                           step="0.01"
@@ -421,11 +421,11 @@
                     </li>
                     <li>
                       <div class="slider">
-                        <label for="sliderA0">\(\bar{A}_0:\)</label>
-                        <span id="outputA0">5000</span>
+                        <label for="sliderRA0">\(\bar{A}_0:\)</label>
+                        <span id="outputRA0">5000</span>
                         <input
                           type="range"
-                          id="sliderA0"
+                          id="sliderRA0"
                           min="1"
                           max="10000"
                           step="100"
@@ -697,6 +697,72 @@
               <div class="graph">
                 <div id="romer-solow-visualization"></div>
               </div>
+              <div class="sliders">
+                <div style="padding-right: 20px">
+                  <ul>
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSA">\(A:\)</label>
+                        <span id="outputRSA">1.00</span>
+                        <input
+                          type="range"
+                          id="sliderRSA"
+                          min="0.1"
+                          max="2"
+                          step="0.01"
+                          value="1"
+                        />
+                      </div>
+                    </li>
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSD">\(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>
+                  </ul>
+                </div>
+                <div style="padding-left: 20px">
+                  <ul start="3">
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSS">\(s:\)</label>
+                        <span id="outputRSS">0.50</span>
+                        <input
+                          type="range"
+                          id="sliderRSS"
+                          min="0.01"
+                          max="0.99"
+                          step="0.01"
+                          value="0.50"
+                        />
+                      </div>
+                    </li>
+                    <li>
+                      <div class="slider">
+                        <label for="sliderRSAlpha">\(\alpha:\)</label>
+                        <span id="outputRSAlpha">0.33</span>
+                        <input
+                          type="range"
+                          id="sliderRSAlpha"
+                          min="0.01"
+                          max="0.99"
+                          step="0.01"
+                          value="0.33"
+                        />
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </div>
           </div>
         </article>
diff --git a/scripts/posts/models-of-production.js b/scripts/posts/models-of-production.js
index 4b3e4c8..e82e2cc 100644
--- a/scripts/posts/models-of-production.js
+++ b/scripts/posts/models-of-production.js
@@ -4,17 +4,17 @@ function drawSolowGraph() {
     margin = { top: 20, right: 30, bottom: 20, left: 50 };
 
   ["A", "D", "S", "Alpha"].forEach((param) => {
-    const slider = document.getElementById(`slider${param}`);
+    const slider = document.getElementById(`sliderS${param}`);
     slider.oninput = function () {
       slider.previousElementSibling.innerText = this.value;
       drawSolowGraph();
     };
   });
 
-  const A = parseFloat(document.getElementById("outputA").textContent),
-    D = parseFloat(document.getElementById("outputD").textContent),
-    S = parseFloat(document.getElementById("outputS").textContent),
-    alpha = parseFloat(document.getElementById("outputAlpha").textContent);
+  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 solowOutput = (K) => A * Math.pow(K, alpha) * Math.pow(L, 1 - alpha);
   const solowDepreciation = (K) => D * K;
   const solowInvestment = (Y) => S * Y;
@@ -204,17 +204,17 @@ function drawRomerGraph() {
   margin = { top: 20, right: 100, bottom: 20, left: 50 };
 
   ["Z", "L", "l", "A0"].forEach((param) => {
-    const slider = document.getElementById(`slider${param}`);
+    const slider = document.getElementById(`sliderR${param}`);
     slider.oninput = function () {
       slider.previousElementSibling.innerText = this.value;
       drawRomerGraph();
     };
   });
 
-  const z = parseFloat(document.getElementById("outputZ").textContent),
-    L = parseFloat(document.getElementById("outputL").textContent),
-    l = parseFloat(document.getElementById("outputl").textContent),
-    A0 = parseFloat(document.getElementById("outputA0").textContent);
+  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 container = document.getElementById("romer-visualization");
   const width = container.clientWidth - margin.left - margin.right;
@@ -388,7 +388,6 @@ function drawRomerlGraph() {
         .y((d) => y(d.Y)),
     );
 
-  console.log(t0)
   svg
     .append("line")
     .attr("x1", x(t0))
@@ -439,6 +438,84 @@ function drawRomerlGraph() {
   katex.render("log_{10}Y", document.querySelector(".romer-changel-y"));
 }
 
+function calculateRomerSolowData(T_MAX, L, l, A0, alpha, K0, s, d, z) {
+  let A = A0,
+    K = K0,
+    romerSolowData = [];
+
+  for (let t = 1; t <= T_MAX; t++) {
+    const Y_t = A * Math.pow(K, alpha) * Math.pow((1 - l) * L, 1 - alpha);
+    const A_t = A * (1 + z * l * L);
+    K = K + s * Y_t - d * K;
+    romerSolowData.push({ year: t, A: A_t, K: K_t, Y: Math.log10(Y_t) });
+    A = A_t;
+  }
+
+  return romerSolowData;
+}
+
+function drawRomerSolow() {
+  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 container = document.getElementById("romer-solow-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-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();
+
+  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)");
+}
+
 document.addEventListener("DOMContentLoaded", function () {
   drawSolowGraph();
   window.onresize = drawSolowGraph;
@@ -448,4 +525,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
   drawRomerlGraph();
   window.onresize = drawRomerlGraph;
+
+  drawRomerSolow();
+  window.onresize = drawRomerSolow;
 });