diff --git a/public/leaflet-stoeckach-heatdemand/index.css b/public/leaflet-stoeckach-heatdemand/index.css
index 4e673e754bb089f82a428057679da824bb9af2ca..4a305111dbf42c285ab5ce517f42fd2ade9beb14 100644
--- a/public/leaflet-stoeckach-heatdemand/index.css
+++ b/public/leaflet-stoeckach-heatdemand/index.css
@@ -1 +1 @@
-#mapid { height: 100%; }
\ No newline at end of file
+#mapid { height: 100%; }
diff --git a/public/leaflet-stoeckach-heatdemand/index.html b/public/leaflet-stoeckach-heatdemand/index.html
index 0180ddf34eea99189cd9ef2d71272ba7dabdd980..dc0ae5e5ca8c253bc6639a4c115485749cf9cca1 100644
--- a/public/leaflet-stoeckach-heatdemand/index.html
+++ b/public/leaflet-stoeckach-heatdemand/index.html
@@ -10,10 +10,30 @@
crossorigin="">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
- crossorigin=""></script>
-
- <script src="building_data.js"></script>
+ crossorigin=""></script>
+<script src="building_data.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>
@@ -67,6 +87,63 @@
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>
@@ -75,4 +152,4 @@
</body>
-</html>
\ No newline at end of file
+</html>