Update Exercise 1/index.html

62cca955 · Rushikesh Padsala · 6ff41386 · 62cca955
Commit 62cca955 authored 1 year ago by Rushikesh Padsala
Hide whitespace changes
Inline Side-by-side

Showing

with 80 additions and 1 deletion
+80 -1
--- a/Exercise 1/index.html
+++ b/Exercise 1/index.html
@@ -14,10 +14,34 @@
        
    <script src="building_data.js"></script>
    <link rel="stylesheet" href="index.css">
+    	    <style>
+        body {
+            display: flex;
+            flex-direction: row;
+            margin: 0;
+            padding: 0;
+        }
+        #map-container {
+            flex: 1;
+            height: 100vh;
+        }
+        #chart-container {
+            flex: 1;
+            padding: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    </style>
 </head>

 <body>
-    <div id="mapid"></div>
+        <div id="map-container">
+        <div id="mapid"></div>
+    </div>
+    <div id="chart-container">
+        <canvas id="yocChart"></canvas>
+    </div>
    <script>
        var mymap = L.map('mapid').setView([48.79205, 9.20758], 16);
        var OpenStreetMap_DE = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
@@ -67,6 +91,61 @@
            onEachFeature: onEachFeature,
            style: style,
        }).addTo(mymap);
+        // Retrieve the building year of construction data from the GeoJSON
+var buildingYoc = building_data.features.map(function(feature) {
+  return feature.properties.Year_of_co;
+});
+
+// Count the occurrences of each building age
+var yocCounts = {};
+buildingYoc.forEach(function(Year_of_co) {
+  if (yocCounts[Year_of_co]) {
+    yocCounts[Year_of_co]++;
+  } else {
+    yocCounts[Year_of_co] = 1;
+  }
+});
+
+// Prepare the chart data
+var yocLabels = Object.keys(yocCounts);
+var yocData = Object.values(yocCounts);
+
+// Create the building year of construction distribution chart using Chart.js
+var ctx = document.getElementById('yocChart').getContext('2d');
+var yocChart = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    labels: yocLabels,
+    datasets: [{
+      label: 'No. of buildings',
+      data: yocData,
+      backgroundColor: 'rgba(75, 192, 192, 0.5)',
+      borderColor: 'rgba(75, 192, 192, 1)',
+	  
+      borderWidth: 1
+    }]
+  },
+  options: {
+    responsive: true,
+	 plugins: {
+      legend: {
+        position: 'bottom',
+      },
+      title: {
+        display: true,
+        text: 'Building Distribution According to its Year of Construction'
+      }
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        stepSize: 15
+      }
+    }
+	
+  }
+
+});
    </script>