Merge branch 'main' of github.com:barrett-ruth/barrettruth.com
This commit is contained in:
commit
102c71e87a
2 changed files with 538 additions and 77 deletions
|
|
@ -68,7 +68,7 @@
|
|||
>, the Solow Model describes production as follows:
|
||||
\[Y_t=F(K_t,L_t)=\bar{A}K_t^\alpha L_t^{1-\alpha}\] With:
|
||||
</p>
|
||||
<ul>
|
||||
<ul style="list-style: unset">
|
||||
<li>\(\bar{A}\): total factor productivity (TFP)</li>
|
||||
<li>
|
||||
\(\alpha\): capital's share of output—usually
|
||||
|
|
@ -141,11 +141,11 @@
|
|||
<ul>
|
||||
<li>
|
||||
<div class="slider">
|
||||
<label for="sliderA">\(A:\)</label>
|
||||
<span id="outputA">1.00</span>
|
||||
<label for="sliderSA">\(\bar{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">\(\bar{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">\(\bar{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"
|
||||
|
|
@ -316,7 +316,7 @@
|
|||
The Romer Models' production function can be modelled as:
|
||||
\[Y_t=F(A_t,L_{yt})=A_tL_{yt}\] With:
|
||||
</p>
|
||||
<ul>
|
||||
<ul style="list-style: unset">
|
||||
<li>\(A_t\): the amount of ideas \(A\) in period \(t\)</li>
|
||||
<li>
|
||||
\(L_{yt}\): the population working on production-facing
|
||||
|
|
@ -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,15 +421,15 @@
|
|||
</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">500</span>
|
||||
<input
|
||||
type="range"
|
||||
id="sliderA0"
|
||||
min="1"
|
||||
max="10000"
|
||||
id="sliderRA0"
|
||||
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>
|
||||
|
|
@ -687,6 +683,134 @@
|
|||
Expectedly, output has a positive relationship with the savings
|
||||
rate and a negative relationship with the depreciation rate.
|
||||
</p>
|
||||
<p>
|
||||
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—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>
|
||||
</div>
|
||||
<div class="sliders">
|
||||
<div style="padding-right: 20px">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="slider">
|
||||
<label for="sliderRSz">\(\bar{z}:\)</label>
|
||||
<span id="outputRSz">0.50</span>
|
||||
<input
|
||||
type="range"
|
||||
id="sliderRSz"
|
||||
min="0.1"
|
||||
max="0.99"
|
||||
step="0.01"
|
||||
value="0.50"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="slider">
|
||||
<label for="sliderRSA0">\(A_0:\)</label>
|
||||
<span id="outputRSA0">500</span>
|
||||
<input
|
||||
type="range"
|
||||
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"
|
||||
value="0.50"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="padding-left: 20px">
|
||||
<ul start="3">
|
||||
<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.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"
|
||||
value="0.50"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="slider">
|
||||
<label for="sliderRSL">\(\bar{L}:\)</label>
|
||||
<span id="outputRSL">200</span>
|
||||
<input
|
||||
type="range"
|
||||
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
|
||||
|
|
@ -694,9 +818,106 @@
|
|||
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<t_0\), then update to
|
||||
the slider values when \(t>t_0\).
|
||||
</p>
|
||||
<div class="graph">
|
||||
<div id="romer-solow-visualization"></div>
|
||||
<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—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>
|
||||
|
|
|
|||
|
|
@ -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(`slider${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, 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(`slider${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, 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;
|
||||
|
|
@ -388,7 +380,6 @@ function drawRomerlGraph() {
|
|||
.y((d) => y(d.Y)),
|
||||
);
|
||||
|
||||
console.log(t0)
|
||||
svg
|
||||
.append("line")
|
||||
.attr("x1", x(t0))
|
||||
|
|
@ -439,6 +430,249 @@ function drawRomerlGraph() {
|
|||
katex.render("log_{10}Y", document.querySelector(".romer-changel-y"));
|
||||
}
|
||||
|
||||
function calculateRomerSolowData(
|
||||
T_MAX,
|
||||
L,
|
||||
l,
|
||||
A0,
|
||||
alpha,
|
||||
s,
|
||||
d,
|
||||
z,
|
||||
t0 = Infinity,
|
||||
L0,
|
||||
l0,
|
||||
alpha0,
|
||||
z0,
|
||||
) {
|
||||
let A = A0,
|
||||
K_t = 1,
|
||||
romerSolowData = [];
|
||||
|
||||
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_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;
|
||||
}
|
||||
|
||||
return romerSolowData;
|
||||
}
|
||||
|
||||
function drawRomerSolowGraph() {
|
||||
const T_MAX = 100,
|
||||
margin = { top: 20, right: 100, bottom: 20, left: 50 };
|
||||
|
||||
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;
|
||||
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(
|
||||
T_MAX,
|
||||
L,
|
||||
l,
|
||||
A0,
|
||||
alpha,
|
||||
s,
|
||||
d,
|
||||
z,
|
||||
);
|
||||
|
||||
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("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 () {
|
||||
drawSolowGraph();
|
||||
window.onresize = drawSolowGraph;
|
||||
|
|
@ -448,4 +682,10 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
|
||||
drawRomerlGraph();
|
||||
window.onresize = drawRomerlGraph;
|
||||
|
||||
drawRomerSolowGraph();
|
||||
window.onresize = drawRomerSolowGraph;
|
||||
|
||||
drawRomerSolowChangeGraph();
|
||||
window.onresize = drawRomerSolowChangeGraph();
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue