From 734750dbc9c973984318ab1806dd0c258f253e66 Mon Sep 17 00:00:00 2001
From: Rushikesh Padsala <rushikesh.padsala@hft-stuttgart.de>
Date: Tue, 30 May 2023 09:19:29 +0000
Subject: [PATCH] Updated exercise 1 html
---
Exercise 1/index.html | 128 +++++++++++++++++-------------------------
1 file changed, 51 insertions(+), 77 deletions(-)
diff --git a/Exercise 1/index.html b/Exercise 1/index.html
index ad492cd..c887473 100644
--- a/Exercise 1/index.html
+++ b/Exercise 1/index.html
@@ -1,7 +1,7 @@
<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: '© <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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <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>
--
GitLab