<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>
      D3 Heatmap for Cardiovascular Diseases (2018-2023)
    </title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
      body {
        background-color: #515a5a;
        color: white;
      }

      .tooltip {
        opacity: 0;
        position: absolute;
        background-color: #515a5a;
        border: solid;
        border-width: 2px;
        border-radius: 5px;
        padding: 5px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="tooltip"></div>
    <svg width="1000" height="1000"></svg>

    <script>
      // Update the CSV URL
      const csv_url =
        'https://gist.githubusercontent.com/shreyasribearelly/aac9b9ef15074b6652fa2c9bd54be2e5/raw/b285186cf8655c1d02958731cf0faa663f7cd474/heatmap.csv';
      const svg = d3.select('svg');
      const tooltip = d3.select('.tooltip');

      d3.csv(csv_url).then(function (data) {
        drawLabels(data);
        drawHeatmap(data);
        drawLegend();
      });

      function drawLabels(data) {
        svg
          .append('text')
          .attr('x', 500)
          .attr('y', 50)
          .attr('text-anchor', 'middle')
          .attr('font-size', 30)
          .text(
            'D3 Heatmap of Cardiovascular Disease Cases for Countries (2018-2023)',
          )
          .style('fill', 'white');

        // Draw country labels along the X-axis
        const countries = [
          'USA',
          'India',
          'China',
          'Brazil',
          'Russia',
          'Australia',
          'Africa',
          'UK',
          'Canada',
          'Mexico',
        ];
        countries.forEach((country, index) => {
          svg
            .append('text')
            .attr('x', index * 50 + 215)
            .attr('y', 540)
            .attr('text-anchor', 'middle')
            .attr('font-size', 15)
            .text(country)
            .style('fill', 'white');
        });

        // Draw year labels along the Y-axis
        const years = [2018, 2019, 2020, 2021, 2022, 2023];
        years.forEach((year, index) => {
          svg
            .append('text')
            .attr('x', 150)
            .attr('y', index * 50 + 200)
            .attr('text-anchor', 'end')
            .attr('font-size', 15)
            .text(year)
            .style('fill', 'white');
        });
      }

      function drawHeatmap(data) {
        let x = 200;
        let y = 200;

        const years = [2018, 2019, 2020, 2021, 2022, 2023];
        years.forEach((year, index_y) => {
          x = 200;
          data
            .filter((d) => d.Year == year)
            .forEach((d, index_x) => {
              d.Number = +d.Number;

              // Draw heatmap rectangle
              svg
                .append('rect')
                .attr('x', index_x * 50 + 200)
                .attr('y', index_y * 50 + 200)
                .attr('width', 33)
                .attr('height', 33)
                .attr(
                  'fill',
                  `rgb(${(d.Number / 5000) * 255}, 24, 24)`,
                )
                .on('mousemove', function (event) {
                  tooltip
                    .style('opacity', 1)
                    .html(
                      `Country: ${d.Country}<br>Year: ${d.Year}<br>Cases: ${d.Number}`,
                    )
                    .style('left', event.pageX + 25 + 'px')
                    .style('top', event.pageY - 25 + 'px');
                })
                .on('mouseleave', function () {
                  tooltip.style('opacity', 0);
                });

              x += 50;
            });
        });
      }

      function drawLegend() {
        svg
          .append('text')
          .attr('x', 865)
          .attr('y', 150)
          .attr('font-size', 20)
          .text('Legend')
          .attr('text-anchor', 'middle')
          .style('fill', 'white');

        const legendX = 850;
        const legendY = 200;
        const legendHeight = 220;
        const legendWidth = 30;

        svg
          .append('text')
          .attr('x', 865)
          .attr('y', 190)
          .attr('font-size', 15)
          .text('Low')
          .attr('text-anchor', 'middle')
          .style('fill', 'white');

        svg
          .append('text')
          .attr('x', 865)
          .attr('y', 440)
          .attr('font-size', 15)
          .text('High')
          .attr('text-anchor', 'middle')
          .style('fill', 'white');

        for (let i = 0; i < 5; i++) {
          const legendColor = `rgb(${(i * 255) / 4}, 24, 24)`;
          svg
            .append('rect')
            .attr('x', legendX)
            .attr('y', legendY + i * (legendHeight / 5))
            .attr('width', legendWidth)
            .attr('height', legendHeight / 5)
            .attr('fill', legendColor);
        }
      }
    </script>
  </body>
</html>
