index.html

<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">
    	    <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="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: '&copy; <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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <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,
        }).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>