Updated exercise 1 html

734750db · Rushikesh Padsala · 4d67a691 · 734750db
Commit 734750db authored May 30, 2023 by Rushikesh Padsala
--- a/Exercise 1/index.html
+++ b/Exercise 1/index.html
 <html>
 <head>
-    <title>Building - Heat Demand</title>
-    <meta charset="utf-8">
+<title>Building - Heat Demand</title>
+	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
@@ -12,50 +12,29 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>   
    <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="map-container">
-        <div id="mapid"></div>
+		<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', {
+<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', {
            maxZoom: 18,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });
        // select one basemap from https://leaflet-extras.github.io/leaflet-providers/preview/
-        var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+    var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
            subdomains: 'abcd',
            maxZoom: 19
        });
        CartoDB_Positron.addTo(mymap);

-        function onEachFeature(feature, layer) {
+    function onEachFeature(feature, layer) {
            layer.bindPopup(
                '<h4>' +
                feature.properties.gml_id + '</h4><p>Specific Space Heating Demand: ' + feature.properties
@@ -63,7 +42,7 @@
                '[kWh/m².year] </p>');
        }

-        function getColor(d) {
+    function getColor(d) {
            return d > 250 ? '#F22E22' :
                d > 200 ? '#F56D1F' :
                d > 150 ? '#F9A717' :
@@ -76,7 +55,7 @@
                '#FFEDA0';
        }

-        function style(feature) {
+    function style(feature) {
            return {
                fillColor: getColor(feature.properties.Specific_s),
                weight: 1,
@@ -86,67 +65,62 @@
                fillOpacity: 0.95
            };
        }
-        L.geoJSON(building_data, {
-            onEachFeature: onEachFeature,
-            style: style,
+    L.geoJSON(building_data, {
+        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;
-});
+// 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;
-  }
-});
+	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);
+	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'
-      }
-    },
+	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>
 </body>