Commit 62cca955 authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Update Exercise 1/index.html

parent 6ff41386
Pipeline #7513 passed with stages
in 10 seconds
......@@ -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>
......
Markdown is supported
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