feat: namespace graph ids, sliders, and namespace
This commit is contained in:
parent
77c38c8999
commit
3e7dea4ff8
2 changed files with 181 additions and 35 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue