Added y-value choice drop down, + some minor fixes

robertwenink · Dec 12, 2020 · 18a9168 · 18a9168
1 parent 80721f4
commit 18a9168
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -15,6 +15,19 @@
 <body>
     <h1 id="title">Housing prices in the Netherlands</h1>
     <h2 id="subtitle">Classical macro-economics: The relation of asset scarceness and price</h4>
+    <div id="container">
+        <div id="selectionUI">
+            yAxis:
+            <select id="yAxisItem" onchange="selectVariable(0)">
+                <option value="GemiddeldeVerkoopprijs" selected="selected">GemiddeldeVerkoopprijs</option>
+                <option value="PrijsindexVerkoopprijzen">PrijsindexVerkoopprijzen</option>
+                <option value="Woningvoorraad">Woningvoorraad</option>
+                <option value="Toevoeging">Toevoeging</option> 
+                <option value="VerkochteWoningen">VerkochteWoningen</option>
+                <option value="TotaleWaardeVerkoopprijzen">TotaleWaardeVerkoopprijzen</option>
+            </select>
+        </div>
+        </div>
     <div id="slider"></div>
     <div id="mapContainer"></div>
     <div id="lineGraphContainer"></div>

diff --git a/js/globals.js b/js/globals.js
@@ -53,5 +53,20 @@ function changeSelectedProvince(newSelectedProvince, newName) {
         selectedProvinceName = [];
     }
     //changePlot(selectedProvince)
-    setLineGraph();
+    setLineGraphProvince();
 }
+
+function updatePoints(v) {
+        dataname = v;
+        setLineGraphYValue();
+  }
+
+function selectVariable(id) {
+    var variable;
+    if(id == 0)
+    {
+      var e = document.getElementById("yAxisItem");
+      yValue = e.options[e.selectedIndex].value;
+    } 
+    updatePoints(yValue);
+  }
diff --git a/js/lineGraph.js b/js/lineGraph.js
@@ -47,10 +47,11 @@ function init() {
             .domain([0, d3.max(data, function (d) { return +d[dataname]; })])
             .range([height, 0]);
         svg.append("g")
+            .attr("class", "yaxis")
             .call(d3.axisLeft(y))
 
         svg.append("text")
-            .attr("class", "y label")
+            .attr("class", "ylabel")
             .attr("text-anchor", "middle")
             .attr("y", -53)
             .attr("x", -height / 2)
@@ -65,6 +66,22 @@ function init() {
     setText();
 }
 
+function resetYaxis() {
+    d3.select(".ylabel").text(dataname)
+    d3.csv('datasets/dataset.csv', function (data) {
+        y = d3.scaleLinear()
+            .domain([0, d3.max(data, function (d) { return +d[dataname]; })])
+            .range([height, 0]);
+
+        var t = d3.transition()
+            .duration(5)
+
+        svg.selectAll(".yaxis")
+            .transition(t)
+            .call(d3.axisLeft(y))
+    })
+}
+
 function setText() {
     // reset DOM elements first
     message.selectAll(".select-province-message").remove()
@@ -97,6 +114,7 @@ function setDataNL() {
         .enter()
         .append("path")
         .attr("fill", "none")
+        .attr("class", "NLlinegraphelement")
         // .attr("stroke", function (d) { return color(d.key) })
         .attr("stroke", "red")
         .attr("stroke-width", 1.5)
@@ -109,7 +127,7 @@ function setDataNL() {
 }
 
 // Update the line graph according to selected map variables.
-function setLineGraph() {
+function setLineGraphProvince() {
     setText();
 
     // reset lines
@@ -135,6 +153,7 @@ function setLineGraph() {
             .append("path")
             .attr("class", "lineplotelement")
             .attr("stroke", function (d) { return colorGraph(d.key) })
+            .attr("fill", "none")
             .attr("stroke-width", 1.5)
             .attr("d", function (d) {
                 return d3.line()
@@ -145,4 +164,40 @@ function setLineGraph() {
     }
 }
 
+// Update the line graph according to selected yvalues.
+function setLineGraphYValue() {
+    setText();
+
+    d3.selectAll(".NLlinegraphelement").remove()
+    d3.selectAll(".lineplotelement").remove()
+
+    setDataNL();
+    resetYaxis();
+    // Accumulate data to add
+    data = [];
+
+    function isProvince(value) {
+        if (selectedProvinceName.includes(value.key)) {
+            data.push(value)
+        }
+    }
+    sumstat.forEach(isProvince);
+
+    // Draw the line
+    svg.selectAll(".lineplotelement")
+        .data(data)
+        .enter()
+        .append("path")
+        .attr("class", "lineplotelement")
+        .attr("stroke", function (d) { return colorGraph(d.key) })
+        .attr("fill", "none")
+        .attr("d", function (d) {
+            return d3.line()
+                .x(function (d) { return x(d.Perioden); })
+                .y(function (d) { return y(d[dataname]); })
+                (d.values)
+        })
+
+}
+
 init();