MrJonoCES/main.js

## main.js
const chartsHome = document.getElementById('prev_monthly_chart_container');
const prevYearData = 'https://raw.githubusercontent.com/stillawake17/FlightViz/main/data/combined_flights_data.json';
const currentYearData = 'https://raw.githubusercontent.com/stillawake17/FlightViz/main/data/combined_flights_data.json';

if (chartsHome) {

  document.addEventListener('DOMContentLoaded', function() {

    // Load the data
    let data2023, data2024;
    Promise.all([
      d3.json(prevYearData).then(data => data2023 = data),
      d3.json(currentYearData).then(data => data2024 = data)
    ]).then(() => {
  // Process data for both years
  [data2023, data2024].forEach(data => {
    data.forEach(function(d) {
      let actualTime = null;

      // Check for arrival data with iataCode 'brs'
      if (d.arrival && d.arrival.iataCode === 'brs' && 'actualTime' in d.arrival) {
          actualTime = d.arrival.actualTime;
      }
      // If not found in arrival, check for departure data with iataCode 'brs'
      else if (d.departure && d.departure.iataCode === 'brs' && 'actualTime' in d.departure) {
          actualTime = d.departure.actualTime;
      }

      // If actualTime is found, proceed
      if (actualTime) {
          let date = new Date(actualTime); // Parsing ISO 8601 date format
          d.latestTime = date;
          d.Hour = date.getHours();
          d.Minute = date.getMinutes();

          // Classify the time category
          d.Time_Category = "Regular arrivals";
          if (d.Hour === 23 && d.Minute < 30) d.Time_Category = "Shoulder hour flights";
          else if ((d.Hour === 23 && d.Minute >= 30) || d.Hour < 6) d.Time_Category = "Night hour arrivals";
          else if (d.Hour === 6) d.Time_Category = "Shoulder hour flights";
      }
    });
  });


    let prev_total_flights = data2023.length;
    let prev_shoulder_hour_flights = data2023.filter(d => d.Time_Category === 'Shoulder hour flights').length;
    let prev_night_hour_flights = data2023.filter(d => d.Time_Category === 'Night hour arrivals').length;
    let current_total_flights = data2024.length;
    let current_shoulder_hour_flights = data2024.filter(d => d.Time_Category === 'Shoulder hour flights').length;
    let current_night_hour_flights = data2024.filter(d => d.Time_Category === 'Night hour arrivals').length;

    // Quotas
    let quotas = [85990, 9500, 4000];

    // Categories and counts
    let categories = ['Total Flights', 'Shoulder Hour Flights', 'Night Hour Flights'];
    let counts2023 = [prev_total_flights, prev_shoulder_hour_flights, prev_night_hour_flights];
    let counts2024 = [current_total_flights, current_shoulder_hour_flights, current_night_hour_flights];

    // Calculating percentages
    let percentages2023 = counts2023.map((count, index) => (count / quotas[index]) * 100);
    let percentages2024 = counts2024.map((count, index) => (count / quotas[index]) * 100);


    // Update dials
    function formatNumberWithComma(number) {
      // Check if the number is 1000 or more
      if (number >= 1000) {
        // Convert the number to a string
        const numStr = number.toString();

        // Insert a comma before the last three digits
        return numStr.slice(0, -3) + "," + numStr.slice(-3);
      } else {
        // If the number is less than 1000, return it without modification
        return number.toString();
      }
    }

    function updateCountElement(elementId, value) {
      // Select the span element by its ID
      const countElement = document.getElementById(elementId);

      // Format the number with a comma
      const formattedValue = formatNumberWithComma(value);

      // Update the content of the element
      countElement.textContent = formattedValue;
    }

    // Call this function with the appropriate values
    updateCountElement("prev_night_count", prev_night_hour_flights);
    updateCountElement("prev_shoulder_count", prev_shoulder_hour_flights);
    updateCountElement("prev_total_count", prev_total_flights);
    updateCountElement("current_night_count", current_night_hour_flights);
    updateCountElement("current_shoulder_count", current_shoulder_hour_flights);
    updateCountElement("current_total_count", current_total_flights);

  // Function to aggregate flight data by month for a given year
  function aggregateDataByMonth(flightData, year) {
    const monthlyCounts = new Array(12).fill(0); // Array for each month

    flightData.forEach(d => {
        // Assuming the date is in d.arrival.actualTime or d.departure.actualTime
        let actualTime = d.arrival ? d.arrival.actualTime : (d.departure ? d.departure.actualTime : null);

        if (actualTime) {
            let date = new Date(actualTime);
            let flightYear = date.getFullYear();
            let flightMonth = date.getMonth(); // getMonth() returns 0-11 for Jan-Dec

            if (flightYear === year) {
                monthlyCounts[flightMonth]++;
            }
        }
    });

    return monthlyCounts;
  }


    // Assuming percentages is an array with values for total, shoulder, and night flights
    // and that quotas are the maximum values for each bar

    // Example: let percentages = [60, 45, 80]; // Percent completion for each category

    // Define maximum width for the progress bars (could be based on the container's width)
    const maxBarWidth = 300; // This should match the width of your progress containers
    // Define colors for each progress bar
    const barColors = {
      totalFlights: "#60FF98",
      shoulderFlights: "#07D7ED",
      nightFlights: "#7D71FF"
    };

    let roundedPercentages2023 = percentages2023.map(function(d) {
      return d.toFixed(1);  // Rounds the percentage to one decimal place
    });

    let roundedPercentages2024 = percentages2024.map(function(d) {
      return d.toFixed(1);  // Rounds the percentage to one decimal place
    });

      function rotateSingleIndicator(element, percentage) {
        // Calculate the rotation angle
        const rotationAngle = percentage / 100 * 270;

        // animate the rotation of the dial
        gsap.to(element, {
            duration: 1,
            rotation: rotationAngle,
            transformOrigin: "top right",
            ease: "power1.inOut"
        });

        // Get the .dial-bg element related to the current indicator
        const dialBg = element.closest('.dial').querySelector('.dial-bg');

        // Calculate the time when the dial reaches 70%
        const timeToReach70Percent = 0.7 * 1; // Assuming 1 second total duration

        if (percentage > 80 && percentage < 95) {
            // Delay the color change to the moment the dial crosses 70%
            gsap.to(dialBg, {
                delay: timeToReach70Percent,
                fill: 'orange'
            });
        } else if (percentage > 95) {
          // Delay the color change to the moment the dial crosses 70%
          gsap.to(dialBg, {
              delay: timeToReach70Percent,
              fill: 'red'
          });
      }
        else {
            // Reset to the original color without delay
            gsap.to(dialBg, { fill: 'originalColor' }); // Replace 'originalColor' with the default color of the dial
        }
    }

    // Function to rotate all indicators
    function rotateAllIndicators(selector, percentages) {
      // Select all elements with the given selector
      const dials = document.querySelectorAll(selector);

      // Iterate over each dial element
      dials.forEach((dial, index) => {
        // Ensure we don't exceed the length of the percentages array
        if (index < percentages.length) {
          const percentage = percentages[index];

          // Create a ScrollTrigger for each dial
          ScrollTrigger.create({
            trigger: dial,
            start: "bottom bottom", // Start the animation when the top of the dial reaches the bottom of the viewport
            onEnter: () => rotateSingleIndicator(dial.querySelector('.indicator'), percentage)
          });
        }
      });
    }
    // Rotate the dials for 2023
    rotateAllIndicators(".prev_dial", roundedPercentages2023);

    // Rotate the dials for 2024
    rotateAllIndicators(".current_dial", roundedPercentages2024);

    // Function to draw the bar chart for monthly data
    function drawMonthlyChart(containerId, monthlyData, category) {
        // Clear any existing charts
      d3.select(containerId).selectAll("*").remove();

        console.log("Drawing chart for category:", category);
        console.log("Monthly data:", monthlyData);
        console.log("Percentages:", [percentages[0], percentages[1], percentages[2]]);

      // Set up dimensions for the chart
      // Select the parent container
      const parentContainer = d3.select('.parent-container').node();

      // Get the computed style of the parent container to access padding values
      const style = window.getComputedStyle(parentContainer);

      // Parse padding values from the computed style
      const paddingTop = parseInt(style.paddingTop, 10);
      const paddingBottom = parseInt(style.paddingBottom, 20);
      const paddingLeft = parseInt(style.paddingLeft, 10);
      const paddingRight = parseInt(style.paddingRight, 10);

      // Calculate the width and height based on the parent container's dimensions and padding
      const margin = {top: 50, right: 20, bottom: 30, left: 40}; // Adjust margin as needed
      const width = parentContainer.getBoundingClientRect().width - paddingLeft - paddingRight - margin.left - margin.right;
      const height = parentContainer.getBoundingClientRect().height - paddingTop - paddingBottom - margin.top - margin.bottom -50;


        // Define color schemes
      const colorSchemes = {
        'Total Flights': '#60FF98',
        'Shoulder Hour Flights': '#07D7ED',
        'Night Hour Flights': '#7D71FF'
      };

      // Use the color based on the category
      const barColor = colorSchemes[category] || 'grey'; // Fallback color if category is not found

        // Create SVG container for the chart
      const svg = d3.select(containerId).append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

              // Adding title to the chart
        svg.append("text")
        .attr("x", width / 2)
        .attr("y", 0 - margin.top / 2)
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("fill", "#fff")
        // .text(`${category} - Monthly Distribution`)
        ;

              // Check if SVG is created properly
        console.log("SVG created with width and height:", width, height);

        // X scale - months
        const x = d3.scaleBand()
            .range([0, width])
            .padding(0.1)
            .domain(monthlyData.map((_, i) => i)); // 0-11 for Jan-Dec

        // Y scale - flight counts
        const y = d3.scaleLinear()
            .range([height, 0])
            .domain([0, d3.max(monthlyData)]);

    // Check scales
    console.log("X and Y scales set.");

    // X axis - months
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).tickFormat(i => d3.timeFormat("%b")(new Date(0, i)))); // Convert month number to 3-letter name

    // Y axis - flight counts
    svg.append("g")
        .call(d3.axisLeft(y));

    // Check axes
    console.log("Axes drawn.");

    // Bars for the chart
    svg.selectAll(".bar")
      .data(monthlyData)
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("x", (d, i) => x(i))
      .attr("width", x.bandwidth())
      .attr("y", height) // Start the bars at the bottom
      .attr("height", 0) // Set the initial height to 0
      .style("fill", barColor) // Set the color for the bars
      .each(function(d, i) {
        // Use GSAP to animate the bars
        gsap.to(this, { // 'this' refers to the current DOM element
          attr: {
            y: y(d), // Animate the 'y' attribute to the final value
            height: height - y(d), // Animate the 'height' attribute to the final value
          },
          duration: 0.5,
          delay: i * 0.1, // Add a delay for sequential animation
        });
      });

    // Adding data count above each bar
    svg.selectAll(".text")
        .data(monthlyData)
        .enter()
        .append("text")
        .attr("class", "label")
        .attr("fill", "#fff")
        .attr("x", (d, i) => x(i) + x.bandwidth() / 2)
        .attr("y", d => y(d) - 5)
        .attr("text-anchor", "middle")
        .text(d => d);
      // Check if bars are appended
    console.log("Bars should now be visible on the chart.");

    }

    // Make sure the full year's flight data is loaded into `flightData`
    // Click event listeners for the progress bars

    const prevNightButton = document.getElementById('prev_night_button');
    const prevShoulderButton = document.getElementById('prev_shoulder_button');
    const prevTotalButton = document.getElementById('prev_total_button');
    const currentNightButton = document.getElementById('current_night_button');
    const currentShoulderButton = document.getElementById('current_shoulder_button');
    const currentTotalButton = document.getElementById('current_total_button');

    function attachEventListeners() {
      d3.select("#prev_total_button").on("click", function() {
        showMonthlyChartContainer(); // Make sure the container is visible
        const totalFlightsMonthlyData = aggregateDataByMonth(data, 2023);
        drawMonthlyChart("#prev_monthly_chart_container", totalFlightsMonthlyData, 'Total Flights');
        let element = document.querySelector('.button-on');
        if (element) {
          element.classList.remove('button-on');
        }
        prevTotalButton.classList.add('button-on');
      });

      d3.select("#prev_shoulder_button").on("click", function() {
        showMonthlyChartContainer(); // Make sure the container is visible
        const shoulderFlightsMonthlyData = aggregateDataByMonth(
          data.filter(d => d.Time_Category === 'Shoulder hour flights' && d.Year === 2023),
          2023);
        drawMonthlyChart("#prev_monthly_chart_container", shoulderFlightsMonthlyData, 'Shoulder Hour Flights');
        let element = document.querySelector('.button-on');
        if (element) {
          element.classList.remove('button-on');
        }
        prevShoulderButton.classList.add('button-on');
      });

      d3.select("#prev_night_button").on("click", function() {
        showMonthlyChartContainer(); // Make sure the container is visible
        const shoulderFlightsMonthlyData = aggregateDataByMonth(
          data.filter(d => d.Time_Category === 'Night hour arrivals' && d.Year === 2023),
          2023);
        drawMonthlyChart("#prev_monthly_chart_container", shoulderFlightsMonthlyData, 'Night hour arrivals');
        let element = document.querySelector('.button-on');
        if (element) {
          element.classList.remove('button-on');
        }
        prevNightButton.classList.add('button-on');
      });

      d3.select("#current_total_button").on("click", function() {
        showMonthlyChartContainer(); // Make sure the container is visible
        const totalFlightsMonthlyData = aggregateDataByMonth(data, 2024);
        drawMonthlyChart("#current_monthly_chart_container", totalFlightsMonthlyData, 'Total Flights');
        let element = document.querySelector('.button-on');
        if (element) {
          element.classList.remove('button-on');
        }
        currentTotalButton.classList.add('button-on');
      });

      d3.select("#current_shoulder_button").on("click", function() {
        showMonthlyChartContainer(); // Make sure the container is visible
        const shoulderFlightsMonthlyData = aggregateDataByMonth(
          data.filter(d => d.Time_Category === 'Shoulder hour flights' && d.Year === 2024),
          2024);
        drawMonthlyChart("#current_monthly_chart_container", shoulderFlightsMonthlyData, 'Shoulder Hour Flights');
        let element = document.querySelector('.button-on');
        if (element) {
          element.classList.remove('button-on');
        }
        currentShoulderButton.classList.add('button-on');
      });

      d3.select("#current_night_button").on("click", function() {
        showMonthlyChartContainer(); // Make sure the container is visible
        const shoulderFlightsMonthlyData = aggregateDataByMonth(
          data.filter(d => d.Time_Category === 'Night hour arrivals' && d.Year === 2024),
          2024);
        drawMonthlyChart("#current_monthly_chart_container", shoulderFlightsMonthlyData, 'Night hour arrivals');
        let element = document.querySelector('.button-on');
        if (element) {
          element.classList.remove('button-on');
        }
        currentNightButton.classList.add('button-on');
      });

    }

    function loadTotalFlightsChart(year, containerId, button) {
      showMonthlyChartContainer(containerId); // Make sure the container is visible
      const nightFlightsMonthlyData = aggregateDataByMonth(data, year);
      drawMonthlyChart(containerId, nightFlightsMonthlyData, 'Night Hour Flights');
      button.classList.add('button-on');
    }

    // Call the function to attach the event listeners
    attachEventListeners();
    // Call the function to load the charts for each year
    loadTotalFlightsChart(2023, "#prev_monthly_chart_container", prevNightButton);
    loadTotalFlightsChart(2024, "#current_monthly_chart_container", currentNightButton);


    }).catch(function(error) {
        console.error("Error loading the data:", error);
    })


    function showMonthlyChartContainer(containerId) {
      // Display the container
      d3.select(containerId).style("display", "block");
    }

    // Call the function to show the containers for each year
    showMonthlyChartContainer("#prev_monthly_chart_container");
    showMonthlyChartContainer("#current_monthly_chart_container");


  });

}
	const chartsHome = document.getElementById('prev_monthly_chart_container');
	const prevYearData = 'https://raw.githubusercontent.com/stillawake17/FlightViz/main/data/combined_flights_data.json';
	const currentYearData = 'https://raw.githubusercontent.com/stillawake17/FlightViz/main/data/combined_flights_data.json';

	if (chartsHome) {

	document.addEventListener('DOMContentLoaded', function() {

	// Load the data
	let data2023, data2024;
	Promise.all([
	d3.json(prevYearData).then(data => data2023 = data),
	d3.json(currentYearData).then(data => data2024 = data)
	]).then(() => {
	// Process data for both years
	[data2023, data2024].forEach(data => {
	data.forEach(function(d) {
	let actualTime = null;

	// Check for arrival data with iataCode 'brs'
	if (d.arrival && d.arrival.iataCode === 'brs' && 'actualTime' in d.arrival) {
	actualTime = d.arrival.actualTime;
	}
	// If not found in arrival, check for departure data with iataCode 'brs'
	else if (d.departure && d.departure.iataCode === 'brs' && 'actualTime' in d.departure) {
	actualTime = d.departure.actualTime;
	}

	// If actualTime is found, proceed
	if (actualTime) {
	let date = new Date(actualTime); // Parsing ISO 8601 date format
	d.latestTime = date;
	d.Hour = date.getHours();
	d.Minute = date.getMinutes();

	// Classify the time category
	d.Time_Category = "Regular arrivals";
	if (d.Hour === 23 && d.Minute < 30) d.Time_Category = "Shoulder hour flights";
	else if ((d.Hour === 23 && d.Minute >= 30) \|\| d.Hour < 6) d.Time_Category = "Night hour arrivals";
	else if (d.Hour === 6) d.Time_Category = "Shoulder hour flights";
	}
	});
	});


	let prev_total_flights = data2023.length;
	let prev_shoulder_hour_flights = data2023.filter(d => d.Time_Category === 'Shoulder hour flights').length;
	let prev_night_hour_flights = data2023.filter(d => d.Time_Category === 'Night hour arrivals').length;
	let current_total_flights = data2024.length;
	let current_shoulder_hour_flights = data2024.filter(d => d.Time_Category === 'Shoulder hour flights').length;
	let current_night_hour_flights = data2024.filter(d => d.Time_Category === 'Night hour arrivals').length;

	// Quotas
	let quotas = [85990, 9500, 4000];

	// Categories and counts
	let categories = ['Total Flights', 'Shoulder Hour Flights', 'Night Hour Flights'];
	let counts2023 = [prev_total_flights, prev_shoulder_hour_flights, prev_night_hour_flights];
	let counts2024 = [current_total_flights, current_shoulder_hour_flights, current_night_hour_flights];

	// Calculating percentages
	let percentages2023 = counts2023.map((count, index) => (count / quotas[index]) * 100);
	let percentages2024 = counts2024.map((count, index) => (count / quotas[index]) * 100);


	// Update dials
	function formatNumberWithComma(number) {
	// Check if the number is 1000 or more
	if (number >= 1000) {
	// Convert the number to a string
	const numStr = number.toString();

	// Insert a comma before the last three digits
	return numStr.slice(0, -3) + "," + numStr.slice(-3);
	} else {
	// If the number is less than 1000, return it without modification
	return number.toString();
	}
	}

	function updateCountElement(elementId, value) {
	// Select the span element by its ID
	const countElement = document.getElementById(elementId);

	// Format the number with a comma
	const formattedValue = formatNumberWithComma(value);

	// Update the content of the element
	countElement.textContent = formattedValue;
	}

	// Call this function with the appropriate values
	updateCountElement("prev_night_count", prev_night_hour_flights);
	updateCountElement("prev_shoulder_count", prev_shoulder_hour_flights);
	updateCountElement("prev_total_count", prev_total_flights);
	updateCountElement("current_night_count", current_night_hour_flights);
	updateCountElement("current_shoulder_count", current_shoulder_hour_flights);
	updateCountElement("current_total_count", current_total_flights);

	// Function to aggregate flight data by month for a given year
	function aggregateDataByMonth(flightData, year) {
	const monthlyCounts = new Array(12).fill(0); // Array for each month

	flightData.forEach(d => {
	// Assuming the date is in d.arrival.actualTime or d.departure.actualTime
	let actualTime = d.arrival ? d.arrival.actualTime : (d.departure ? d.departure.actualTime : null);

	if (actualTime) {
	let date = new Date(actualTime);
	let flightYear = date.getFullYear();
	let flightMonth = date.getMonth(); // getMonth() returns 0-11 for Jan-Dec

	if (flightYear === year) {
	monthlyCounts[flightMonth]++;
	}
	}
	});

	return monthlyCounts;
	}




	// Assuming percentages is an array with values for total, shoulder, and night flights
	// and that quotas are the maximum values for each bar

	// Example: let percentages = [60, 45, 80]; // Percent completion for each category

	// Define maximum width for the progress bars (could be based on the container's width)
	const maxBarWidth = 300; // This should match the width of your progress containers
	// Define colors for each progress bar
	const barColors = {
	totalFlights: "#60FF98",
	shoulderFlights: "#07D7ED",
	nightFlights: "#7D71FF"
	};

	let roundedPercentages2023 = percentages2023.map(function(d) {
	return d.toFixed(1); // Rounds the percentage to one decimal place
	});

	let roundedPercentages2024 = percentages2024.map(function(d) {
	return d.toFixed(1); // Rounds the percentage to one decimal place
	});

	function rotateSingleIndicator(element, percentage) {
	// Calculate the rotation angle
	const rotationAngle = percentage / 100 * 270;

	// animate the rotation of the dial
	gsap.to(element, {
	duration: 1,
	rotation: rotationAngle,
	transformOrigin: "top right",
	ease: "power1.inOut"
	});

	// Get the .dial-bg element related to the current indicator
	const dialBg = element.closest('.dial').querySelector('.dial-bg');

	// Calculate the time when the dial reaches 70%
	const timeToReach70Percent = 0.7 * 1; // Assuming 1 second total duration

	if (percentage > 80 && percentage < 95) {
	// Delay the color change to the moment the dial crosses 70%
	gsap.to(dialBg, {
	delay: timeToReach70Percent,
	fill: 'orange'
	});
	} else if (percentage > 95) {
	// Delay the color change to the moment the dial crosses 70%
	gsap.to(dialBg, {
	delay: timeToReach70Percent,
	fill: 'red'
	});
	}
	else {
	// Reset to the original color without delay
	gsap.to(dialBg, { fill: 'originalColor' }); // Replace 'originalColor' with the default color of the dial
	}
	}

	// Function to rotate all indicators
	function rotateAllIndicators(selector, percentages) {
	// Select all elements with the given selector
	const dials = document.querySelectorAll(selector);

	// Iterate over each dial element
	dials.forEach((dial, index) => {
	// Ensure we don't exceed the length of the percentages array
	if (index < percentages.length) {
	const percentage = percentages[index];

	// Create a ScrollTrigger for each dial
	ScrollTrigger.create({
	trigger: dial,
	start: "bottom bottom", // Start the animation when the top of the dial reaches the bottom of the viewport
	onEnter: () => rotateSingleIndicator(dial.querySelector('.indicator'), percentage)
	});
	}
	});
	}
	// Rotate the dials for 2023
	rotateAllIndicators(".prev_dial", roundedPercentages2023);

	// Rotate the dials for 2024
	rotateAllIndicators(".current_dial", roundedPercentages2024);

	// Function to draw the bar chart for monthly data
	function drawMonthlyChart(containerId, monthlyData, category) {
	// Clear any existing charts
	d3.select(containerId).selectAll("*").remove();

	console.log("Drawing chart for category:", category);
	console.log("Monthly data:", monthlyData);
	console.log("Percentages:", [percentages[0], percentages[1], percentages[2]]);

	// Set up dimensions for the chart
	// Select the parent container
	const parentContainer = d3.select('.parent-container').node();

	// Get the computed style of the parent container to access padding values
	const style = window.getComputedStyle(parentContainer);

	// Parse padding values from the computed style
	const paddingTop = parseInt(style.paddingTop, 10);
	const paddingBottom = parseInt(style.paddingBottom, 20);
	const paddingLeft = parseInt(style.paddingLeft, 10);
	const paddingRight = parseInt(style.paddingRight, 10);

	// Calculate the width and height based on the parent container's dimensions and padding
	const margin = {top: 50, right: 20, bottom: 30, left: 40}; // Adjust margin as needed
	const width = parentContainer.getBoundingClientRect().width - paddingLeft - paddingRight - margin.left - margin.right;
	const height = parentContainer.getBoundingClientRect().height - paddingTop - paddingBottom - margin.top - margin.bottom -50;


	// Define color schemes
	const colorSchemes = {
	'Total Flights': '#60FF98',
	'Shoulder Hour Flights': '#07D7ED',
	'Night Hour Flights': '#7D71FF'
	};

	// Use the color based on the category
	const barColor = colorSchemes[category] \|\| 'grey'; // Fallback color if category is not found

	// Create SVG container for the chart
	const svg = d3.select(containerId).append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// Adding title to the chart
	svg.append("text")
	.attr("x", width / 2)
	.attr("y", 0 - margin.top / 2)
	.attr("text-anchor", "middle")
	.style("font-size", "16px")
	.style("fill", "#fff")
	// .text(`${category} - Monthly Distribution`)
	;

	// Check if SVG is created properly
	console.log("SVG created with width and height:", width, height);

	// X scale - months
	const x = d3.scaleBand()
	.range([0, width])
	.padding(0.1)
	.domain(monthlyData.map((_, i) => i)); // 0-11 for Jan-Dec

	// Y scale - flight counts
	const y = d3.scaleLinear()
	.range([height, 0])
	.domain([0, d3.max(monthlyData)]);

	// Check scales
	console.log("X and Y scales set.");

	// X axis - months
	svg.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x).tickFormat(i => d3.timeFormat("%b")(new Date(0, i)))); // Convert month number to 3-letter name

	// Y axis - flight counts
	svg.append("g")
	.call(d3.axisLeft(y));

	// Check axes
	console.log("Axes drawn.");

	// Bars for the chart
	svg.selectAll(".bar")
	.data(monthlyData)
	.enter()
	.append("rect")
	.attr("class", "bar")
	.attr("x", (d, i) => x(i))
	.attr("width", x.bandwidth())
	.attr("y", height) // Start the bars at the bottom
	.attr("height", 0) // Set the initial height to 0
	.style("fill", barColor) // Set the color for the bars
	.each(function(d, i) {
	// Use GSAP to animate the bars
	gsap.to(this, { // 'this' refers to the current DOM element
	attr: {
	y: y(d), // Animate the 'y' attribute to the final value
	height: height - y(d), // Animate the 'height' attribute to the final value
	},
	duration: 0.5,
	delay: i * 0.1, // Add a delay for sequential animation
	});
	});

	// Adding data count above each bar
	svg.selectAll(".text")
	.data(monthlyData)
	.enter()
	.append("text")
	.attr("class", "label")
	.attr("fill", "#fff")
	.attr("x", (d, i) => x(i) + x.bandwidth() / 2)
	.attr("y", d => y(d) - 5)
	.attr("text-anchor", "middle")
	.text(d => d);
	// Check if bars are appended
	console.log("Bars should now be visible on the chart.");

	}

	// Make sure the full year's flight data is loaded into `flightData`
	// Click event listeners for the progress bars

	const prevNightButton = document.getElementById('prev_night_button');
	const prevShoulderButton = document.getElementById('prev_shoulder_button');
	const prevTotalButton = document.getElementById('prev_total_button');
	const currentNightButton = document.getElementById('current_night_button');
	const currentShoulderButton = document.getElementById('current_shoulder_button');
	const currentTotalButton = document.getElementById('current_total_button');

	function attachEventListeners() {
	d3.select("#prev_total_button").on("click", function() {
	showMonthlyChartContainer(); // Make sure the container is visible
	const totalFlightsMonthlyData = aggregateDataByMonth(data, 2023);
	drawMonthlyChart("#prev_monthly_chart_container", totalFlightsMonthlyData, 'Total Flights');
	let element = document.querySelector('.button-on');
	if (element) {
	element.classList.remove('button-on');
	}
	prevTotalButton.classList.add('button-on');
	});

	d3.select("#prev_shoulder_button").on("click", function() {
	showMonthlyChartContainer(); // Make sure the container is visible
	const shoulderFlightsMonthlyData = aggregateDataByMonth(
	data.filter(d => d.Time_Category === 'Shoulder hour flights' && d.Year === 2023),
	2023);
	drawMonthlyChart("#prev_monthly_chart_container", shoulderFlightsMonthlyData, 'Shoulder Hour Flights');
	let element = document.querySelector('.button-on');
	if (element) {
	element.classList.remove('button-on');
	}
	prevShoulderButton.classList.add('button-on');
	});

	d3.select("#prev_night_button").on("click", function() {
	showMonthlyChartContainer(); // Make sure the container is visible
	const shoulderFlightsMonthlyData = aggregateDataByMonth(
	data.filter(d => d.Time_Category === 'Night hour arrivals' && d.Year === 2023),
	2023);
	drawMonthlyChart("#prev_monthly_chart_container", shoulderFlightsMonthlyData, 'Night hour arrivals');
	let element = document.querySelector('.button-on');
	if (element) {
	element.classList.remove('button-on');
	}
	prevNightButton.classList.add('button-on');
	});

	d3.select("#current_total_button").on("click", function() {
	showMonthlyChartContainer(); // Make sure the container is visible
	const totalFlightsMonthlyData = aggregateDataByMonth(data, 2024);
	drawMonthlyChart("#current_monthly_chart_container", totalFlightsMonthlyData, 'Total Flights');
	let element = document.querySelector('.button-on');
	if (element) {
	element.classList.remove('button-on');
	}
	currentTotalButton.classList.add('button-on');
	});

	d3.select("#current_shoulder_button").on("click", function() {
	showMonthlyChartContainer(); // Make sure the container is visible
	const shoulderFlightsMonthlyData = aggregateDataByMonth(
	data.filter(d => d.Time_Category === 'Shoulder hour flights' && d.Year === 2024),
	2024);
	drawMonthlyChart("#current_monthly_chart_container", shoulderFlightsMonthlyData, 'Shoulder Hour Flights');
	let element = document.querySelector('.button-on');
	if (element) {
	element.classList.remove('button-on');
	}
	currentShoulderButton.classList.add('button-on');
	});

	d3.select("#current_night_button").on("click", function() {
	showMonthlyChartContainer(); // Make sure the container is visible
	const shoulderFlightsMonthlyData = aggregateDataByMonth(
	data.filter(d => d.Time_Category === 'Night hour arrivals' && d.Year === 2024),
	2024);
	drawMonthlyChart("#current_monthly_chart_container", shoulderFlightsMonthlyData, 'Night hour arrivals');
	let element = document.querySelector('.button-on');
	if (element) {
	element.classList.remove('button-on');
	}
	currentNightButton.classList.add('button-on');
	});

	}

	function loadTotalFlightsChart(year, containerId, button) {
	showMonthlyChartContainer(containerId); // Make sure the container is visible
	const nightFlightsMonthlyData = aggregateDataByMonth(data, year);
	drawMonthlyChart(containerId, nightFlightsMonthlyData, 'Night Hour Flights');
	button.classList.add('button-on');
	}

	// Call the function to attach the event listeners
	attachEventListeners();
	// Call the function to load the charts for each year
	loadTotalFlightsChart(2023, "#prev_monthly_chart_container", prevNightButton);
	loadTotalFlightsChart(2024, "#current_monthly_chart_container", currentNightButton);


	}).catch(function(error) {
	console.error("Error loading the data:", error);
	})




	function showMonthlyChartContainer(containerId) {
	// Display the container
	d3.select(containerId).style("display", "block");
	}

	// Call the function to show the containers for each year
	showMonthlyChartContainer("#prev_monthly_chart_container");
	showMonthlyChartContainer("#current_monthly_chart_container");



	});

	}