An error occurred while loading the file. Please try again.
-
Rushikesh Padsala authored
<html><head><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==" crossorigin=""> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="building_data.js"></script> <link rel="stylesheet" href="index.css"></head><body> <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', { 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', { 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) { layer.bindPopup( '<h4>' + feature.properties.gml_id + '</h4><p>Specific Space Heating Demand: ' + feature.properties .Specific_s + '[kWh/m².year] </p>'); } function getColor(d) { return d > 250 ? '#F22E22' : d > 200 ? '#F56D1F' : d > 150 ? '#F9A717' : d > 125 ? '#FECE02' : d > 100 ? '#F6EC00' : d > 75 ? '#D1E023' : d > 50 ? '#B2D531' : d > 25 ? '#A4C711' : d > 0 ? '#61B949' : '#FFEDA0'; } function style(feature) { return { fillColor: getColor(feature.properties.Specific_s), weight: 1, opacity: 1, color: 'white', // dashArray: '3', fillOpacity: 0.95 }; } L.geoJSON(building_data, { onEachFeature: onEachFeature, style: style,
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
}).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>
</body>
</html>