24 onzekerheid visualiseren

docs/assets/uncertainty/uncertainty.css

@@ -0,0 +1,37 @@
+#click_box {
+    width: 100%;
+    border: 1px solid black;
+    cursor: pointer;
+    position: relative;
+}
+
+#display_box {
+    width: 100%;
+    border: 1px solid black;
+    cursor: pointer;
+    position: relative;
+}
+
+#right_box {
+    margin-left: 10%;
+}
+
+.datapoint {
+    height: 10px;
+    width: 10px;
+    background-color: #4051b5;
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+}
+
+.border_zone {
+    outline: 10px solid white;
+    width: 45%;
+    position: relative;
+    float: left;
+}
+
+.dummy {
+    margin-top: 100%;
+}

docs/assets/uncertainty/uncertainty.js

@@ -0,0 +1,86 @@
+const xs = [];
+const ys = [];
+
+function addPoint(e) {
+    // get coordinates of mouseclick
+    const click_box = document.getElementById("click_box");
+    var rect = click_box.getBoundingClientRect();
+    var x = (e.clientX - rect.left - 5) / rect.width * 100;
+    var y = (e.clientY - rect.top - 5) / rect.width * 100;
+
+    // save coordinates
+    xs.push(x);
+    ys.push(y);
+
+    // create new datapoint
+    const datapoint = document.createElement("span");
+    datapoint.classList.add("datapoint");
+
+    // add datapoint to div
+    click_box.appendChild(datapoint);
+
+    // place datapoint at correct coordinates
+    datapoint.style.left = x + "%";
+    datapoint.style.top = y + "%";
+
+    // let datapoint be behind border to prevent clipping edge
+    datapoint.style.zIndex = -1;
+
+    // update mean and errorbars view box
+    updateCentre();
+}
+
+function updateCentre() {
+    // create and append mean point to view box if it does not exist yet
+    if (xs.length == 1) {
+        const datapoint = document.createElement("span");
+        datapoint.classList.add("datapoint");
+        datapoint.id = "mean_point";
+
+        const display_box = document.getElementById("display_box");
+        display_box.appendChild(datapoint);
+    }
+
+    // calculate mean
+    var x = 0;
+    var y = 0;
+    for (var i = 0; i < xs.length; i++) {
+        x += xs[i]/xs.length;
+        y += ys[i]/ys.length;
+    }
+
+    // calculate standard error
+    var x_square_sum = 0;
+    var y_square_sum = 0;
+
+    for (var i = 0; i < xs.length; i++) {
+        x_square_sum += Math.pow((xs[i] - x), 2);
+        y_square_sum += Math.pow((ys[i] - y), 2);
+    }
+
+    var dx = Math.pow(x_square_sum, 0.5) / xs.length
+    var dy = Math.pow(y_square_sum, 0.5) / ys.length
+
+    // get dimensions of view box
+    const display_box = document.getElementById("display_box");
+    var rect = display_box.getBoundingClientRect();
+
+    // set errorbars
+    const xbar = document.getElementById("xbar");
+    const ybar = document.getElementById("ybar");
+
+    xbar.x1.baseVal.value = x - dx + 5 / rect.width * 100;
+    xbar.x2.baseVal.value = x + dx + 5 / rect.width * 100;
+    xbar.y1.baseVal.value = y + 5 / rect.width * 100;
+    xbar.y2.baseVal.value = y + 5 / rect.width * 100;
+
+    ybar.x1.baseVal.value = x + 5 / rect.width * 100;
+    ybar.x2.baseVal.value = x + 5 / rect.width * 100;
+    ybar.y1.baseVal.value = y - dy + 5 / rect.width * 100;
+    ybar.y2.baseVal.value = y + dy + 5 / rect.width * 100;
+
+    // set mean point
+    const meanpoint = document.getElementById("mean_point");
+    meanpoint.style.left = x + "%";
+    meanpoint.style.top = y + "%";
+}

docs/mvc.md

@@ -107,4 +107,20 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor
     1. Overleg met je groepje en maak een plan hoe jullie de code gaan aanpassen om onzekerheid in te bouwen. Schrijf nog geen code op je computer maar schrijf de stappen uit met papier en pen. Het is dan veel makkelijker om te overleggen en na te denken. Welke delen van het programma moeten worden aangepast?
     1. Gebruik het plan om je eigen code aan te passen en test dat het werkt.
 
-
+<div style="overflow:hidden" width="100%">
+
+<div class="border_zone">
+    <div id="click_box" onclick="addPoint(event)">
+        <div class="dummy"></div>
+    </div>
+</div>
+
+<div class="border_zone" id="right_box">
+    <div id="display_box">
+        <svg width="100%" preserveAspectRatio="none" style="display: block;" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <line id="xbar" x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="0.5" />
+            <line id="ybar" x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="0.5" /></svg>
+    </div>
+</div>
+
+</div>

mkdocs.yml

@@ -48,12 +48,14 @@ extra_javascript:
   - https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/auto-render.min.js
   - assets/ADC_slider/ADC_slider.js
   - assets/run_button/run_button.js
+  - assets/uncertainty/uncertainty.js
 
 extra_css:
   - https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css
   - stylesheets/extra.css
   - assets/ADC_slider/ADC_slider.css
   - assets/run_button/run_button.css
+  - assets/uncertainty/uncertainty.css
 
 nav:
   - index.md