Skip to content
GitLab
Commit 734750db authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Updated exercise 1 html

parent 4d67a691
master
No related merge requests found
Pipeline #7525 passed with stages
in 8 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 51 additions and 77 deletions
+51 -77
Exercise 1/index.html
+ 51
- 77
View file @ 734750db
<html> <html>
<head> <head>
<title>Building - Heat Demand</title> <title>Building - Heat Demand</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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" <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
...@@ -12,50 +12,29 @@ ...@@ -12,50 +12,29 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="building_data.js"></script> <script src="building_data.js"></script>
<link rel="stylesheet" href="index.css"> <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> </head>
<body> <body>
<div id="map-container"> <div id="map-container">
<div id="mapid"></div> <div id="mapid"></div>
</div> </div>
<div id="chart-container"> <div id="chart-container">
<canvas id="yocChart"></canvas> <canvas id="yocChart"></canvas>
</div> </div>
<script>
var mymap = L.map('mapid').setView([48.79205, 9.20758], 16);
<script> var OpenStreetMap_DE = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
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, maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}); });
// select one basemap from https://leaflet-extras.github.io/leaflet-providers/preview/ // 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>', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd', subdomains: 'abcd',
maxZoom: 19 maxZoom: 19
}); });
CartoDB_Positron.addTo(mymap); CartoDB_Positron.addTo(mymap);
function onEachFeature(feature, layer) { function onEachFeature(feature, layer) {
layer.bindPopup( layer.bindPopup(
'<h4>' + '<h4>' +
feature.properties.gml_id + '</h4><p>Specific Space Heating Demand: ' + feature.properties feature.properties.gml_id + '</h4><p>Specific Space Heating Demand: ' + feature.properties
...@@ -63,7 +42,7 @@ ...@@ -63,7 +42,7 @@
'[kWh/m².year] </p>'); '[kWh/m².year] </p>');
} }
function getColor(d) { function getColor(d) {
return d > 250 ? '#F22E22' : return d > 250 ? '#F22E22' :
d > 200 ? '#F56D1F' : d > 200 ? '#F56D1F' :
d > 150 ? '#F9A717' : d > 150 ? '#F9A717' :
...@@ -76,7 +55,7 @@ ...@@ -76,7 +55,7 @@
'#FFEDA0'; '#FFEDA0';
} }
function style(feature) { function style(feature) {
return { return {
fillColor: getColor(feature.properties.Specific_s), fillColor: getColor(feature.properties.Specific_s),
weight: 1, weight: 1,
...@@ -86,67 +65,62 @@ ...@@ -86,67 +65,62 @@
fillOpacity: 0.95 fillOpacity: 0.95
}; };
} }
L.geoJSON(building_data, { L.geoJSON(building_data, {
onEachFeature: onEachFeature, onEachFeature: onEachFeature,
style: style, style: style,
}).addTo(mymap); }).addTo(mymap);
// Retrieve the building year of construction data from the GeoJSON // Retrieve the building year of construction data from the GeoJSON
var buildingYoc = building_data.features.map(function(feature) { var buildingYoc = building_data.features.map(function(feature) {
return feature.properties.Year_of_co; return feature.properties.Year_of_co;
}); });
// Count the occurrences of each building age // Count the occurrences of each building age
var yocCounts = {}; var yocCounts = {};
buildingYoc.forEach(function(Year_of_co) { buildingYoc.forEach(function(Year_of_co) {
if (yocCounts[Year_of_co]) { if (yocCounts[Year_of_co]) {
yocCounts[Year_of_co]++; yocCounts[Year_of_co]++;
} else { } else {
yocCounts[Year_of_co] = 1; yocCounts[Year_of_co] = 1;
} }
}); });
// Prepare the chart data // Prepare the chart data
var yocLabels = Object.keys(yocCounts); var yocLabels = Object.keys(yocCounts);
var yocData = Object.values(yocCounts); var yocData = Object.values(yocCounts);
// Create the building year of construction distribution chart using Chart.js // Create the building year of construction distribution chart using Chart.js
var ctx = document.getElementById('yocChart').getContext('2d'); var ctx = document.getElementById('yocChart').getContext('2d');
var yocChart = new Chart(ctx, { var yocChart = new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
labels: yocLabels, labels: yocLabels,
datasets: [{ datasets: [{
label: 'No. of buildings', label: 'No. of buildings',
data: yocData, data: yocData,
backgroundColor: 'rgba(75, 192, 192, 0.5)', backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)', borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
borderWidth: 1 }]
}] },
}, options: {
options: { responsive: true,
responsive: true, plugins: {
plugins: { legend: {
legend: { position: 'bottom',
position: 'bottom', },
}, title: {
title: { display: true,
display: true, text: 'Building Distribution According to its Year of Construction'
text: 'Building Distribution According to its Year of Construction' }
} },
},
scales: { scales: {
y: { y: {
beginAtZero: true, beginAtZero: true,
stepSize: 15 stepSize: 15
} }
} }
} }
}); });
</script> </script>
</body> </body>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal