Added maps iframe

TeachBooks · Apr 24, 2024 · 710420b · 710420b
1 parent 83d0876
commit 710420b
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 39 deletions.
diff --git a/book/_static/maps.html b/book/_static/maps.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Profit Calculation</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <style>
+        .slider {
+            display: block;
+            margin-bottom: 10px;
+            width: 100%;
+        }
+        .slider-container {
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            grid-gap: 10px;
+            width: 100%;
+        }
+        .output {
+            margin-top: 20px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            background-color: #f9f9f9;
+        }
+        .output p {
+            margin: 5px 0;
+        }
+        .output .emoji {
+            font-size: 20px;
+            margin-right: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div id="sliderContainer" class="slider-container"></div>
+    <div id="outputContainer" class="output"></div>
+
+    <script>
+        function func(n, truth) {
+            var n_range = numeric.linspace(0, 100, 100);
+            var profit = numeric.sub(numeric.mul(75, n_range), numeric.mul(numeric.sub(150, numeric.mul(0.01, numeric.pow(n_range, 2))), n_range));
+            var title = 'Negative profit for amount of bathmetry maps sold is € ' + (75 * n - (150 - 0.01 * Math.pow(n, 2)) * n).toFixed(2);
+
+            var data = [
+                {
+                    x: n_range,
+                    y: profit,
+                    type: 'scatter',
+                    mode: 'lines',
+                    name: 'Objective function',
+                    visible: truth ? true : 'legendonly'
+                },
+                {
+                    x: [n],
+                    y: [75 * n - (150 - 0.01 * Math.pow(n, 2)) * n],
+                    type: 'scatter',
+                    mode: 'markers',
+                    name: 'Selected point',
+                    marker: {
+                        size: 10 // Set the size of the marker to a larger value
+                    }
+                }
+            ];
+
+            var layout = {
+                title: title,
+                xaxis: {
+                    title: 'Number of bathmetry maps n sold (-)',
+                    range: [0, 100]
+                },
+                yaxis: {
+                    title: 'Negative profit (€)',
+                    range: [-3000, 3000]
+                },
+                showlegend: truth
+            };
+
+            Plotly.newPlot('outputContainer', data, layout);
+        }
+
+        var sliderContainer = document.getElementById("sliderContainer");
+        var sliders = [
+            { id: "n", min: 0, max: 100, value: 20, step: 1, description: "#maps n sold" }
+        ];
+
+        sliders.forEach(function(slider) {
+            var input = document.createElement("input");
+            input.type = "range";
+            input.min = slider.min;
+            input.max = slider.max;
+            input.value = slider.value;
+            input.step = slider.step;
+            input.id = slider.id;
+            input.oninput = function() {
+                document.getElementById(slider.id + "_value").textContent = this.value;
+                func(parseInt(this.value), document.getElementById("truth").checked);
+            };
+            input.classList.add("slider");
+
+            var label = document.createElement("label");
+            label.innerHTML = slider.description;
+            label.setAttribute("for", slider.id);
+            label.style.textAlign = "right";
+
+            var valueDisplay = document.createElement("span"); // Create a span element for value display
+            valueDisplay.id = slider.id + "_value"; // Set the id for value display
+            valueDisplay.textContent = slider.value; // Set the initial value
+
+            sliderContainer.appendChild(label);
+            sliderContainer.appendChild(input);
+            sliderContainer.appendChild(valueDisplay); // Append the value display element
+        });
+
+        var truthCheckbox = document.createElement("input");
+        truthCheckbox.type = "checkbox";
+        truthCheckbox.id = "truth";
+        truthCheckbox.checked = false;
+        truthCheckbox.onchange = function() {
+            func(parseInt(document.getElementById("n").value), this.checked);
+        };
+
+        var truthLabel = document.createElement("label");
+        truthLabel.innerHTML = "Show objective function";
+        truthLabel.setAttribute("for", "truth");
+        truthLabel.style.textAlign = "right";
+
+        sliderContainer.appendChild(truthLabel);
+        sliderContainer.appendChild(truthCheckbox);
+
+        var outputContainer = document.getElementById("outputContainer");
+        outputContainer.style.height = "400px";
+
+        // Call func with initial values
+        func(parseInt(document.getElementById("n").value), document.getElementById("truth").checked);
+    </script>
+</body>
+</html>
diff --git a/book/pages/Unconstrained_optimization_example_1.ipynb b/book/pages/Unconstrained_optimization_example_1.ipynb
@@ -98,48 +98,12 @@
    "source": [
     "An approach to solve this problem might be to try out some values. You can do so in the applet below. The plot below shows the negative profit for some number of bathmetry maps sold.\n",
     "\n",
-    ":::{card}\n",
-    "Click {fa}`rocket` --> {guilabel}`Live Code` to enable this applet. Try and adjust the values for $n$, the number of bathmetry maps sold. How small can you get the negative profit?\n",
+    ":::{card} Test yourself\n",
+    "Try and adjust the values for $n$, the number of bathmetry maps sold. How small can you get the negative profit?\n",
+    "<iframe src=\"../_static/maps.html\" style=\"overflow:hidden;height:500;width:100%\" height=\"5o0\" width=\"100%\"> frameborder=\"0\"></iframe>\n",
     ":::"
    ]
   },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "tags": [
-     "thebe-remove-input-init"
-    ]
-   },
-   "outputs": [],
-   "source": [
-    "from ipywidgets import widgets, interact\n",
-    "import numpy as np\n",
-    "import matplotlib.pylab as plt\n",
-    "%config InlineBackend.figure_formats = ['svg']\n",
-    "\n",
-    "n_range = np.linspace(0,100,100)\n",
-    "def func(n,truth):\n",
-    "    fig, ax = plt.subplots(1, 1)\n",
-    "    title = 'Negative profit for amount of bathmetry maps sold is € ' + str(round(75*n - (150 - 0.01 * n**2)*n,2))\n",
-    "    ax.clear()\n",
-    "    ax.set_title(title)\n",
-    "    if truth:\n",
-    "        ax.plot(n_range,75*n_range - (150 - 0.01 * n_range**2)*n_range)\n",
-    "    ax.plot(n,75*n - (150 - 0.01 * n**2)*n,'o');\n",
-    "    ax.set_xlim([0,100])\n",
-    "    ax.set_xlabel('Number of bathmetry maps $n$ sold (-)')\n",
-    "    ax.set_ylabel('Negative profit (€)')\n",
-    "    ax.set_ylim([-3000,3000])\n",
-    "    ax.spines['right'].set_color('none')\n",
-    "    ax.spines['top'].set_color('none')\n",
-    "    ax.spines['bottom'].set_position('zero')\n",
-    "    ax.spines['left'].set_position('zero')\n",
-    "    plt.show();\n",
-    "\n",
-    "interact(func, n = widgets.IntSlider(min=0, max=100, value=20, step=1, description=\"#maps n sold\"), truth = widgets.Checkbox(value=False, description='Show objective function', disabled=False));"
-   ]
-  },
   {
    "cell_type": "markdown",
    "metadata": {},