From 26815a522b02fd9216fbc173fb0f52d4418f12c2 Mon Sep 17 00:00:00 2001 From: Barrett Ruth Date: Wed, 26 Jun 2024 16:14:10 -0500 Subject: [PATCH] feat(posts): models of production solow model --- posts/economics/models-of-production.html | 115 +++++++++++++-- scripts/posts/models-of-production.js | 171 ++++++++++++++++++++++ styles/graph.css | 70 +++++++++ 3 files changed, 346 insertions(+), 10 deletions(-) create mode 100644 scripts/posts/models-of-production.js create mode 100644 styles/graph.css diff --git a/posts/economics/models-of-production.html b/posts/economics/models-of-production.html index 9a2570d..bd983fa 100644 --- a/posts/economics/models-of-production.html +++ b/posts/economics/models-of-production.html @@ -6,6 +6,7 @@ + @@ -17,7 +18,7 @@ Barrett Ruth - +
  • Capital accumulates according to investment \(I_t\) and - depreciation \(\bar{d}\), beginning with \(K_0\) + depreciation \(\bar{d}\), beginning with \(K_0\) (often called + the + Law of Capital Motion)
  • Labor \(L_t\) is time-independent
  • @@ -87,13 +90,13 @@ the Solow Model:

    -
    +
    1. \(C_t + I_t = Y_t\)
    2. \(\Delta K_{t+1} = I_t - \bar{d} K_t\)
    -
    +
    1. \(L_t = \bar{L}\)
    2. \(I_t = \bar{s} Y_t\)
      3. @@ -111,14 +114,105 @@

      Letting \((L_t,\alpha)=(\bar{L}, \frac{1}{3})\), it follows that - \(Y_t=F(K_t,L_t)=\bar{A}K_t^{\frac{1}{3}} - \bar{L_t}^{\frac{2}{3}}\). Utilizing this simplification and its - graphical representation below, output is clearly characterized by - the cube root of capital: + \(Y_t=F(K_t,L_t)=\bar{A}K_t^{\frac{1}{3}} \bar{L}^{\frac{2}{3}}\). + Utilizing this simplification and its graphical representation + below, output is clearly characterized by the cube root of + capital: +

      +
      +
      +
      +
      +
      +
        +
      • +
        + + 1.00 + +
        +
        • +
      • +
        + + 0.50 + +
        +
        • +
      +
      +
      +
        +
      • +
        + + 0.50 + +
        +
        • +
      • +
        + + 0.33 + +
        +
        • +
      +
      +
      +

      + When investment is completely disincentivized by depreciation (in + other words, \(sY_t=\bar{d}K_t\)), the economy equilibrates at a + so-called "steady-state" with equilibrium + \((K_t,Y_t)=(K_t^*,Y_t^*)\). +

      +

      + Using this equilibrium condition, it follows that: + \[Y_t^*=\bar{A}{K_t^*}^\alpha\bar{L}^{1-\alpha} \rightarrow + \bar{d}K_t^*=\bar{s}\bar{A}{K_t^*}^\alpha\bar{L}^{1-\alpha}\] + \[\rightarrow + K^*=\bar{L}(\frac{\bar{s}\bar{A}}{\bar{d}})^\frac{1}{1-\alpha}\] + \[\rightarrow + Y^*=\bar{A}^\frac{1}{1-\alpha}(\frac{\bar{s}}{\bar{d}})^\frac{\alpha}{1-\alpha}\bar{L}\] +

      +

      + Thus, the equilibrium intensive form (output per worker) of both + capital and output are summarized as follows: + \[(k^*,y^*)=(\frac{K^*}{\bar{L}},\frac{Y^*}{\bar{L}}) + =((\frac{\bar{s}\bar{A}}{\bar{d}})^\frac{1}{1-\alpha}, + \bar{A}^\frac{1}{1-\alpha}(\frac{\bar{s}}{\bar{d}})^\frac{\alpha}{1-\alpha})\]

    -

    conclusions

    -

    hello conclusions

    +

    analysis

    +

    discuss limitations

    romer

    romer-solow

    @@ -126,5 +220,6 @@ + diff --git a/scripts/posts/models-of-production.js b/scripts/posts/models-of-production.js new file mode 100644 index 0000000..c8c60f6 --- /dev/null +++ b/scripts/posts/models-of-production.js @@ -0,0 +1,171 @@ +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(`slider${param}`); + slider.oninput = function () { + slider.previousElementSibling.innerText = this.value; + drawSolowGraph(); + }; + }); + + const A = document.getElementById("outputA").textContent, + D = document.getElementById("outputD").textContent, + S = document.getElementById("outputS").textContent, + alpha = document.getElementById("outputAlpha").textContent; + const solowOutput = (K) => A * Math.pow(K, alpha) * Math.pow(L, 1 - alpha); + const solowDepreciation = (K) => D * K; + const solowInvestment = (Y) => S * Y; + + const container = document.getElementById("solow-visualization"); + const width = container.clientWidth - margin.left - margin.right; + const height = container.clientHeight - margin.top - margin.bottom; + + container.innerHTML = ""; + + const svg = d3 + .select("#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 x = d3.scaleLinear().domain([0, K_MAX]).range([0, width]); + const xAxis = svg + .append("g") + .attr("transform", `translate(0, ${height})`) + .call(d3.axisBottom(x)); + + xAxis + .append("text") + .attr("fill", "#000") + .attr("x", width + 10) + .attr("y", -10) + .style("text-anchor", "end") + .style("font-size", "1.5em") + .text("K"); + + const Y_MAX = solowOutput(K_MAX) + K_MAX / 10; + const y = d3.scaleLinear().domain([0, Y_MAX]).range([height, 0]); + const yAxis = svg.append("g").call(d3.axisLeft(y)); + + yAxis + .append("text") + .attr("fill", "#000") + .attr("x", 0) + .attr("y", -10) + .style("text-anchor", "start") + .style("font-size", "1.5em") + .text("Y"); + + const outputData = Array.from({ length: K_MAX }, (_, k) => ({ + K: k, + Y: solowOutput(k), + })); + svg + .append("path") + .datum(outputData) + .attr("fill", "none") + .attr("stroke", getTopicColor(urlToTopic())) + .attr("stroke-width", 2) + .attr( + "d", + d3 + .line() + .x((d) => x(d.K)) + .y((d) => y(d.Y)), + ); + svg + .append("foreignObject") + .attr("width", "2em") + .attr("height", "2em") + .attr("x", x(K_MAX)) + .attr("y", y(outputData[K_MAX - 1].Y)) + .append("xhtml:body") + .style("font-size", "0.75em") + .html(`
    `); + katex.render("Y", document.querySelector(".solow-visualization-y"), { + throwOnError: false, + }); + + const depreciationData = Array.from({ length: K_MAX }, (_, k) => ({ + K: k, + Y: solowDepreciation(k), + })); + svg + .append("path") + .datum(depreciationData) + .attr("fill", "none") + .attr("stroke", "red") + .attr("stroke-width", 2) + .attr( + "d", + d3 + .line() + .x((d) => x(d.K)) + .y((d) => y(d.Y)), + ); + + svg + .append("foreignObject") + .attr("width", "2em") + .attr("height", "2em") + .attr("x", x(K_MAX)) + .attr("y", y(depreciationData[K_MAX - 1].Y)) + .append("xhtml:body") + .style("font-size", "0.75em") + .html(`
    `); + katex.render("\\bar{d}K", document.querySelector(".solow-visualization-d"), { + throwOnError: false, + }); + + const investmentData = outputData.map((d) => ({ + K: d.K, + Y: solowInvestment(d.Y), + })); + svg + .append("path") + .datum(investmentData) + .attr("fill", "none") + .attr("stroke", "purple") + .attr("stroke-width", 2) + .attr( + "d", + d3 + .line() + .x((d) => x(d.K)) + .y((d) => y(d.Y)), + ); + + svg + .append("foreignObject") + .attr("width", "1em") + .attr("height", "2em") + .attr("x", x(K_MAX)) + .attr("y", y(investmentData[K_MAX - 1].Y)) + .append("xhtml:body") + .style("font-size", "0.75em") + .html(`
    `); + katex.render("I", document.querySelector(".solow-visualization-i"), { + throwOnError: false, + }); + + 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("x2", x(k_star)) + .attr("y2", y(0)) + .attr("stroke", "black") + .attr("stroke-width", 1) + .attr("stroke-dasharray", "5,5"); +} + +document.addEventListener("DOMContentLoaded", function () { + drawSolowGraph(); + window.onresize = drawSolowGraph; +}); diff --git a/styles/graph.css b/styles/graph.css new file mode 100644 index 0000000..03da3a6 --- /dev/null +++ b/styles/graph.css @@ -0,0 +1,70 @@ +.graph { + height: 50vh; + width: 100%; + display: flex; + justify-content: center; + margin: 50px 0; +} + +.graph div { + height: 100%; + width: 60%; +} + +.slider { + display: flex; + align-items: center; + justify-content: space-between; +} + +.slider label { + margin-right: 10px; +} + +.slider input { + margin-left: 20px; + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 2px; + background: black; + cursor: pointer; + outline: none; + transform: translateY(-50%); + width: 150px; +} + +.slider input::-webkit-slider-thumb { + -webkit-appearance: none; + width: 2px; + height: 15px; + background: black; + cursor: col-resize; + position: relative; +} + +.slider input::-moz-range-thumb { + width: 2px; + height: 15px; + background: black; + cursor: col-resize; + position: relative; +} + +.slider input::-webkit-slider-runnable-track, +.slider input::-moz-range-track { + width: 100%; + height: 2px; + background: black; + border: none; +} + +.sliders { + display: flex; + justify-content: center; +} + +ul { + list-style: none; + margin: 0; +}