From 62cca95504a6c2081b97b0c22042858ea17108fd Mon Sep 17 00:00:00 2001
From: Rushikesh Padsala <rushikesh.padsala@hft-stuttgart.de>
Date: Mon, 29 May 2023 14:28:31 +0000
Subject: [PATCH] Update Exercise 1/index.html
---
Exercise 1/index.html | 81 ++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 80 insertions(+), 1 deletion(-)
diff --git a/Exercise 1/index.html b/Exercise 1/index.html
index 26b0242..84c0ac9 100644
--- a/Exercise 1/index.html
+++ b/Exercise 1/index.html
@@ -14,10 +14,34 @@
<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="mapid"></div>
+ <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', {
@@ -67,6 +91,61 @@
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>
--
GitLab