barrett/barrettruth.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(modelsofproduction): clean up graphs

Browse source
This commit is contained in:
Barrett Ruth 2025-11-09 16:40:02 -05:00
parent f63e429169
commit a1d8f48a08
1 changed files with 64 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

99
public/scripts/models-of-production.js
View file

@ -28,7 +28,7 @@ function setUpParameters(render, parameters, modelPrefix) {
function drawSolowGraph() { function drawSolowGraph() {
const L = 150, const L = 150,
K_MAX = 500, K_MAX = 500,
margin = { top: 20, right: 30, bottom: 20, left: 50 }; margin = { top: 80, right: 80, bottom: 60, left: 100 };
const [A, d, s, alpha] = setUpParameters( const [A, d, s, alpha] = setUpParameters(
drawSolowGraph, drawSolowGraph,
@ -55,27 +55,29 @@ function drawSolowGraph() {
.attr("transform", `translate(${margin.left}, ${margin.top})`); .attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleLinear().domain([0, K_MAX]).range([0, width]); const x = d3.scaleLinear().domain([0, K_MAX]).range([0, width]);
svg const xAxis = svg
.append("g") .append("g")
.attr("transform", `translate(0, ${height})`) .attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x)) .call(d3.axisBottom(x));
xAxis.selectAll("text").style("font-size", "1.5em");
xAxis
.append("text") .append("text")
.attr("x", width + 10) .attr("x", width + 10)
.attr("y", -10) .attr("y", -10)
.style("text-anchor", "end") .style("text-anchor", "end")
.style("font-size", "1.5em") .style("font-size", "2em")
.text("K"); .text("K");
const Y_MAX = solowOutput(K_MAX) + K_MAX / 10; const Y_MAX = solowOutput(K_MAX) + K_MAX / 10;
const y = d3.scaleLinear().domain([0, Y_MAX]).range([height, 0]); const y = d3.scaleLinear().domain([0, Y_MAX]).range([height, 0]);
svg const yAxis = svg.append("g").call(d3.axisLeft(y));
.append("g") yAxis.selectAll("text").style("font-size", "1.5em");
.call(d3.axisLeft(y)) yAxis
.append("text") .append("text")
.attr("x", 0) .attr("x", 0)
.attr("y", -10) .attr("y", -10)
.style("text-anchor", "start") .style("text-anchor", "start")
.style("font-size", "1.5em") .style("font-size", "2em")
.text("Y"); .text("Y");
const outputData = Array.from({ length: K_MAX }, (_, k) => ({ const outputData = Array.from({ length: K_MAX }, (_, k) => ({
@ -204,7 +206,7 @@ const updateRomerTable = (romerData) => {
function drawRomerGraph() { function drawRomerGraph() {
const T_MAX = 100, const T_MAX = 100,
margin = { top: 20, right: 100, bottom: 20, left: 50 }; margin = { top: 80, right: 120, bottom: 60, left: 100 };
const [z, L, l, A0] = setUpParameters( const [z, L, l, A0] = setUpParameters(
drawRomerGraph, drawRomerGraph,
@ -237,29 +239,33 @@ function drawRomerGraph() {
} }
const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]); const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]);
svg const xAxis = svg
.append("g") .append("g")
.attr("transform", `translate(0, ${height})`) .attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x)) .call(d3.axisBottom(x));
xAxis.selectAll("text").style("font-size", "1.5em");
xAxis
.append("text") .append("text")
.attr("x", width + 10) .attr("x", width + 10)
.attr("y", -10) .attr("y", -10)
.style("text-anchor", "end") .style("text-anchor", "end")
.style("font-size", "1.5em") .style("font-size", "2em")
.text("t"); .text("t");
const y = d3 const y = d3
.scaleLinear() .scaleLinear()
.domain([0, romerData[romerData.length - 1].Y]) .domain([0, romerData[romerData.length - 1].Y])
.range([height, 0]); .range([height, 0]);
svg const yAxis = svg
.append("g") .append("g")
.call(d3.axisLeft(y).ticks(10, d3.format(".1s"))) .call(d3.axisLeft(y).ticks(10, d3.format(".1s")));
yAxis.selectAll("text").style("font-size", "1.5em");
yAxis
.append("text") .append("text")
.attr("x", 0) .attr("x", 0)
.attr("y", -10) .attr("y", -10)
.style("text-anchor", "start") .style("text-anchor", "start")
.style("font-size", "1.5em") .style("font-size", "2em")
.text("log(Y)"); .text("log(Y)");
svg svg
@ -291,7 +297,7 @@ function drawRomerlGraph() {
z = 0.01, z = 0.01,
L = 50, L = 50,
A0 = 50, A0 = 50,
margin = { top: 20, right: 100, bottom: 20, left: 50 }; margin = { top: 80, right: 120, bottom: 60, left: 100 };
const [l, t0] = setUpParameters(drawRomerlGraph, ["lChange", "t0"], ""); const [l, t0] = setUpParameters(drawRomerlGraph, ["lChange", "t0"], "");
@ -328,29 +334,33 @@ function drawRomerlGraph() {
} }
const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]); const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]);
svg const xAxis = svg
.append("g") .append("g")
.attr("transform", `translate(0, ${height})`) .attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x)) .call(d3.axisBottom(x));
xAxis.selectAll("text").style("font-size", "1.5em");
xAxis
.append("text") .append("text")
.attr("x", width + 10) .attr("x", width + 10)
.attr("y", -10) .attr("y", -10)
.style("text-anchor", "end") .style("text-anchor", "end")
.style("font-size", "1.5em") .style("font-size", "2em")
.text("t"); .text("t");
const y = d3 const y = d3
.scaleLinear() .scaleLinear()
.domain([0, romerData[romerData.length - 1].Y]) .domain([0, romerData[romerData.length - 1].Y])
.range([height, 0]); .range([height, 0]);
svg const yAxis = svg
.append("g") .append("g")
.call(d3.axisLeft(y).ticks(10, d3.format(".1s"))) .call(d3.axisLeft(y).ticks(10, d3.format(".1s")));
yAxis.selectAll("text").style("font-size", "1.5em");
yAxis
.append("text") .append("text")
.attr("x", 0) .attr("x", 0)
.attr("y", -10) .attr("y", -10)
.style("text-anchor", "start") .style("text-anchor", "start")
.style("font-size", "1.5em") .style("font-size", "2em")
.text("log(Y)"); .text("log(Y)");
svg svg
@ -437,7 +447,7 @@ function calculateRomerSolowData(
function drawRomerSolowGraph() { function drawRomerSolowGraph() {
const T_MAX = 100, const T_MAX = 100,
margin = { top: 20, right: 100, bottom: 20, left: 50 }; margin = { top: 80, right: 120, bottom: 60, left: 100 };
const [z, l, L, A0, s, d, alpha] = setUpParameters( const [z, l, L, A0, s, d, alpha] = setUpParameters(
drawRomerSolowGraph, drawRomerSolowGraph,
@ -471,29 +481,33 @@ function drawRomerSolowGraph() {
); );
const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]); const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]);
svg const xAxis = svg
.append("g") .append("g")
.attr("transform", `translate(0, ${height})`) .attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x)) .call(d3.axisBottom(x));
xAxis.selectAll("text").style("font-size", "1.5em");
xAxis
.append("text") .append("text")
.attr("x", width + 10) .attr("x", width + 10)
.attr("y", -10) .attr("y", -10)
.style("text-anchor", "end") .style("text-anchor", "end")
.style("font-size", "1.5em") .style("font-size", "2em")
.text("t"); .text("t");
const y = d3 const y = d3
.scaleLinear() .scaleLinear()
.domain([0, romerSolowData[romerSolowData.length - 1].Y]) .domain([0, romerSolowData[romerSolowData.length - 1].Y])
.range([height, 0]); .range([height, 0]);
svg const yAxis = svg
.append("g") .append("g")
.call(d3.axisLeft(y).ticks(10, d3.format(".1s"))) .call(d3.axisLeft(y).ticks(10, d3.format(".1s")));
yAxis.selectAll("text").style("font-size", "1.5em");
yAxis
.append("text") .append("text")
.attr("x", 0) .attr("x", 0)
.attr("y", -10) .attr("y", -10)
.style("text-anchor", "start") .style("text-anchor", "start")
.style("font-size", "1.5em") .style("font-size", "2em")
.text("log(Y)"); .text("log(Y)");
svg svg
@ -566,29 +580,33 @@ function drawRomerSolowChangeGraph() {
); );
const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]); const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]);
svg const xAxis = svg
.append("g") .append("g")
.attr("transform", `translate(0, ${height})`) .attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x)) .call(d3.axisBottom(x));
xAxis.selectAll("text").style("font-size", "1.5em");
xAxis
.append("text") .append("text")
.attr("x", width + 10) .attr("x", width + 10)
.attr("y", -10) .attr("y", -10)
.style("text-anchor", "end") .style("text-anchor", "end")
.style("font-size", "1.5em") .style("font-size", "2em")
.text("t"); .text("t");
const y = d3 const y = d3
.scaleLinear() .scaleLinear()
.domain([0, romerSolowData[romerSolowData.length - 1].Y]) .domain([0, romerSolowData[romerSolowData.length - 1].Y])
.range([height, 0]); .range([height, 0]);
svg const yAxis = svg
.append("g") .append("g")
.call(d3.axisLeft(y).ticks(10, d3.format(".1s"))) .call(d3.axisLeft(y).ticks(10, d3.format(".1s")));
yAxis.selectAll("text").style("font-size", "1.5em");
yAxis
.append("text") .append("text")
.attr("x", 0) .attr("x", 0)
.attr("y", -10) .attr("y", -10)
.style("text-anchor", "start") .style("text-anchor", "start")
.style("font-size", "1.5em") .style("font-size", "2em")
.text("log(Y)"); .text("log(Y)");
svg svg
@ -635,3 +653,14 @@ window.onresize = () => {
drawRomerSolowGraph(); drawRomerSolowGraph();
drawRomerSolowChangeGraph(); drawRomerSolowChangeGraph();
}; };
new MutationObserver(() => {
drawSolowGraph();
drawRomerGraph();
drawRomerlGraph();
drawRomerSolowGraph();
drawRomerSolowChangeGraph();
}).observe(document.documentElement, {
attributes: true,
attributeFilter: ["data-theme"],
});